diff --git a/website/versioned_docs/version-0.81/accessibility.md b/website/versioned_docs/version-0.81/accessibility.md
index 92305d236bb..0b42f659a64 100644
--- a/website/versioned_docs/version-0.81/accessibility.md
+++ b/website/versioned_docs/version-0.81/accessibility.md
@@ -48,7 +48,7 @@ To use, set the `accessibilityLabel` property to a custom string on your View, T
 
 In the above example, the `accessibilityLabel` on the TouchableOpacity element would default to "Press me!". The label is constructed by concatenating all Text node children separated by spaces.
 
-### `accessibilityLabelledBy` <div class="label android">Android</div>
+### `accessibilityLabelledBy` <div className="label android">Android</div>
 
 A reference to another element [nativeID](view.md#nativeid) used to build complex forms.
 The value of `accessibilityLabelledBy` should match the `nativeID` of the related element:
@@ -83,15 +83,15 @@ Provide the `accessibilityHint` property a custom string on your View, Text, or
 </TouchableOpacity>
 ```
 
-<div class="label ios basic">iOS</div>
+<div className="label ios basic">iOS</div>
 
 In the above example, VoiceOver will read the hint after the label, if the user has hints enabled in the device's VoiceOver settings. Read more about guidelines for `accessibilityHint` in the [iOS Developer Docs](https://developer.apple.com/documentation/objectivec/nsobject/1615093-accessibilityhint)
 
-<div class="label android basic">Android</div>
+<div className="label android basic">Android</div>
 
 In the above example, TalkBack will read the hint after the label. At this time, hints cannot be turned off on Android.
 
-### `accessibilityLanguage` <div class="label ios">iOS</div>
+### `accessibilityLanguage` <div className="label ios">iOS</div>
 
 By using the `accessibilityLanguage` property, the screen reader will understand which language to use while reading the element's **label**, **value**, and **hint**. The provided string value must follow the [BCP 47 specification](https://www.rfc-editor.org/info/bcp47).
 
@@ -104,11 +104,11 @@ By using the `accessibilityLanguage` property, the screen reader will understand
 </View>
 ```
 
-### `accessibilityIgnoresInvertColors` <div class="label ios">iOS</div>
+### `accessibilityIgnoresInvertColors` <div className="label ios">iOS</div>
 
 Inverting screen colors is an accessibility feature available in iOS and iPadOS for people with color blindness, low vision, or vision impairment. If there's a view you don't want to invert when this setting is on, possibly a photo, set this property to `true`.
 
-### `accessibilityLiveRegion` <div class="label android">Android</div>
+### `accessibilityLiveRegion` <div className="label android">Android</div>
 
 When components dynamically change, we want TalkBack to alert the end user. This is made possible by the `accessibilityLiveRegion` property. It can be set to `none`, `polite`, and `assertive`:
 
@@ -165,13 +165,13 @@ In the above example method `addOne` changes the state variable `count`. When th
 - **toolbar** Used to represent a toolbar (a container of action buttons or components).
 - **grid** Used with ScrollView, VirtualizedList, FlatList, or SectionList to represent a grid. Adds the in/out of grid announcements to Android's GridView.
 
-### `accessibilityShowsLargeContentViewer` <div class="label ios">iOS</div>
+### `accessibilityShowsLargeContentViewer` <div className="label ios">iOS</div>
 
 A boolean value that determines whether the large content viewer is shown when the user performs a long press on the element.
 
 Available in iOS 13.0 and later.
 
-### `accessibilityLargeContentTitle` <div class="label ios">iOS</div>
+### `accessibilityLargeContentTitle` <div className="label ios">iOS</div>
 
 A string that will be used as the title of the large content viewer when it is shown.
 
@@ -214,13 +214,13 @@ Represents the current value of a component. It can be a textual description of
 | now  | The current value of this component's range.                                                   | integer | No                        |
 | text | A textual description of this component's value. Will override `min`, `now`, and `max` if set. | string  | No                        |
 
-### `accessibilityViewIsModal` <div class="label ios">iOS</div>
+### `accessibilityViewIsModal` <div className="label ios">iOS</div>
 
 A boolean value that indicates whether VoiceOver should ignore the elements within views that are siblings of the receiver.
 
 For example, in a window that contains sibling views `A` and `B`, setting `accessibilityViewIsModal` to `true` on view `B` causes VoiceOver to ignore the elements in view `A`. On the other hand, if view `B` contains a child view `C` and you set `accessibilityViewIsModal` to `true` on view `C`, VoiceOver does not ignore the elements in view `A`.
 
-### `accessibilityElementsHidden` <div class="label ios">iOS</div>
+### `accessibilityElementsHidden` <div className="label ios">iOS</div>
 
 A boolean value indicating whether the accessibility elements contained within this accessibility element are hidden.
 
@@ -292,7 +292,7 @@ Defines a string value that labels an interactive element.
 | ------ |
 | string |
 
-### `aria-labelledby` <div class="label android">Android</div>
+### `aria-labelledby` <div className="label android">Android</div>
 
 Identifies the element that labels the element it is applied to. The value of `aria-labelledby` should match the [`nativeID`](view.md#nativeid) of the related element:
 
@@ -307,7 +307,7 @@ Identifies the element that labels the element it is applied to. The value of `a
 | ------ |
 | string |
 
-### `aria-live` <div class="label android">Android</div>
+### `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.
 
@@ -321,7 +321,7 @@ Indicates that an element will be updated and describes the types of updates the
 
 ---
 
-### `aria-modal` <div class="label ios">iOS</div>
+### `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.
 
@@ -337,7 +337,7 @@ Indicates whether a selectable element is currently selected or not.
 | ------- |
 | boolean |
 
-### `importantForAccessibility` <div class="label android">Android</div>
+### `importantForAccessibility` <div className="label android">Android</div>
 
 In the case of two overlapping UI components with the same parent, default accessibility focus can have unpredictable behavior. The `importantForAccessibility` property will resolve this by controlling if a view fires accessibility events and if it is reported to accessibility services. It can be set to `auto`, `yes`, `no` and `no-hide-descendants` (the last value will force accessibility services to ignore the component and all of its children).
 
@@ -358,15 +358,15 @@ In the case of two overlapping UI components with the same parent, default acces
 
 In the above example, the `yellow` layout and its descendants are completely invisible to TalkBack and all other accessibility services. So we can use overlapping views with the same parent without confusing TalkBack.
 
-### `onAccessibilityEscape` <div class="label ios">iOS</div>
+### `onAccessibilityEscape` <div className="label ios">iOS</div>
 
 Assign this property to a custom function which will be called when someone performs the "escape" gesture, which is a two finger Z shaped gesture. An escape function should move back hierarchically in the user interface. This can mean moving up or back in a navigation hierarchy or dismissing a modal user interface. If the selected element does not have an `onAccessibilityEscape` function, the system will attempt to traverse up the view hierarchy until it finds a view that does or bonk to indicate it was unable to find one.
 
-### `onAccessibilityTap` <div class="label ios">iOS</div>
+### `onAccessibilityTap` <div className="label ios">iOS</div>
 
 Use this property to assign a custom function to be called when someone activates an accessible element by double tapping on it while it's selected.
 
-### `onMagicTap` <div class="label ios">iOS</div>
+### `onMagicTap` <div className="label ios">iOS</div>
 
 Assign this property to a custom function which will be called when someone performs the "magic tap" gesture, which is a double-tap with two fingers. A magic tap function should perform the most relevant action a user could take on a component. In the Phone app on iPhone, a magic tap answers a phone call or ends the current one. If the selected element does not have an `onMagicTap` function, the system will traverse up the view hierarchy until it finds a view that does.
 
@@ -464,7 +464,7 @@ To handle action requests, a component must implement an `onAccessibilityAction`
 
 The `AccessibilityInfo` API allows you to determine whether or not a screen reader is currently active. See the [AccessibilityInfo documentation](accessibilityinfo) for details.
 
-## Sending Accessibility Events <div class="label android">Android</div>
+## Sending Accessibility Events <div className="label android">Android</div>
 
 Sometimes it is useful to trigger an accessibility event on a UI component (i.e. when a custom view appears on a screen or set accessibility focus to a view). Native UIManager module exposes a method ‘sendAccessibilityEvent’ for this purpose. It takes two arguments: a view tag and a type of event. The supported event types are `typeWindowStateChanged`, `typeViewFocused`, and `typeViewClicked`.
 
@@ -479,7 +479,7 @@ if (Platform.OS === 'android') {
 }
 ```
 
-## Testing TalkBack Support <div class="label android">Android</div>
+## Testing TalkBack Support <div className="label android">Android</div>
 
 To enable TalkBack, go to the Settings app on your Android device or emulator. Tap Accessibility, then TalkBack. Toggle the "Use service" switch to enable or disable it.
 
@@ -499,7 +499,7 @@ adb shell settings put secure enabled_accessibility_services com.android.talkbac
 adb shell settings put secure enabled_accessibility_services com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService
 ```
 
-## Testing VoiceOver Support <div class="label ios">iOS</div>
+## Testing VoiceOver Support <div className="label ios">iOS</div>
 
 To enable VoiceOver on your iOS or iPadOS device, go to the Settings app, tap General, then Accessibility. There you will find many tools available for people to enable their devices to be more usable, including VoiceOver. To enable VoiceOver, tap on VoiceOver under "Vision" and toggle the switch that appears at the top.
 
diff --git a/website/versioned_docs/version-0.81/accessibilityinfo.md b/website/versioned_docs/version-0.81/accessibilityinfo.md
index 2e4bf6d00ce..3d77f80884f 100644
--- a/website/versioned_docs/version-0.81/accessibilityinfo.md
+++ b/website/versioned_docs/version-0.81/accessibilityinfo.md
@@ -90,16 +90,16 @@ static addEventListener(
 
 Add an event handler. Supported events:
 
-| Event name                                                                           | Description                                                                                                                                                                                                                                                                                              |
-| ------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `accessibilityServiceChanged`<br/><div class="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 class="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 class="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 class="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 class="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 class="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.                                                                                                                          |
+| 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.                                                                                                                          |
 
 ---
 
@@ -126,14 +126,14 @@ Post a string to be announced by the screen reader with modification options. By
 
 **Parameters:**
 
-| Name                                                          | Type   | Description                                                                              |
-| ------------------------------------------------------------- | ------ | ---------------------------------------------------------------------------------------- |
-| announcement <div class="label basic required">Required</div> | string | The string to be announced                                                               |
-| options <div class="label basic required">Required</div>      | object | `queue` - queue the announcement behind existing speech <div class="label ios">iOS</div> |
+| 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 class="label android">Android</div>
+### `getRecommendedTimeoutMillis()` <div className="label android">Android</div>
 
 ```tsx
 static getRecommendedTimeoutMillis(originalTimeout: number): Promise<number>;
@@ -144,13 +144,13 @@ This value is set in "Time to take action (Accessibility timeout)" of "Accessibi
 
 **Parameters:**
 
-| Name                                                             | Type   | Description                                                                           |
-| ---------------------------------------------------------------- | ------ | ------------------------------------------------------------------------------------- |
-| originalTimeout <div class="label basic required">Required</div> | number | The timeout to return if "Accessibility timeout" is not set. Specify in milliseconds. |
+| 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 class="label android">Android</div>
+### `isAccessibilityServiceEnabled()` <div className="label android">Android</div>
 
 ```tsx
 static isAccessibilityServiceEnabled(): Promise<boolean>;
@@ -162,7 +162,7 @@ Check whether any accessibility service is enabled. This includes TalkBack but a
 
 ---
 
-### `isBoldTextEnabled()` <div class="label ios">iOS</div>
+### `isBoldTextEnabled()` <div className="label ios">iOS</div>
 
 ```tsx
 static isBoldTextEnabled(): Promise<boolean>:
@@ -172,7 +172,7 @@ Query whether a bold text is currently enabled. Returns a promise which resolves
 
 ---
 
-### `isGrayscaleEnabled()` <div class="label ios">iOS</div>
+### `isGrayscaleEnabled()` <div className="label ios">iOS</div>
 
 ```tsx
 static isGrayscaleEnabled(): Promise<boolean>;
@@ -182,7 +182,7 @@ Query whether grayscale is currently enabled. Returns a promise which resolves t
 
 ---
 
-### `isInvertColorsEnabled()` <div class="label ios">iOS</div>
+### `isInvertColorsEnabled()` <div className="label ios">iOS</div>
 
 ```tsx
 static isInvertColorsEnabled(): Promise<boolean>;
@@ -202,7 +202,7 @@ Query whether reduce motion is currently enabled. Returns a promise which resolv
 
 ---
 
-### `isReduceTransparencyEnabled()` <div class="label ios">iOS</div>
+### `isReduceTransparencyEnabled()` <div className="label ios">iOS</div>
 
 ```tsx
 static isReduceTransparencyEnabled(): Promise<boolean>;
@@ -222,7 +222,7 @@ Query whether a screen reader is currently enabled. Returns a promise which reso
 
 ---
 
-### `prefersCrossFadeTransitions()` <div class="label ios">iOS</div>
+### `prefersCrossFadeTransitions()` <div className="label ios">iOS</div>
 
 ```tsx
 static prefersCrossFadeTransitions(): Promise<boolean>;
diff --git a/website/versioned_docs/version-0.81/activityindicator.md b/website/versioned_docs/version-0.81/activityindicator.md
index ca4abe65894..fc8edca4e25 100644
--- a/website/versioned_docs/version-0.81/activityindicator.md
+++ b/website/versioned_docs/version-0.81/activityindicator.md
@@ -62,13 +62,13 @@ Whether to show the indicator (`true`) or hide it (`false`).
 
 The foreground color of the spinner.
 
-| Type            | Default                                                                                                                                                                                     |
-| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [color](colors) | `null` (system accent default color)<div class="label android">Android</div><hr/><ins style={{background: '#999'}} className="color-box" />`'#999999'` <div className="label ios">iOS</div> |
+| Type            | Default                                                                                                                                                                                         |
+| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [color](colors) | `null` (system accent default color)<div className="label android">Android</div><hr/><ins style={{background: '#999'}} className="color-box" />`'#999999'` <div className="label ios">iOS</div> |
 
 ---
 
-### `hidesWhenStopped` <div class="label ios">iOS</div>
+### `hidesWhenStopped` <div className="label ios">iOS</div>
 
 Whether the indicator should hide when not animating.
 
@@ -82,6 +82,6 @@ Whether the indicator should hide when not animating.
 
 Size of the indicator.
 
-| Type                                                                           | Default   |
-| ------------------------------------------------------------------------------ | --------- |
-| enum(`'small'`, `'large'`)<hr/>number <div class="label android">Android</div> | `'small'` |
+| Type                                                                               | Default   |
+| ---------------------------------------------------------------------------------- | --------- |
+| enum(`'small'`, `'large'`)<hr/>number <div className="label android">Android</div> | `'small'` |
diff --git a/website/versioned_docs/version-0.81/alert.md b/website/versioned_docs/version-0.81/alert.md
index f9e104de16b..c80b62fb7a6 100644
--- a/website/versioned_docs/version-0.81/alert.md
+++ b/website/versioned_docs/version-0.81/alert.md
@@ -78,7 +78,7 @@ Alerts on Android can be dismissed by tapping outside of the alert box. It is di
 
 The cancel event can be handled by providing an `onDismiss` callback property inside the `options` parameter.
 
-### Example <div class="label android">Android</div>
+### Example <div className="label android">Android</div>
 
 ```SnackPlayer name=Alert%20Android%20Dissmissable%20Example&supportedPlatforms=android
 import React from 'react';
@@ -143,16 +143,16 @@ static alert (
 
 **Parameters:**
 
-| Name                                                   | Type                               | Description                                                             |
-| ------------------------------------------------------ | ---------------------------------- | ----------------------------------------------------------------------- |
-| title <div class="label basic required">Required</div> | string                             | The dialog's title. Passing `null` or empty string will hide the title. |
-| message                                                | string                             | An optional message that appears below the dialog's title.              |
-| buttons                                                | [AlertButton](alert#alertbutton)[] | An optional array containing buttons configuration.                     |
-| options                                                | [AlertOptions](alert#alertoptions) | An optional Alert configuration.                                        |
+| Name                                                       | Type                               | Description                                                             |
+| ---------------------------------------------------------- | ---------------------------------- | ----------------------------------------------------------------------- |
+| title <div className="label basic required">Required</div> | string                             | The dialog's title. Passing `null` or empty string will hide the title. |
+| message                                                    | string                             | An optional message that appears below the dialog's title.              |
+| buttons                                                    | [AlertButton](alert#alertbutton)[] | An optional array containing buttons configuration.                     |
+| options                                                    | [AlertOptions](alert#alertoptions) | An optional Alert configuration.                                        |
 
 ---
 
-### `prompt()` <div class="label ios">iOS</div>
+### `prompt()` <div className="label ios">iOS</div>
 
 ```tsx
 static prompt: (
@@ -169,21 +169,21 @@ Create and display a prompt to enter some text in form of Alert.
 
 **Parameters:**
 
-| Name                                                   | Type                                            | Description                                                                                                                                                                                           |
-| ------------------------------------------------------ | ----------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| title <div class="label basic required">Required</div> | string                                          | The dialog's title.                                                                                                                                                                                   |
-| message                                                | string                                          | An optional message that appears above the text input.                                                                                                                                                |
-| callbackOrButtons                                      | function<hr/>[AlertButton](alert#alertButton)[] | If passed a function, it will be called with the prompt's value<br/>`(text: string) => void`, when the user taps 'OK'.<hr/>If passed an array, buttons will be configured based on the array content. |
-| type                                                   | [AlertType](alert#alerttype-ios)                | This configures the text input.                                                                                                                                                                       |
-| defaultValue                                           | string                                          | The default text in text input.                                                                                                                                                                       |
-| keyboardType                                           | string                                          | The keyboard type of first text field (if exists). One of TextInput [keyboardTypes](textinput#keyboardtype).                                                                                          |
-| options                                                | [AlertOptions](alert#alertoptions)              | An optional Alert configuration.                                                                                                                                                                      |
+| Name                                                       | Type                                            | Description                                                                                                                                                                                           |
+| ---------------------------------------------------------- | ----------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| title <div className="label basic required">Required</div> | string                                          | The dialog's title.                                                                                                                                                                                   |
+| message                                                    | string                                          | An optional message that appears above the text input.                                                                                                                                                |
+| callbackOrButtons                                          | function<hr/>[AlertButton](alert#alertButton)[] | If passed a function, it will be called with the prompt's value<br/>`(text: string) => void`, when the user taps 'OK'.<hr/>If passed an array, buttons will be configured based on the array content. |
+| type                                                       | [AlertType](alert#alerttype-ios)                | This configures the text input.                                                                                                                                                                       |
+| defaultValue                                               | string                                          | The default text in text input.                                                                                                                                                                       |
+| keyboardType                                               | string                                          | The keyboard type of first text field (if exists). One of TextInput [keyboardTypes](textinput#keyboardtype).                                                                                          |
+| options                                                    | [AlertOptions](alert#alertoptions)              | An optional Alert configuration.                                                                                                                                                                      |
 
 ---
 
 ## Type Definitions
 
-### AlertButtonStyle <div class="label ios">iOS</div>
+### AlertButtonStyle <div className="label ios">iOS</div>
 
 An iOS Alert button style.
 
@@ -201,7 +201,7 @@ An iOS Alert button style.
 
 ---
 
-### AlertType <div class="label ios">iOS</div>
+### AlertType <div className="label ios">iOS</div>
 
 An iOS Alert type.
 
@@ -230,12 +230,12 @@ An object describing the configuration of a button in the alert.
 
 **Objects properties:**
 
-| Name                                         | Type                                           | Description                                                                    |
-| -------------------------------------------- | ---------------------------------------------- | ------------------------------------------------------------------------------ |
-| text                                         | string                                         | Button label.                                                                  |
-| onPress                                      | function                                       | Callback function when button is pressed.                                      |
-| style <div class="label ios">iOS</div>       | [AlertButtonStyle](alert#alertbuttonstyle-ios) | Button style, on Android this property will be ignored.                        |
-| isPreferred <div class="label ios">iOS</div> | boolean                                        | Whether button should be emphasized, on Android this property will be ignored. |
+| Name                                             | Type                                           | Description                                                                    |
+| ------------------------------------------------ | ---------------------------------------------- | ------------------------------------------------------------------------------ |
+| text                                             | string                                         | Button label.                                                                  |
+| onPress                                          | function                                       | Callback function when button is pressed.                                      |
+| style <div className="label ios">iOS</div>       | [AlertButtonStyle](alert#alertbuttonstyle-ios) | Button style, on Android this property will be ignored.                        |
+| isPreferred <div className="label ios">iOS</div> | boolean                                        | Whether button should be emphasized, on Android this property will be ignored. |
 
 ---
 
@@ -247,8 +247,8 @@ An object describing the configuration of a button in the alert.
 
 **Properties:**
 
-| Name                                                | Type     | Description                                                                                                               |
-| --------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------- |
-| cancelable <div class="label android">Android</div> | boolean  | Defines if alert can be dismissed by tapping outside of the alert box.                                                    |
-| userInterfaceStyle <div class="label ios">iOS</div> | string   | The interface style used for the alert, can be set to `light` or `dark`, otherwise the default system style will be used. |
-| onDismiss <div class="label android">Android</div>  | function | Callback function fired when alert has been dismissed.                                                                    |
+| Name                                                    | Type     | Description                                                                                                               |
+| ------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------- |
+| cancelable <div className="label android">Android</div> | boolean  | Defines if alert can be dismissed by tapping outside of the alert box.                                                    |
+| userInterfaceStyle <div className="label ios">iOS</div> | string   | The interface style used for the alert, can be set to `light` or `dark`, otherwise the default system style will be used. |
+| onDismiss <div className="label android">Android</div>  | function | Callback function fired when alert has been dismissed.                                                                    |
diff --git a/website/versioned_docs/version-0.81/animated.md b/website/versioned_docs/version-0.81/animated.md
index dacbb306d79..e20ad3ee247 100644
--- a/website/versioned_docs/version-0.81/animated.md
+++ b/website/versioned_docs/version-0.81/animated.md
@@ -13,8 +13,8 @@ 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 from 'react';
+```SnackPlayer name=Animated%20Example
+import React, {useRef} from 'react';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 import {
   Animated,
@@ -22,12 +22,11 @@ import {
   View,
   StyleSheet,
   Button,
-  useAnimatedValue,
 } from 'react-native';
 
 const App = () => {
   // fadeAnim will be used as the value for opacity. Initial Value: 0
-  const fadeAnim = useAnimatedValue(0);
+  const fadeAnim = useRef(new Animated.Value(0)).current;
 
   const fadeIn = () => {
     // Will change fadeAnim value to 1 in 5 seconds
diff --git a/website/versioned_docs/version-0.81/animations.md b/website/versioned_docs/version-0.81/animations.md
index d07e9c7bf8f..f4438b7a0a8 100644
--- a/website/versioned_docs/version-0.81/animations.md
+++ b/website/versioned_docs/version-0.81/animations.md
@@ -20,12 +20,12 @@ For example, a container view that fades in when it is mounted may look like thi
 <Tabs groupId="language" queryString defaultValue={constants.defaultSnackLanguage} values={constants.snackLanguages}>
 <TabItem value="javascript">
 
-```SnackPlayer ext=js&supportedPlatforms=ios,android
-import React, {useEffect} from 'react';
-import {Animated, Text, View, useAnimatedValue} from 'react-native';
+```SnackPlayer ext=js
+import React, {useEffect, useRef} from 'react';
+import {Animated, Text, View} from 'react-native';
 
 const FadeInView = props => {
-  const fadeAnim = useAnimatedValue(0); // Initial value for opacity: 0
+  const fadeAnim = useRef(new Animated.Value(0)).current; // Initial value for opacity: 0
 
   useEffect(() => {
     Animated.timing(fadeAnim, {
@@ -74,15 +74,13 @@ export default () => {
 <TabItem value="typescript">
 
 ```SnackPlayer ext=tsx
-import React, {useEffect} from 'react';
-import {Animated, Text, View, useAnimatedValue} from 'react-native';
-import type {PropsWithChildren} from 'react';
-import type {ViewStyle} from 'react-native';
+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 = useAnimatedValue(0); // Initial value for opacity: 0
+  const fadeAnim = useRef(new Animated.Value(0)).current; // Initial value for opacity: 0
 
   useEffect(() => {
     Animated.timing(fadeAnim, {
@@ -594,8 +592,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 from 'react';
+```SnackPlayer name=LayoutAnimations
+import React, {useState} from 'react';
 import {
   NativeModules,
   LayoutAnimation,
@@ -610,32 +608,30 @@ const {UIManager} = NativeModules;
 UIManager.setLayoutAnimationEnabledExperimental &&
   UIManager.setLayoutAnimationEnabledExperimental(true);
 
-export default class App extends React.Component {
-  state = {
+export default function App() {
+  const [state, setState] = useState({
     w: 100,
     h: 100,
-  };
+  });
 
-  _onPress = () => {
+  const onPress = () => {
     // Animate the update
     LayoutAnimation.spring();
-    this.setState({w: this.state.w + 15, h: this.state.h + 15});
+    setState({w: state.w + 15, h: state.h + 15});
   };
 
-  render() {
-    return (
-      <View style={styles.container}>
-        <View
-          style={[styles.box, {width: this.state.w, height: this.state.h}]}
-        />
-        <TouchableOpacity onPress={this._onPress}>
-          <View style={styles.button}>
-            <Text style={styles.buttonText}>Press me!</Text>
-          </View>
-        </TouchableOpacity>
-      </View>
-    );
-  }
+  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({
diff --git a/website/versioned_docs/version-0.81/appstate.md b/website/versioned_docs/version-0.81/appstate.md
index 594ff232ac3..f88c7e61c96 100644
--- a/website/versioned_docs/version-0.81/appstate.md
+++ b/website/versioned_docs/version-0.81/appstate.md
@@ -86,11 +86,11 @@ This event is received when the app state has changed. The listener is called wi
 
 This event is used in the need of throwing memory warning or releasing it.
 
-### `focus` <div class="label android">Android</div>
+### `focus` <div className="label android">Android</div>
 
 Received when the app gains focus (the user is interacting with the app).
 
-### `blur` <div class="label android">Android</div>
+### `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.
 
diff --git a/website/versioned_docs/version-0.81/building-for-tv.md b/website/versioned_docs/version-0.81/building-for-tv.md
index 2428dc6b712..71ed7a11f5b 100644
--- a/website/versioned_docs/version-0.81/building-for-tv.md
+++ b/website/versioned_docs/version-0.81/building-for-tv.md
@@ -6,4 +6,6 @@ hide_table_of_contents: true
 
 TV devices support has been implemented with the intention of making existing React Native applications work on Apple TV and Android TV, with few or no changes needed in the JavaScript code for the applications.
 
-> **Deprecated.** TV support has moved to the [React Native for TV](https://github.com/react-native-tvos/react-native-tvos#readme) repository. Please see the _README_ there for information on projects for Apple TV or Android TV.
+:::warning Deprecated
+TV support has moved to the [React Native for TV](https://github.com/react-native-tvos/react-native-tvos#readme) repository. Please see the **README** there for information on projects for Apple TV or Android TV.
+:::
diff --git a/website/versioned_docs/version-0.81/button.md b/website/versioned_docs/version-0.81/button.md
index bccb65000c3..cfed6819d28 100644
--- a/website/versioned_docs/version-0.81/button.md
+++ b/website/versioned_docs/version-0.81/button.md
@@ -112,7 +112,7 @@ export default App;
 
 ## Props
 
-### <div class="label required basic">Required</div>**`onPress`**
+### <div className="label required basic">Required</div>**`onPress`**
 
 Handler to be called when the user taps the button.
 
@@ -122,7 +122,7 @@ Handler to be called when the user taps the button.
 
 ---
 
-### <div class="label required basic">Required</div>**`title`**
+### <div className="label required basic">Required</div>**`title`**
 
 Text to display inside the button. On Android the given title will be converted to the uppercased form.
 
@@ -142,7 +142,7 @@ Text to display for blindness accessibility features.
 
 ---
 
-### `accessibilityLanguage` <div class="label ios">iOS</div>
+### `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).
 
@@ -212,7 +212,7 @@ If `true`, disable all interactions for this component.
 
 ---
 
-### `hasTVPreferredFocus` <div class="label tv">TV</div>
+### `hasTVPreferredFocus` <div className="label tv">TV</div>
 
 TV preferred focus.
 
@@ -222,7 +222,7 @@ TV preferred focus.
 
 ---
 
-### `nextFocusDown` <div class="label android">Android</div><div class="label tv">TV</div>
+### `nextFocusDown` <div className="label android">Android</div><div className="label tv">TV</div>
 
 Designates the next view to receive focus when the user navigates down. See the [Android documentation](https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusDown).
 
@@ -232,7 +232,7 @@ Designates the next view to receive focus when the user navigates down. See the
 
 ---
 
-### `nextFocusForward` <div class="label android">Android</div><div class="label tv">TV</div>
+### `nextFocusForward` <div className="label android">Android</div><div className="label tv">TV</div>
 
 Designates the next view to receive focus when the user navigates forward. See the [Android documentation](https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusForward).
 
@@ -242,7 +242,7 @@ Designates the next view to receive focus when the user navigates forward. See t
 
 ---
 
-### `nextFocusLeft` <div class="label android">Android</div><div class="label tv">TV</div>
+### `nextFocusLeft` <div className="label android">Android</div><div className="label tv">TV</div>
 
 Designates the next view to receive focus when the user navigates left. See the [Android documentation](https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusLeft).
 
@@ -252,7 +252,7 @@ Designates the next view to receive focus when the user navigates left. See the
 
 ---
 
-### `nextFocusRight` <div class="label android">Android</div><div class="label tv">TV</div>
+### `nextFocusRight` <div className="label android">Android</div><div className="label tv">TV</div>
 
 Designates the next view to receive focus when the user navigates right. See the [Android documentation](https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusRight).
 
@@ -262,7 +262,7 @@ Designates the next view to receive focus when the user navigates right. See the
 
 ---
 
-### `nextFocusUp` <div class="label android">Android</div><div class="label tv">TV</div>
+### `nextFocusUp` <div className="label android">Android</div><div className="label tv">TV</div>
 
 Designates the next view to receive focus when the user navigates up. See the [Android documentation](https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusUp).
 
@@ -282,7 +282,7 @@ Used to locate this view in end-to-end tests.
 
 ---
 
-### `touchSoundDisabled` <div class="label android">Android</div>
+### `touchSoundDisabled` <div className="label android">Android</div>
 
 If `true`, doesn't play system sound on touch.
 
diff --git a/website/versioned_docs/version-0.81/colors.md b/website/versioned_docs/version-0.81/colors.md
index 3da23478851..7f9bfa5f505 100644
--- a/website/versioned_docs/version-0.81/colors.md
+++ b/website/versioned_docs/version-0.81/colors.md
@@ -74,8 +74,6 @@ This is a shortcut for `rgba(0,0,0,0)`, same like in [CSS3](https://www.w3.org/T
 
 Named colors implementation follows the [CSS3/SVG specification](https://www.w3.org/TR/css-color-3/#svg-color):
 
-<!-- alex ignore black white -->
-
 - <ins style={{background: '#f0f8ff'}} className="color-box" /> aliceblue (<code>#f0f8ff</code>)
 - <ins style={{background: '#faebd7'}} className="color-box" /> antiquewhite (<code>#faebd7</code>)
 - <ins style={{background: '#00ffff'}} className="color-box" /> aqua (<code>#00ffff</code>)
diff --git a/website/versioned_docs/version-0.81/communication-android.md b/website/versioned_docs/version-0.81/communication-android.md
index e7108577837..f78dc84cf65 100644
--- a/website/versioned_docs/version-0.81/communication-android.md
+++ b/website/versioned_docs/version-0.81/communication-android.md
@@ -114,7 +114,9 @@ It is fine to update properties anytime. However, updates have to be performed o
 
 There is no way to update only a few properties at a time. We suggest that you build it into your own wrapper instead.
 
-> **_Note:_** Currently, JS function `componentWillUpdateProps` of the top level RN component will not be called after a prop update. However, you can access the new props in `componentDidMount` function.
+:::info
+Currently, JS function `componentWillUpdateProps` of the top level RN component will not be called after a prop update. However, you can access the new props in `componentDidMount` function.
+:::
 
 ### Passing properties from React Native to native
 
@@ -146,4 +148,6 @@ Events are powerful, because they allow us to change React Native components wit
 
 Native modules are Java/Kotlin classes that are available in JS. Typically one instance of each module is created per JS bridge. They can export arbitrary functions and constants to React Native. They have been covered in detail in [this article](legacy/native-modules-android).
 
-> **_Warning_**: All native modules share the same namespace. Watch out for name collisions when creating new ones.
+:::warning
+All native modules share the same namespace. Watch out for name collisions when creating new ones.
+:::
diff --git a/website/versioned_docs/version-0.81/easing.md b/website/versioned_docs/version-0.81/easing.md
index 712595b4bac..bb31dd0e4fa 100644
--- a/website/versioned_docs/version-0.81/easing.md
+++ b/website/versioned_docs/version-0.81/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 from 'react';
+```SnackPlayer name=Easing%20Demo&ext=js
+import React, {useRef} from 'react';
 import {
   Animated,
   Easing,
@@ -59,12 +59,11 @@ import {
   Text,
   TouchableOpacity,
   View,
-  useAnimatedValue,
 } from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
 const App = () => {
-  const opacity = useAnimatedValue(0);
+  const opacity = useRef(new Animated.Value(0)).current;
 
   const animate = easing => {
     opacity.setValue(0);
@@ -210,7 +209,7 @@ export default App;
 <TabItem value="typescript">
 
 ```SnackPlayer name=Easing%20Demo&ext=tsx
-import React from 'react';
+import React, {useRef} from 'react';
 import {
   Animated,
   Easing,
@@ -220,13 +219,12 @@ import {
   Text,
   TouchableOpacity,
   View,
-  useAnimatedValue,
   type EasingFunction,
 } from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
 const App = () => {
-  const opacity = useAnimatedValue(0);
+  const opacity = useRef(new Animated.Value(0)).current;
 
   const animate = (easing: EasingFunction) => {
     opacity.setValue(0);
diff --git a/website/versioned_docs/version-0.81/fabric-native-components-ios.md b/website/versioned_docs/version-0.81/fabric-native-components-ios.md
index 3503f24c03e..4c4865a0d93 100644
--- a/website/versioned_docs/version-0.81/fabric-native-components-ios.md
+++ b/website/versioned_docs/version-0.81/fabric-native-components-ios.md
@@ -38,19 +38,19 @@ cd ios
 open Demo.xcworkspace
 ```
 
-<img class="half-size" alt="Open Xcode Workspace" src="/docs/assets/fabric-native-components/1.webp" />
+<img className="half-size" alt="Open Xcode Workspace" src="/docs/assets/fabric-native-components/1.webp" />
 
 2. Right click on app and select <code>New Group</code>, call the new group `WebView`.
 
-<img class="half-size" alt="Right click on app and select New Group" src="/docs/assets/fabric-native-components/2.webp" />
+<img className="half-size" alt="Right click on app and select New Group" src="/docs/assets/fabric-native-components/2.webp" />
 
 3. In the `WebView` group, create <code>New</code>→<code>File from Template</code>.
 
-<img class="half-size" alt="Create a new file using the Cocoa Touch Classs template" src="/docs/assets/fabric-native-components/3.webp" />
+<img className="half-size" alt="Create a new file using the Cocoa Touch Class template" src="/docs/assets/fabric-native-components/3.webp" />
 
 4. Use the <code>Objective-C File</code> template, and name it <code>RCTWebView</code>.
 
-<img class="half-size" alt="Create an Objective-C RCTWebView class" src="/docs/assets/fabric-native-components/4.webp" />
+<img className="half-size" alt="Create an Objective-C RCTWebView class" src="/docs/assets/fabric-native-components/4.webp" />
 
 5. Repeat step 4 and create a header file named `RCTWebView.h`.
 
@@ -213,10 +213,10 @@ To link the WebKit framework in your app, follow these steps:
 3. Select the General tab
 4. Scroll down until you find the _"Frameworks, Libraries, and Embedded Contents"_ section, and press the `+` button
 
-<img class="half-size" alt="Add webkit framework to your app 1" src="/docs/assets/AddWebKitFramework1.png" />
+<img className="half-size" alt="Add webkit framework to your app 1" src="/docs/assets/AddWebKitFramework1.png" />
 
 5. In the search bar, filter for WebKit
 6. Select the WebKit framework
 7. Click on Add.
 
-<img class="half-size" alt="Add webkit framework to your app 2" src="/docs/assets/AddWebKitFramework2.png" />
+<img className="half-size" alt="Add webkit framework to your app 2" src="/docs/assets/AddWebKitFramework2.png" />
diff --git a/website/versioned_docs/version-0.81/flatlist.md b/website/versioned_docs/version-0.81/flatlist.md
index fe86e1af557..6c299ca26bb 100644
--- a/website/versioned_docs/version-0.81/flatlist.md
+++ b/website/versioned_docs/version-0.81/flatlist.md
@@ -356,7 +356,7 @@ Inherits [VirtualizedList Props](virtualizedlist.md#props).
 
 ---
 
-### <div class="label required basic">Required</div> **`renderItem`**
+### <div className="label required basic">Required</div> **`renderItem`**
 
 ```tsx
 renderItem({
@@ -416,7 +416,7 @@ Example usage:
 
 ---
 
-### <div class="label required basic">Required</div> **`data`**
+### <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.
 
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 b89b8a991a2..efa0dc725e1 100644
--- a/website/versioned_docs/version-0.81/image-style-props.md
+++ b/website/versioned_docs/version-0.81/image-style-props.md
@@ -312,7 +312,7 @@ Set an opacity value for the image. The number should be in the range from `0.0`
 
 ---
 
-### `overlayColor` <div class="label android">Android</div>
+### `overlayColor` <div className="label android">Android</div>
 
 When the image has rounded corners, specifying an overlayColor will cause the remaining space in the corners to be filled with a solid color. This is useful in cases which are not supported by the Android implementation of rounded corners:
 
diff --git a/website/versioned_docs/version-0.81/image.md b/website/versioned_docs/version-0.81/image.md
index 2fcca18ad38..a3f6fb86bf7 100644
--- a/website/versioned_docs/version-0.81/image.md
+++ b/website/versioned_docs/version-0.81/image.md
@@ -167,7 +167,7 @@ blurRadius: the blur radius of the blur filter added to the image.
 
 ---
 
-### `capInsets` <div class="label ios">iOS</div>
+### `capInsets` <div className="label ios">iOS</div>
 
 When the image is resized, the corners of the size specified by `capInsets` will stay a fixed size, but the center content and borders of the image will be stretched. This is useful for creating resizable rounded buttons, shadows, and other resizable assets. More info in the [official Apple documentation](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIImage_Class/index.html#//apple_ref/occ/instm/UIImage/resizableImageWithCapInsets).
 
@@ -202,7 +202,7 @@ A static image to display while loading the image source.
 
 ---
 
-### `fadeDuration` <div class="label android">Android</div>
+### `fadeDuration` <div className="label android">Android</div>
 
 Fade animation duration in milliseconds.
 
@@ -286,7 +286,7 @@ Invoked on load start.
 
 ---
 
-### `onPartialLoad` <div class="label ios">iOS</div>
+### `onPartialLoad` <div className="label ios">iOS</div>
 
 Invoked when a partial load of the image is complete. The definition of what constitutes a "partial load" is loader specific though this is meant for progressive JPEG loads.
 
@@ -306,7 +306,7 @@ Invoked on download progress.
 
 ---
 
-### `progressiveRenderingEnabled` <div class="label android">Android</div>
+### `progressiveRenderingEnabled` <div className="label android">Android</div>
 
 When `true`, enables progressive jpeg streaming - https://frescolib.org/docs/progressive-jpegs.
 
@@ -326,7 +326,7 @@ A string indicating which referrer to use when fetching the resource. Sets the v
 
 ---
 
-### `resizeMethod` <div class="label android">Android</div>
+### `resizeMethod` <div className="label android">Android</div>
 
 The mechanism that should be used to resize the image when the image's dimensions differ from the image view's dimensions. Defaults to `auto`.
 
@@ -368,7 +368,7 @@ Determines how to resize the image when the frame doesn't match the raw image di
 
 ---
 
-### `resizeMultiplier` <div class="label android">Android</div>
+### `resizeMultiplier` <div className="label android">Android</div>
 
 When the `resizeMethod` is set to `resize`, the destination dimensions are multiplied by this value. The `scale` method is used to perform the remainder of the resize. A default of `1.0` means the bitmap size is designed to fit the destination dimensions. A multiplier greater than `1.0` will set the resize options larger than that of the destination dimensions, and the resulting bitmap will be scaled down from the hardware size. Defaults to `1.0`.
 
@@ -464,7 +464,7 @@ Width of the image component.
 
 ## Methods
 
-### `abortPrefetch()` <div class="label android">Android</div>
+### `abortPrefetch()` <div className="label android">Android</div>
 
 ```tsx
 static abortPrefetch(requestId: number);
@@ -474,9 +474,9 @@ Abort prefetch request.
 
 **Parameters:**
 
-| Name                                                       | Type   | Description                             |
-| ---------------------------------------------------------- | ------ | --------------------------------------- |
-| requestId <div class="label basic required">Required</div> | number | Request id as returned by `prefetch()`. |
+| Name                                                           | Type   | Description                             |
+| -------------------------------------------------------------- | ------ | --------------------------------------- |
+| requestId <div className="label basic required">Required</div> | number | Request id as returned by `prefetch()`. |
 
 ---
 
@@ -492,9 +492,9 @@ In order to retrieve the image dimensions, the image may first need to be loaded
 
 **Parameters:**
 
-| <div className="wideColumn">Name</div>               | Type   | Description                |
-| ---------------------------------------------------- | ------ | -------------------------- |
-| uri <div class="label basic required">Required</div> | string | The location of the image. |
+| <div className="wideColumn">Name</div>                   | Type   | Description                |
+| -------------------------------------------------------- | ------ | -------------------------- |
+| uri <div className="label basic required">Required</div> | string | The location of the image. |
 
 ---
 
@@ -513,10 +513,10 @@ In order to retrieve the image dimensions, the image may first need to be loaded
 
 **Parameters:**
 
-| <div className="wideColumn">Name</div>                   | Type   | Description                  |
-| -------------------------------------------------------- | ------ | ---------------------------- |
-| uri <div class="label basic required">Required</div>     | string | The location of the image.   |
-| headers <div class="label basic required">Required</div> | object | The headers for the request. |
+| <div className="wideColumn">Name</div>                       | Type   | Description                  |
+| ------------------------------------------------------------ | ------ | ---------------------------- |
+| uri <div className="label basic required">Required</div>     | string | The location of the image.   |
+| headers <div className="label basic required">Required</div> | object | The headers for the request. |
 
 ---
 
@@ -530,10 +530,10 @@ Prefetches a remote image for later use by downloading it to the disk cache. Ret
 
 **Parameters:**
 
-| Name                                                 | Type                                              | Description                                            |
-| ---------------------------------------------------- | ------------------------------------------------- | ------------------------------------------------------ |
-| url <div class="label basic required">Required</div> | string                                            | The remote location of the image.                      |
-| callback                                             | function <div class="label android">Android</div> | The function that will be called with the `requestId`. |
+| Name                                                     | Type                                                  | Description                                            |
+| -------------------------------------------------------- | ----------------------------------------------------- | ------------------------------------------------------ |
+| url <div className="label basic required">Required</div> | string                                                | The remote location of the image.                      |
+| callback                                                 | function <div className="label android">Android</div> | The function that will be called with the `requestId`. |
 
 ---
 
@@ -549,9 +549,9 @@ Perform cache interrogation. Returns a promise which resolves to a mapping from
 
 **Parameters:**
 
-| Name                                                  | Type  | Description                                |
-| ----------------------------------------------------- | ----- | ------------------------------------------ |
-| urls <div class="label basic required">Required</div> | array | List of image URLs to check the cache for. |
+| Name                                                      | Type  | Description                                |
+| --------------------------------------------------------- | ----- | ------------------------------------------ |
+| urls <div className="label basic required">Required</div> | array | List of image URLs to check the cache for. |
 
 ---
 
@@ -570,13 +570,13 @@ Resolves an asset reference into an object which has the properties `uri`, `scal
 
 **Parameters:**
 
-| <div className="wideColumn">Name</div>                  | Type                                     | Description                                                                  |
-| ------------------------------------------------------- | ---------------------------------------- | ---------------------------------------------------------------------------- |
-| source <div class="label basic required">Required</div> | [ImageSource](image#imagesource), number | A number (opaque type returned by `require('./foo.png')`) or an ImageSource. |
+| <div className="wideColumn">Name</div>                      | Type                                     | Description                                                                  |
+| ----------------------------------------------------------- | ---------------------------------------- | ---------------------------------------------------------------------------- |
+| source <div className="label basic required">Required</div> | [ImageSource](image#imagesource), number | A number (opaque type returned by `require('./foo.png')`) or an ImageSource. |
 
 ## Type Definitions
 
-### ImageCacheEnum <div class="label ios">iOS</div>
+### ImageCacheEnum <div className="label ios">iOS</div>
 
 Enum which can be used to set the cache handling or strategy for the potentially cached responses.
 
@@ -621,17 +621,17 @@ Object returned in the `onLoad` callback.
 
 **Properties (if passing as object or array of objects):**
 
-| <div className="wideColumn">Name</div> | Type                                       | Description                                                                                                                                                                          |
-| -------------------------------------- | ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| uri                                    | string                                     | A string representing the resource identifier for the image, which could be an http address, a local file path, or the name of a static image resource.                              |
-| width                                  | number                                     | Can be specified if known at build time, in which case the value will be used to set the default `<Image/>` component dimension.                                                     |
-| height                                 | number                                     | Can be specified if known at build time, in which case the value will be used to set the default `<Image/>` component dimension.                                                     |
-| scale                                  | number                                     | Used to indicate the scale factor of the image. Defaults to `1.0` if unspecified, meaning that one image pixel equates to one display point / DIP.                                   |
-| bundle<div class="label ios">iOS</div> | string                                     | The iOS asset bundle which the image is included in. This will default to `[NSBundle mainBundle]` if not set.                                                                        |
-| method                                 | string                                     | The HTTP Method to use. Defaults to `'GET'` if not specified.                                                                                                                        |
-| headers                                | object                                     | An object representing the HTTP headers to send along with the request for a remote image.                                                                                           |
-| body                                   | string                                     | The HTTP body to send with the request. This must be a valid UTF-8 string, and will be sent exactly as specified, with no additional encoding (e.g. URL-escaping or base64) applied. |
-| cache<div class="label ios">iOS</div>  | [ImageCacheEnum](image#imagecacheenum-ios) | Determines how the requests handles potentially cached responses.                                                                                                                    |
+| <div className="wideColumn">Name</div>     | Type                                       | Description                                                                                                                                                                          |
+| ------------------------------------------ | ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| uri                                        | string                                     | A string representing the resource identifier for the image, which could be an http address, a local file path, or the name of a static image resource.                              |
+| width                                      | number                                     | Can be specified if known at build time, in which case the value will be used to set the default `<Image/>` component dimension.                                                     |
+| height                                     | number                                     | Can be specified if known at build time, in which case the value will be used to set the default `<Image/>` component dimension.                                                     |
+| scale                                      | number                                     | Used to indicate the scale factor of the image. Defaults to `1.0` if unspecified, meaning that one image pixel equates to one display point / DIP.                                   |
+| bundle<div className="label ios">iOS</div> | string                                     | The iOS asset bundle which the image is included in. This will default to `[NSBundle mainBundle]` if not set.                                                                        |
+| method                                     | string                                     | The HTTP Method to use. Defaults to `'GET'` if not specified.                                                                                                                        |
+| headers                                    | object                                     | An object representing the HTTP headers to send along with the request for a remote image.                                                                                           |
+| body                                       | string                                     | The HTTP body to send with the request. This must be a valid UTF-8 string, and will be sent exactly as specified, with no additional encoding (e.g. URL-escaping or base64) applied. |
+| cache<div className="label ios">iOS</div>  | [ImageCacheEnum](image#imagecacheenum-ios) | Determines how the requests handles potentially cached responses.                                                                                                                    |
 
 **If passing a number:**
 
diff --git a/website/versioned_docs/version-0.81/integration-with-android-fragment.md b/website/versioned_docs/version-0.81/integration-with-android-fragment.md
index ea086300342..39a3d918f66 100644
--- a/website/versioned_docs/version-0.81/integration-with-android-fragment.md
+++ b/website/versioned_docs/version-0.81/integration-with-android-fragment.md
@@ -33,7 +33,9 @@ This is required by React Native to handle the back button press event.
 
 Go into your host activity and make sure it implements the `DefaultHardwareBackBtnHandler` interface:
 
-> **Deprecated.** `Activity.onBackPressed()` has been [deprecated](<https://developer.android.com/reference/android/app/Activity#onBackPressed()>) since API level 33. Android 16 devices with apps targeting API level 36 this will [no longer be called](https://developer.android.com/about/versions/16/behavior-changes-16#predictive-back) and [OnBackPressedDispatcher](https://developer.android.com/reference/androidx/activity/OnBackPressedDispatcher) should be used instead.
+:::warning Deprecated
+`Activity.onBackPressed()` has been [deprecated](<https://developer.android.com/reference/android/app/Activity#onBackPressed()>) since API level 33. Android 16 devices with apps targeting API level 36 this will [no longer be called](https://developer.android.com/about/versions/16/behavior-changes-16#predictive-back) and [OnBackPressedDispatcher](https://developer.android.com/reference/androidx/activity/OnBackPressedDispatcher) should be used instead.
+:::
 
 <Tabs groupId="android-language" queryString defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
 <TabItem value="kotlin">
diff --git a/website/versioned_docs/version-0.81/intro-react.md b/website/versioned_docs/version-0.81/intro-react.md
index f30c4c037f1..8eb487be3ec 100644
--- a/website/versioned_docs/version-0.81/intro-react.md
+++ b/website/versioned_docs/version-0.81/intro-react.md
@@ -65,7 +65,9 @@ const Cat = () => {
 export default Cat;
 ```
 
-> This is one of many ways to export your component. This kind of export works well with the Snack Player. However, depending on your app’s file structure, you might need to use a different convention. This [handy cheatsheet on JavaScript imports and exports](https://medium.com/dailyjs/javascript-module-cheatsheet-7bd474f1d829) can help.
+:::tip
+This is one of many ways to export your component. This kind of export works well with the Snack Player. However, depending on your app’s file structure, you might need to use a different convention. This [handy cheatsheet on JavaScript imports and exports](https://medium.com/dailyjs/javascript-module-cheatsheet-7bd474f1d829) can help.
+:::
 
 Now take a closer look at that `return` statement. `<Text>Hello, I am your cat!</Text>` is using a kind of JavaScript syntax that makes writing elements convenient: JSX.
 
@@ -132,7 +134,9 @@ export default Cat;
 
 You can think of curly braces as creating a portal into JS functionality in your JSX!
 
-> Because JSX is included in the React library, it won’t work if you don’t have `import React from 'react'` at the top of your file!
+:::tip
+Because JSX is included in the React library, it won’t work if you don’t have `import React from 'react'` at the top of your file!
+:::
 
 ## Custom Components
 
@@ -169,12 +173,16 @@ export default Cat;
 
 <TabItem value="web">
 
-> If you’re familiar with web development, `<View>` and `<Text>` might remind you of HTML! You can think of them as the `<div>` and `<p>` tags of application development.
+:::info
+If you’re familiar with web development, `<View>` and `<Text>` might remind you of HTML! You can think of them as the `<div>` and `<p>` tags of application development.
+:::
 
 </TabItem>
 <TabItem value="android">
 
-> On Android, you usually put your views inside `LinearLayout`, `FrameLayout`, `RelativeLayout`, etc. to define how the view’s children will be arranged on the screen. In React Native, `View` uses Flexbox for its children’s layout. You can learn more in [our guide to layout with Flexbox](flexbox).
+:::info
+On Android, you usually put your views inside `LinearLayout`, `FrameLayout`, `RelativeLayout`, etc. to define how the view’s children will be arranged on the screen. In React Native, `View` uses Flexbox for its children’s layout. You can learn more in [our guide to layout with Flexbox](flexbox).
+:::
 
 </TabItem>
 </Tabs>
@@ -303,7 +311,9 @@ export default CatApp;
 
 `Image` has [many different props](image#props), including [`style`](image#style), which accepts a JS object of design and layout related property-value pairs.
 
-> Notice the double curly braces `{{ }}` surrounding `style`‘s width and height. In JSX, JavaScript values are referenced with `{}`. This is handy if you are passing something other than a string as props, like an array or number: `<Cat food={["fish", "kibble"]} age={2} />`. However, JS objects are **_also_** denoted with curly braces: `{width: 200, height: 200}`. Therefore, to pass a JS object in JSX, you must wrap the object in **another pair** of curly braces: `{{width: 200, height: 200}}`
+:::note
+Notice the double curly braces `{{ }}` surrounding `style`‘s width and height. In JSX, JavaScript values are referenced with `{}`. This is handy if you are passing something other than a string as props, like an array or number: `<Cat food={["fish", "kibble"]} age={2} />`. However, JS objects are **_also_** denoted with curly braces: `{width: 200, height: 200}`. Therefore, to pass a JS object in JSX, you must wrap the object in **another pair** of curly braces: `{{width: 200, height: 200}}`
+:::
 
 You can build many things with props and the Core Components [`Text`](text), [`Image`](image), and [`View`](view)! But to build something interactive, you’ll need state.
 
@@ -311,7 +321,9 @@ You can build many things with props and the Core Components [`Text`](text), [`I
 
 While you can think of props as arguments you use to configure how components render, **state** is like a component’s personal data storage. State is useful for handling data that changes over time or that comes from user interaction. State gives your components memory!
 
-> As a general rule, use props to configure a component when it renders. Use state to keep track of any component data that you expect to change over time.
+:::info
+As a general rule, use props to configure a component when it renders. Use state to keep track of any component data that you expect to change over time.
+:::
 
 The following example takes place in a cat cafe where two hungry cats are waiting to be fed. Their hunger, which we expect to change over time (unlike their names), is stored as state. To feed the cats, press their buttons—which will update their state.
 
@@ -415,7 +427,9 @@ const Cat = (props: CatProps) => {
 };
 ```
 
-> You can use `useState` to track any kind of data: strings, numbers, Booleans, arrays, objects. For example, you can track the number of times a cat has been petted with `const [timesPetted, setTimesPetted] = useState(0)`!
+:::tip
+You can use `useState` to track any kind of data: strings, numbers, Booleans, arrays, objects. For example, you can track the number of times a cat has been petted with `const [timesPetted, setTimesPetted] = useState(0)`!
+:::
 
 Calling `useState` does two things:
 
@@ -445,7 +459,9 @@ Now, when someone presses the button, `onPress` will fire, calling the `setIsHun
 />
 ```
 
-> You might’ve noticed that although `isHungry` is a [const](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/const), it is seemingly reassignable! What is happening is when a state-setting function like `setIsHungry` is called, its component will re-render. In this case the `Cat` function will run again—and this time, `useState` will give us the next value of `isHungry`.
+:::info
+You might’ve noticed that although `isHungry` is a [const](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/const), it is seemingly reassignable! What is happening is when a state-setting function like `setIsHungry` is called, its component will re-render. In this case the `Cat` function will run again—and this time, `useState` will give us the next value of `isHungry`.
+:::
 
 Finally, put your cats inside a `Cafe` component:
 
@@ -460,7 +476,9 @@ const Cafe = () => {
 };
 ```
 
-> See the `<>` and `</>` above? These bits of JSX are [fragments](https://react.dev/reference/react/Fragment). Adjacent JSX elements must be wrapped in an enclosing tag. Fragments let you do that without nesting an extra, unnecessary wrapping element like `View`.
+:::info
+See the `<>` and `</>` above? These bits of JSX are [fragments](https://react.dev/reference/react/Fragment). Adjacent JSX elements must be wrapped in an enclosing tag. Fragments let you do that without nesting an extra, unnecessary wrapping element like `View`.
+:::
 
 ---
 
diff --git a/website/versioned_docs/version-0.81/introduction.md b/website/versioned_docs/version-0.81/introduction.md
index cd807674a16..ba782cd838c 100644
--- a/website/versioned_docs/version-0.81/introduction.md
+++ b/website/versioned_docs/version-0.81/introduction.md
@@ -21,7 +21,9 @@ You can start here and read through these docs linearly like a book; or you can
 
 To work with React Native, you will need to have an understanding of JavaScript fundamentals. If you’re new to JavaScript or need a refresher, you can [dive in](https://developer.mozilla.org/en-US/docs/Web/JavaScript) or [brush up](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript) at Mozilla Developer Network.
 
-> While we do our best to assume no prior knowledge of React, Android, or iOS development, these are valuable topics of study for the aspiring React Native developer. Where sensible, we have linked to resources and articles that go more in depth.
+:::info
+While we do our best to assume no prior knowledge of React, Android, or iOS development, these are valuable topics of study for the aspiring React Native developer. Where sensible, we have linked to resources and articles that go more in depth.
+:::
 
 ## Interactive examples
 
@@ -49,7 +51,9 @@ export default YourApp;
 
 The above is a Snack Player. It’s a handy tool created by Expo to embed and run React Native projects and share how they render in platforms like Android and iOS. The code is live and editable, so you can play directly with it in your browser. Go ahead and try changing the "Try editing me!" text above to "Hello, world!"
 
-> Optionally, if you want to set up a local development environment, [you can follow our guide to setting up your environment on your local machine](set-up-your-environment) and paste the code examples into your project. (If you are a web developer, you may already have a local environment set up for mobile browser testing!)
+:::tip
+Optionally, if you want to set up a local development environment, [you can follow our guide to setting up your environment on your local machine](set-up-your-environment) and paste the code examples into your project. (If you are a web developer, you may already have a local environment set up for mobile browser testing!)
+:::
 
 ## Developer Notes
 
@@ -59,17 +63,23 @@ People from many different development backgrounds are learning React Native. Yo
 
 <TabItem value="android">
 
-> Android developers may be familiar with this concept.
+:::info
+Android developers may be familiar with this concept.
+:::
 
 </TabItem>
 <TabItem value="ios">
 
-> iOS developers may be familiar with this concept.
+:::info
+iOS developers may be familiar with this concept.
+:::
 
 </TabItem>
 <TabItem value="web">
 
-> Web developers may be familiar with this concept.
+:::info
+Web developers may be familiar with this concept.
+:::
 
 </TabItem>
 </Tabs>
diff --git a/website/versioned_docs/version-0.81/libraries.md b/website/versioned_docs/version-0.81/libraries.md
index 8713df32244..e7565d34631 100644
--- a/website/versioned_docs/version-0.81/libraries.md
+++ b/website/versioned_docs/version-0.81/libraries.md
@@ -16,7 +16,9 @@ React Native libraries are typically installed from the [npm registry](https://w
 
 If you have Node.js installed on your computer then you already have the npm CLI installed. Some developers prefer to use Yarn Classic for slightly faster install times and additional advanced features like Workspaces. Both tools work great with React Native. We will assume npm for the rest of this guide for simplicity of explanation.
 
-> 💡 The terms "library" and "package" are used interchangeably in the JavaScript community.
+:::note
+The terms "library" and "package" are used interchangeably in the JavaScript community.
+:::
 
 ## Installing a Library
 
diff --git a/website/versioned_docs/version-0.81/linking.md b/website/versioned_docs/version-0.81/linking.md
index e5a73d54362..2851237295d 100644
--- a/website/versioned_docs/version-0.81/linking.md
+++ b/website/versioned_docs/version-0.81/linking.md
@@ -652,7 +652,7 @@ The method returns a `Promise` object. If the user confirms the open dialog or t
 
 ---
 
-### `sendIntent()` <div class="label android">Android</div>
+### `sendIntent()` <div className="label android">Android</div>
 
 ```tsx
 static sendIntent(
diff --git a/website/versioned_docs/version-0.81/modal.md b/website/versioned_docs/version-0.81/modal.md
index c47a6863ef5..9c2f677810e 100644
--- a/website/versioned_docs/version-0.81/modal.md
+++ b/website/versioned_docs/version-0.81/modal.md
@@ -136,7 +136,7 @@ The `backdropColor` of the modal (or background color of the modal's container.)
 
 ---
 
-### `hardwareAccelerated` <div class="label android">Android</div>
+### `hardwareAccelerated` <div className="label android">Android</div>
 
 The `hardwareAccelerated` prop controls whether to force hardware acceleration for the underlying window.
 
@@ -146,7 +146,7 @@ The `hardwareAccelerated` prop controls whether to force hardware acceleration f
 
 ---
 
-### `navigationBarTranslucent` <div class="label android">Android</div>
+### `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.
 
@@ -156,7 +156,7 @@ The `navigationBarTranslucent` prop determines whether your modal should go unde
 
 ---
 
-### `onDismiss` <div class="label ios">iOS</div>
+### `onDismiss` <div className="label ios">iOS</div>
 
 The `onDismiss` prop allows passing a function that will be called once the modal has been dismissed.
 
@@ -166,7 +166,7 @@ The `onDismiss` prop allows passing a function that will be called once the moda
 
 ---
 
-### `onOrientationChange` <div class="label ios">iOS</div>
+### `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.
 
@@ -176,7 +176,7 @@ The `onOrientationChange` callback is called when the orientation changes while
 
 ---
 
-### `allowSwipeDismissal` <div class="label ios">iOS</div>
+### `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.
@@ -208,7 +208,7 @@ The `onShow` prop allows passing a function that will be called once the modal h
 
 ---
 
-### `presentationStyle` <div class="label ios">iOS</div>
+### `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.
 
@@ -225,7 +225,7 @@ Possible values:
 
 ---
 
-### `statusBarTranslucent` <div class="label android">Android</div>
+### `statusBarTranslucent` <div className="label android">Android</div>
 
 The `statusBarTranslucent` prop determines whether your modal should go under the system statusbar.
 
@@ -235,7 +235,7 @@ The `statusBarTranslucent` prop determines whether your modal should go under th
 
 ---
 
-### `supportedOrientations` <div class="label ios">iOS</div>
+### `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.
 
diff --git a/website/versioned_docs/version-0.81/network.md b/website/versioned_docs/version-0.81/network.md
index a9fbae15831..160c8e8d56f 100644
--- a/website/versioned_docs/version-0.81/network.md
+++ b/website/versioned_docs/version-0.81/network.md
@@ -181,9 +181,13 @@ 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.
+:::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.
+:::
 
-> 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.
+:::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
 
@@ -207,7 +211,9 @@ 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.
+:::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
 
diff --git a/website/versioned_docs/version-0.81/optimizing-javascript-loading.md b/website/versioned_docs/version-0.81/optimizing-javascript-loading.md
index 934f6680bbc..e12d8631832 100644
--- a/website/versioned_docs/version-0.81/optimizing-javascript-loading.md
+++ b/website/versioned_docs/version-0.81/optimizing-javascript-loading.md
@@ -175,7 +175,7 @@ See the documentation for [`getTransformOptions` in Metro](https://metrobundler.
 
 ## Advanced: Use random access module bundles (non-Hermes)
 
-:::info
+:::tip
 **Not supported when [using Hermes](#use-hermes).** Hermes bytecode is not compatible with the RAM bundle format, and provides the same (or better) performance in all use cases.
 :::
 
diff --git a/website/versioned_docs/version-0.81/platform-specific-code.md b/website/versioned_docs/version-0.81/platform-specific-code.md
index cf9263c2d53..0f688f196d6 100644
--- a/website/versioned_docs/version-0.81/platform-specific-code.md
+++ b/website/versioned_docs/version-0.81/platform-specific-code.md
@@ -72,7 +72,7 @@ const Component = Platform.select({
 <Component />;
 ```
 
-### Detecting the Android version <div class="label android" title="This section is related to Android platform">Android</div>
+### Detecting the Android version <div className="label android" title="This section is related to Android platform">Android</div>
 
 On Android, the `Platform` module can also be used to detect the version of the Android Platform in which the app is running:
 
@@ -86,7 +86,7 @@ if (Platform.Version === 25) {
 
 **Note**: `Version` is set to the Android API version not the Android OS version. To find a mapping please refer to [Android Version History](https://en.wikipedia.org/wiki/Android_version_history#Overview).
 
-### Detecting the iOS version <div class="label ios" title="This section is related to iOS platform">iOS</div>
+### Detecting the iOS version <div className="label ios" title="This section is related to iOS platform">iOS</div>
 
 On iOS, the `Version` is a result of `-[UIDevice systemVersion]`, which is a string with the current version of the operating system. An example of the system version is "10.3". For example, to detect the major version number on iOS:
 
diff --git a/website/versioned_docs/version-0.81/platform.md b/website/versioned_docs/version-0.81/platform.md
index 64382e894fa..af8b2cccb49 100644
--- a/website/versioned_docs/version-0.81/platform.md
+++ b/website/versioned_docs/version-0.81/platform.md
@@ -89,7 +89,7 @@ Returns an object which contains all available common and specific constants rel
 
 ---
 
-### `isPad` <div class="label ios">iOS</div>
+### `isPad` <div className="label ios">iOS</div>
 
 ```tsx
 static isPad: boolean;
diff --git a/website/versioned_docs/version-0.81/pressable.md b/website/versioned_docs/version-0.81/pressable.md
index 2deaade66e8..08ac6f44307 100644
--- a/website/versioned_docs/version-0.81/pressable.md
+++ b/website/versioned_docs/version-0.81/pressable.md
@@ -108,7 +108,7 @@ export default App;
 
 ## Props
 
-### `android_disableSound` <div class="label android">Android</div>
+### `android_disableSound` <div className="label android">Android</div>
 
 If true, doesn't play Android system sound on press.
 
@@ -116,7 +116,7 @@ If true, doesn't play Android system sound on press.
 | ------- | ------- |
 | boolean | `false` |
 
-### `android_ripple` <div class="label android">Android</div>
+### `android_ripple` <div className="label android">Android</div>
 
 Enables the Android ripple effect and configures its properties.
 
diff --git a/website/versioned_docs/version-0.81/pressevent.md b/website/versioned_docs/version-0.81/pressevent.md
index b7ec5a5d4ef..df81b875ddf 100644
--- a/website/versioned_docs/version-0.81/pressevent.md
+++ b/website/versioned_docs/version-0.81/pressevent.md
@@ -31,7 +31,7 @@ Array of all PressEvents that have changed since the last event.
 | -------------------- | -------- |
 | array of PressEvents | No       |
 
-### `force` <div class="label ios">iOS</div>
+### `force` <div className="label ios">iOS</div>
 
 Amount of force used during the 3D Touch press. Returns the float value in range from `0.0` to `1.0`.
 
diff --git a/website/versioned_docs/version-0.81/profiling.md b/website/versioned_docs/version-0.81/profiling.md
index cec3698d2ef..e38911d6bc5 100644
--- a/website/versioned_docs/version-0.81/profiling.md
+++ b/website/versioned_docs/version-0.81/profiling.md
@@ -7,7 +7,7 @@ Profiling is the process of analyzing an app's performance, resource usage, and
 
 For iOS, Instruments is an invaluable tool, and on Android you should learn to use the [Android Studio Profiler](profiling.md#profiling-android-ui-performance-with-system-tracing).
 
-But first, [**make sure that Development Mode is OFF!**](performance.md#running-in-development-mode-devtrue) You should see `__DEV__ === false, development-level warning are OFF, performance optimizations are ON` in your application logs.
+But first, [**make sure that Development Mode is OFF!**](performance.md#running-in-development-mode-devtrue).
 
 ## Profiling Android UI Performance with System Tracing
 
diff --git a/website/versioned_docs/version-0.81/refreshcontrol.md b/website/versioned_docs/version-0.81/refreshcontrol.md
index ae1509b660b..e7f8fea5e83 100644
--- a/website/versioned_docs/version-0.81/refreshcontrol.md
+++ b/website/versioned_docs/version-0.81/refreshcontrol.md
@@ -66,7 +66,7 @@ Inherits [View Props](view.md#props).
 
 ---
 
-### <div class="label required basic">Required</div>**`refreshing`**
+### <div className="label required basic">Required</div>**`refreshing`**
 
 Whether the view should be indicating an active refresh.
 
@@ -76,7 +76,7 @@ Whether the view should be indicating an active refresh.
 
 ---
 
-### `colors` <div class="label android">Android</div>
+### `colors` <div className="label android">Android</div>
 
 The colors (at least one) that will be used to draw the refresh indicator.
 
@@ -86,7 +86,7 @@ The colors (at least one) that will be used to draw the refresh indicator.
 
 ---
 
-### `enabled` <div class="label android">Android</div>
+### `enabled` <div className="label android">Android</div>
 
 Whether the pull to refresh functionality is enabled.
 
@@ -106,7 +106,7 @@ Called when the view starts refreshing.
 
 ---
 
-### `progressBackgroundColor` <div class="label android">Android</div>
+### `progressBackgroundColor` <div className="label android">Android</div>
 
 The background color of the refresh indicator.
 
@@ -126,7 +126,7 @@ Progress view top offset.
 
 ---
 
-### `size` <div class="label android">Android</div>
+### `size` <div className="label android">Android</div>
 
 Size of the refresh indicator.
 
@@ -136,7 +136,7 @@ Size of the refresh indicator.
 
 ---
 
-### `tintColor` <div class="label ios">iOS</div>
+### `tintColor` <div className="label ios">iOS</div>
 
 The color of the refresh indicator.
 
@@ -146,7 +146,7 @@ The color of the refresh indicator.
 
 ---
 
-### `title` <div class="label ios">iOS</div>
+### `title` <div className="label ios">iOS</div>
 
 The title displayed under the refresh indicator.
 
@@ -156,7 +156,7 @@ The title displayed under the refresh indicator.
 
 ---
 
-### `titleColor` <div class="label ios">iOS</div>
+### `titleColor` <div className="label ios">iOS</div>
 
 The color of the refresh indicator title.
 
diff --git a/website/versioned_docs/version-0.81/running-on-device.md b/website/versioned_docs/version-0.81/running-on-device.md
index 6420248f98e..2ea67d7ba7e 100644
--- a/website/versioned_docs/version-0.81/running-on-device.md
+++ b/website/versioned_docs/version-0.81/running-on-device.md
@@ -8,7 +8,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con
 
 It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.
 
-:::info
+:::tip
 If you used `create-expo-app` to set up your project, you can run your app on a device in Expo Go by scanning the QR code that is displayed when you run `npm start`. Refer to the Expo guide for [running your project on your device](https://docs.expo.dev/get-started/expo-go/) for more information.
 :::
 
@@ -70,9 +70,13 @@ yarn android
 </TabItem>
 </Tabs>
 
-> If you get a "bridge configuration isn't available" error, see [Using adb reverse](running-on-device.md#method-1-using-adb-reverse-recommended).
+:::note
+If you get a "bridge configuration isn't available" error, see [Using adb reverse](running-on-device.md#method-1-using-adb-reverse-recommended).
+:::
 
-> Hint: You can also use the `React Native CLI` to generate and run a `release` build (e.g. from the root of your project: `yarn android --mode release`).
+:::tip
+You can also use the `React Native CLI` to generate and run a `release` build (e.g. from the root of your project: `yarn android --mode release`).
+:::
 
 <h2>Connecting to the development server</h2>
 
@@ -163,7 +167,9 @@ yarn android
 </TabItem>
 </Tabs>
 
-> Hint: You can also use the `React Native CLI` to generate and run a `release` build (e.g. from the root of your project: `yarn android --mode release`).
+:::tip
+You can also use the `React Native CLI` to generate and run a `release` build (e.g. from the root of your project: `yarn android --mode release`).
+:::
 
 <h2>Connecting to the development server</h2>
 
@@ -299,9 +305,13 @@ yarn android
 </TabItem>
 </Tabs>
 
-> If you get a "bridge configuration isn't available" error, see [Using adb reverse](running-on-device.md#method-1-using-adb-reverse-recommended).
+:::note
+If you get a "bridge configuration isn't available" error, see [Using adb reverse](running-on-device.md#method-1-using-adb-reverse-recommended).
+:::
 
-> Hint: You can also use the `React Native CLI` to generate and run a `release` build (e.g. from the root of your project: `yarn android --mode release`).
+:::tip
+You can also use the `React Native CLI` to generate and run a `release` build (e.g. from the root of your project: `yarn android --mode release`).
+:::
 
 <h2>Connecting to the development server</h2>
 
@@ -382,7 +392,9 @@ If everything is set up correctly, your device will be listed as the build targe
 
 ![](/docs/assets/RunningOnDeviceReady.png)
 
-> If you run into any issues, please take a look at Apple's [Launching Your App on a Device](https://developer.apple.com/library/content/documentation/IDEs/Conceptual/AppDistributionGuide/LaunchingYourApponDevices/LaunchingYourApponDevices.html#//apple_ref/doc/uid/TP40012582-CH27-SW4) docs.
+:::note
+If you run into any issues, please take a look at Apple's [Launching Your App on a Device](https://developer.apple.com/library/content/documentation/IDEs/Conceptual/AppDistributionGuide/LaunchingYourApponDevices/LaunchingYourApponDevices.html#//apple_ref/doc/uid/TP40012582-CH27-SW4) docs.
+:::
 
 <h2>Connecting to the development server</h2>
 
@@ -392,11 +404,15 @@ You can also iterate quickly on a device using the development server. You only
 
 ### Troubleshooting
 
-> If you have any issues, ensure that your Mac and device are on the same network and can reach each other. Many open wireless networks with captive portals are configured to prevent devices from reaching other devices on the network. You may use your device's Personal Hotspot feature in this case. You may also share your internet (Wi-Fi/Ethernet) connection from your Mac to your device via USB and connect to the bundler through this tunnel for very high transfer speeds.
+:::tip
+If you have any issues, ensure that your Mac and device are on the same network and can reach each other. Many open wireless networks with captive portals are configured to prevent devices from reaching other devices on the network. You may use your device's Personal Hotspot feature in this case. You may also share your internet (Wi-Fi/Ethernet) connection from your Mac to your device via USB and connect to the bundler through this tunnel for very high transfer speeds.
+:::
 
 When trying to connect to the development server you might get a [red screen with an error](debugging.md#logbox) saying:
 
-> Connection to `http://localhost:8081/debugger-proxy?role=client` timed out. Are you running node proxy? If you are running on the device, check if you have the right IP address in `RCTWebSocketExecutor.m`.
+:::note
+Connection to `http://localhost:8081/debugger-proxy?role=client` timed out. Are you running node proxy? If you are running on the device, check if you have the right IP address in `RCTWebSocketExecutor.m`.
+:::
 
 To solve this issue check the following points.
 
@@ -421,14 +437,18 @@ You have built a great app using React Native, and you are now itching to releas
 
 [//]: # 'Windows, iOS'
 
-> A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to our [environment setup guide](environment-setup) to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.
+:::info
+A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to our [environment setup guide](environment-setup) to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.
+:::
 
 </TabItem>
 <TabItem value="linux">
 
 [//]: # 'Linux, iOS'
 
-> A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to our [environment setup guide](environment-setup) to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.
+:::info
+A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to our [environment setup guide](environment-setup) to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app.
+:::
 
 </TabItem>
 </Tabs>
diff --git a/website/versioned_docs/version-0.81/scrollview.md b/website/versioned_docs/version-0.81/scrollview.md
index ee02d33afff..6ffdf71e986 100644
--- a/website/versioned_docs/version-0.81/scrollview.md
+++ b/website/versioned_docs/version-0.81/scrollview.md
@@ -83,7 +83,7 @@ A React Component that will be used to render sticky headers, should be used tog
 
 ---
 
-### `alwaysBounceHorizontal` <div class="label ios">iOS</div>
+### `alwaysBounceHorizontal` <div className="label ios">iOS</div>
 
 When true, the scroll view bounces horizontally when it reaches the end even if the content is smaller than the scroll view itself.
 
@@ -93,7 +93,7 @@ When true, the scroll view bounces horizontally when it reaches the end even if
 
 ---
 
-### `alwaysBounceVertical` <div class="label ios">iOS</div>
+### `alwaysBounceVertical` <div className="label ios">iOS</div>
 
 When true, the scroll view bounces vertically when it reaches the end even if the content is smaller than the scroll view itself.
 
@@ -103,7 +103,7 @@ When true, the scroll view bounces vertically when it reaches the end even if th
 
 ---
 
-### `automaticallyAdjustContentInsets` <div class="label ios">iOS</div>
+### `automaticallyAdjustContentInsets` <div className="label ios">iOS</div>
 
 Controls whether iOS should automatically adjust the content inset for scroll views that are placed behind a navigation bar or tab bar/toolbar.
 
@@ -113,7 +113,7 @@ Controls whether iOS should automatically adjust the content inset for scroll vi
 
 ---
 
-### `automaticallyAdjustKeyboardInsets` <div class="label ios">iOS</div>
+### `automaticallyAdjustKeyboardInsets` <div className="label ios">iOS</div>
 
 Controls whether the ScrollView should automatically adjust its `contentInset` and `scrollViewInsets` when the Keyboard changes its size.
 
@@ -123,7 +123,7 @@ Controls whether the ScrollView should automatically adjust its `contentInset` a
 
 ---
 
-### `automaticallyAdjustsScrollIndicatorInsets` <div class="label ios">iOS</div>
+### `automaticallyAdjustsScrollIndicatorInsets` <div className="label ios">iOS</div>
 
 Controls whether iOS should automatically adjust the scroll indicator insets. See Apple's [documentation on the property](https://developer.apple.com/documentation/uikit/uiscrollview/3198043-automaticallyadjustsscrollindica).
 
@@ -133,7 +133,7 @@ Controls whether iOS should automatically adjust the scroll indicator insets. Se
 
 ---
 
-### `bounces` <div class="label ios">iOS</div>
+### `bounces` <div className="label ios">iOS</div>
 
 When true, the scroll view bounces when it reaches the end of the content if the content is larger than the scroll view along the axis of the scroll direction. When `false`, it disables all bouncing even if the `alwaysBounce*` props are `true`.
 
@@ -143,7 +143,7 @@ When true, the scroll view bounces when it reaches the end of the content if the
 
 ---
 
-### `bouncesZoom` <div class="label ios">iOS</div>
+### `bouncesZoom` <div className="label ios">iOS</div>
 
 When `true`, gestures can drive zoom past min/max and the zoom will animate to the min/max value at gesture end, otherwise the zoom will not exceed the limits.
 
@@ -153,7 +153,7 @@ When `true`, gestures can drive zoom past min/max and the zoom will animate to t
 
 ---
 
-### `canCancelContentTouches` <div class="label ios">iOS</div>
+### `canCancelContentTouches` <div className="label ios">iOS</div>
 
 When `false`, once tracking starts, won't try to drag if the touch moves.
 
@@ -163,7 +163,7 @@ When `false`, once tracking starts, won't try to drag if the touch moves.
 
 ---
 
-### `centerContent` <div class="label ios">iOS</div>
+### `centerContent` <div className="label ios">iOS</div>
 
 When `true`, the scroll view automatically centers the content when the content is smaller than the scroll view bounds; when the content is larger than the scroll view, this property has no effect.
 
@@ -196,7 +196,7 @@ const styles = StyleSheet.create({
 
 ---
 
-### `contentInset` <div class="label ios">iOS</div>
+### `contentInset` <div className="label ios">iOS</div>
 
 The amount by which the scroll view content is inset from the edges of the scroll view.
 
@@ -206,7 +206,7 @@ The amount by which the scroll view content is inset from the edges of the scrol
 
 ---
 
-### `contentInsetAdjustmentBehavior` <div class="label ios">iOS</div>
+### `contentInsetAdjustmentBehavior` <div className="label ios">iOS</div>
 
 This property specifies how the safe area insets are used to modify the content area of the scroll view. Available on iOS 11 and later.
 
@@ -239,7 +239,7 @@ A floating-point number that determines how quickly the scroll view decelerates
 
 ---
 
-### `directionalLockEnabled` <div class="label ios">iOS</div>
+### `directionalLockEnabled` <div className="label ios">iOS</div>
 
 When true, the ScrollView will try to lock to only vertical or horizontal scrolling while dragging.
 
@@ -269,7 +269,7 @@ When true, the default JS pan responder on the ScrollView is disabled, and full
 
 ---
 
-### `endFillColor` <div class="label android">Android</div>
+### `endFillColor` <div className="label android">Android</div>
 
 Sometimes a scrollview takes up more space than its content fills. When this is the case, this prop will fill the rest of the scrollview with a color to avoid setting a background and creating unnecessary overdraw. This is an advanced optimization that is not needed in the general case.
 
@@ -279,7 +279,7 @@ Sometimes a scrollview takes up more space than its content fills. When this is
 
 ---
 
-### `fadingEdgeLength` <div class="label android">Android</div>
+### `fadingEdgeLength` <div className="label android">Android</div>
 
 Fades out the edges of the scroll content.
 
@@ -301,7 +301,7 @@ When `true`, the scroll view's children are arranged horizontally in a row inste
 
 ---
 
-### `indicatorStyle` <div class="label ios">iOS</div>
+### `indicatorStyle` <div className="label ios">iOS</div>
 
 The style of the scroll indicators.
 
@@ -374,7 +374,7 @@ Caveat 2: This uses `contentOffset` and `frame.origin` in native code to compute
 
 ---
 
-### `maximumZoomScale` <div class="label ios">iOS</div>
+### `maximumZoomScale` <div className="label ios">iOS</div>
 
 The maximum allowed zoom scale.
 
@@ -384,7 +384,7 @@ The maximum allowed zoom scale.
 
 ---
 
-### `minimumZoomScale` <div class="label ios">iOS</div>
+### `minimumZoomScale` <div className="label ios">iOS</div>
 
 The minimum allowed zoom scale.
 
@@ -394,7 +394,7 @@ The minimum allowed zoom scale.
 
 ---
 
-### `nestedScrollEnabled` <div class="label android">Android</div>
+### `nestedScrollEnabled` <div className="label android">Android</div>
 
 Enables nested scrolling for Android API level 21+.
 
@@ -480,7 +480,7 @@ Called when the user stops dragging the scroll view and it either stops or begin
 
 ---
 
-### `onScrollToTop` <div class="label ios">iOS</div>
+### `onScrollToTop` <div className="label ios">iOS</div>
 
 Fires when the scroll view scrolls to top after the status bar has been tapped.
 
@@ -490,7 +490,7 @@ Fires when the scroll view scrolls to top after the status bar has been tapped.
 
 ---
 
-### `overScrollMode` <div class="label android">Android</div>
+### `overScrollMode` <div className="label android">Android</div>
 
 Used to override default value of overScroll mode.
 
@@ -516,7 +516,7 @@ When true, the scroll view stops on multiples of the scroll view's size when scr
 
 ---
 
-### `persistentScrollbar` <div class="label android">Android</div>
+### `persistentScrollbar` <div className="label android">Android</div>
 
 Causes the scrollbars not to turn transparent when they are not in use.
 
@@ -526,7 +526,7 @@ Causes the scrollbars not to turn transparent when they are not in use.
 
 ---
 
-### `pinchGestureEnabled` <div class="label ios">iOS</div>
+### `pinchGestureEnabled` <div className="label ios">iOS</div>
 
 When true, ScrollView allows use of pinch gestures to zoom in and out.
 
@@ -580,7 +580,7 @@ Limits how often scroll events will be fired while scrolling, specified as a tim
 
 ---
 
-### `scrollIndicatorInsets` <div class="label ios">iOS</div>
+### `scrollIndicatorInsets` <div className="label ios">iOS</div>
 
 The amount by which the scroll view indicators are inset from the edges of the scroll view. This should normally be set to the same value as the `contentInset`.
 
@@ -590,7 +590,7 @@ The amount by which the scroll view indicators are inset from the edges of the s
 
 ---
 
-### `scrollPerfTag` <div class="label android">Android</div>
+### `scrollPerfTag` <div className="label android">Android</div>
 
 Tag used to log scroll performance on this scroll view. Will force momentum events to be turned on (see sendMomentumEvents). This doesn't do anything out of the box and you need to implement a custom native FpsListener for it to be useful.
 
@@ -600,7 +600,7 @@ Tag used to log scroll performance on this scroll view. Will force momentum even
 
 ---
 
-### `scrollToOverflowEnabled` <div class="label ios">iOS</div>
+### `scrollToOverflowEnabled` <div className="label ios">iOS</div>
 
 When `true`, the scroll view can be programmatically scrolled beyond its content size.
 
@@ -610,7 +610,7 @@ When `true`, the scroll view can be programmatically scrolled beyond its content
 
 ---
 
-### `scrollsToTop` <div class="label ios">iOS</div>
+### `scrollsToTop` <div className="label ios">iOS</div>
 
 When `true`, the scroll view scrolls to top when the status bar is tapped.
 
@@ -716,7 +716,7 @@ An array of child indices determining which children get docked to the top of th
 
 ---
 
-### `zoomScale` <div class="label ios">iOS</div>
+### `zoomScale` <div className="label ios">iOS</div>
 
 The current scale of the scroll view content.
 
diff --git a/website/versioned_docs/version-0.81/sectionlist.md b/website/versioned_docs/version-0.81/sectionlist.md
index 0c0dbd2bd1c..9fe404005dd 100644
--- a/website/versioned_docs/version-0.81/sectionlist.md
+++ b/website/versioned_docs/version-0.81/sectionlist.md
@@ -105,7 +105,7 @@ Inherits [VirtualizedList Props](virtualizedlist.md#props).
 
 ---
 
-### <div class="label required basic">Required</div>**`renderItem`**
+### <div className="label required basic">Required</div>**`renderItem`**
 
 Default renderer for every item in every section. Can be over-ridden on a per-section basis. Should return a React element.
 
@@ -127,7 +127,7 @@ The render function will be passed an object with the following keys:
 
 ---
 
-### <div class="label required basic">Required</div>**`sections`**
+### <div className="label required basic">Required</div>**`sections`**
 
 The actual data to render, akin to the `data` prop in [`FlatList`](flatlist.md).
 
@@ -293,13 +293,13 @@ Rendered at the top and bottom of each section (note this is different from `Ite
 
 Makes section headers stick to the top of the screen until the next one pushes it off. Only enabled by default on iOS because that is the platform standard there.
 
-| Type    | Default                                                                                          |
-| ------- | ------------------------------------------------------------------------------------------------ |
-| boolean | `false` <div class="label android">Android</div><hr/>`true` <div className="label ios">iOS</div> |
+| Type    | Default                                                                                              |
+| ------- | ---------------------------------------------------------------------------------------------------- |
+| boolean | `false` <div className="label android">Android</div><hr/>`true` <div className="label ios">iOS</div> |
 
 ## Methods
 
-### `flashScrollIndicators()` <div class="label ios">iOS</div>
+### `flashScrollIndicators()` <div className="label ios">iOS</div>
 
 ```tsx
 flashScrollIndicators();
@@ -331,9 +331,9 @@ Scrolls to the item at the specified `sectionIndex` and `itemIndex` (within the
 
 **Parameters:**
 
-| Name                                                    | Type   |
-| ------------------------------------------------------- | ------ |
-| params <div class="label basic required">Required</div> | object |
+| Name                                                        | Type   |
+| ----------------------------------------------------------- | ------ |
+| params <div className="label basic required">Required</div> | object |
 
 Valid `params` keys are:
 
@@ -355,10 +355,10 @@ An object that identifies the data to be rendered for a given section.
 
 **Properties:**
 
-| Name                                                  | Type               | Description                                                                                                                                                         |
-| ----------------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| data <div class="label basic required">Required</div> | array              | The data for rendering items in this section. Array of objects, much like [`FlatList`'s data prop](flatlist#required-data).                                         |
-| key                                                   | string             | Optional key to keep track of section re-ordering. If you don't plan on re-ordering sections, the array index will be used by default.                              |
-| renderItem                                            | function           | Optionally define an arbitrary item renderer for this section, overriding the default [`renderItem`](sectionlist#renderitem) for the list.                          |
-| ItemSeparatorComponent                                | component, element | Optionally define an arbitrary item separator for this section, overriding the default [`ItemSeparatorComponent`](sectionlist#itemseparatorcomponent) for the list. |
-| keyExtractor                                          | function           | Optionally define an arbitrary key extractor for this section, overriding the default [`keyExtractor`](sectionlist#keyextractor).                                   |
+| Name                                                      | Type               | Description                                                                                                                                                         |
+| --------------------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| data <div className="label basic required">Required</div> | array              | The data for rendering items in this section. Array of objects, much like [`FlatList`'s data prop](flatlist#required-data).                                         |
+| key                                                       | string             | Optional key to keep track of section re-ordering. If you don't plan on re-ordering sections, the array index will be used by default.                              |
+| renderItem                                                | function           | Optionally define an arbitrary item renderer for this section, overriding the default [`renderItem`](sectionlist#renderitem) for the list.                          |
+| ItemSeparatorComponent                                    | component, element | Optionally define an arbitrary item separator for this section, overriding the default [`ItemSeparatorComponent`](sectionlist#itemseparatorcomponent) for the list. |
+| keyExtractor                                              | function           | Optionally define an arbitrary key extractor for this section, overriding the default [`keyExtractor`](sectionlist#keyextractor).                                   |
diff --git a/website/versioned_docs/version-0.81/security.md b/website/versioned_docs/version-0.81/security.md
index 1af4b74f3e3..bf8ed1ff5d4 100644
--- a/website/versioned_docs/version-0.81/security.md
+++ b/website/versioned_docs/version-0.81/security.md
@@ -19,7 +19,9 @@ If you must have an API key or a secret to access some resource from your app, t
 
 **For persisted user data, choose the right type of storage based on its sensitivity.** As your app is used, you’ll often find the need to save data on the device, whether to support your app being used offline, cut down on network requests or save your user’s access token between sessions so they wouldn’t have to re-authenticate each time they use the app.
 
-> **Persisted vs unpersisted** — persisted data is written to the device’s disk, which lets the data be read by your app across application launches without having to do another network request to fetch it or asking the user to re-enter it. But this also can make that data more vulnerable to being accessed by attackers. Unpersisted data is never written to disk—so there's no data to access!
+:::info
+**Persisted vs unpersisted** — persisted data is written to the device’s disk, which lets the data be read by your app across application launches without having to do another network request to fetch it or asking the user to re-enter it. But this also can make that data more vulnerable to being accessed by attackers. Unpersisted data is never written to disk—so there's no data to access!
+:::
 
 ### Async Storage
 
@@ -38,7 +40,9 @@ If you must have an API key or a secret to access some resource from your app, t
 
 <TabItem value="web">
 
-> Async Storage is the React Native equivalent of Local Storage from the web
+:::note
+Async Storage is the React Native equivalent of Local Storage from the web
+:::
 
 </TabItem>
 </Tabs>
@@ -64,7 +68,9 @@ In order to use iOS Keychain services or Android Secure Shared Preferences, you
 - [expo-secure-store](https://docs.expo.dev/versions/latest/sdk/securestore/)
 - [react-native-keychain](https://github.com/oblador/react-native-keychain)
 
-> **Be mindful of unintentionally storing or exposing sensitive info.** This could happen accidentally, for example saving sensitive form data in redux state and persisting the whole state tree in Async Storage. Or sending user tokens and personal info to an application monitoring service such as Sentry or Crashlytics.
+:::warning Caution
+**Be mindful of unintentionally storing or exposing sensitive info.** This could happen accidentally, for example saving sensitive form data in redux state and persisting the whole state tree in Async Storage. Or sending user tokens and personal info to an application monitoring service such as Sentry or Crashlytics.
+:::
 
 ## Authentication and Deep Linking
 
@@ -105,7 +111,9 @@ This guarantees that only the application that triggered the initial authorizati
 
 A library to consider for native OAuth is [react-native-app-auth](https://github.com/FormidableLabs/react-native-app-auth). React-native-app-auth is an SDK for communicating with OAuth2 providers. It wraps the native [AppAuth-iOS](https://github.com/openid/AppAuth-iOS) and [AppAuth-Android](https://github.com/openid/AppAuth-Android) libraries and can support PKCE.
 
-> React-native-app-auth can support PKCE only if your Identity Provider supports it.
+:::note
+`react-native-app-auth` can support PKCE only if your Identity Provider supports it.
+:::
 
 ![OAuth2 with PKCE](/docs/assets/diagram_pkce.svg)
 
@@ -119,7 +127,9 @@ Using https endpoints could still leave your data vulnerable to interception. Wi
 
 **SSL pinning** is a technique that can be used on the client side to avoid this attack. It works by embedding (or pinning) a list of trusted certificates to the client during development, so that only the requests signed with one of the trusted certificates will be accepted, and any self-signed certificates will not be.
 
-> When using SSL pinning, you should be mindful of certificate expiry. Certificates expire every 1-2 years and when one does, it’ll need to be updated in the app as well as on the server. As soon as the certificate on the server has been updated, any apps with the old certificate embedded in them will cease to work.
+:::warning Caution
+When using SSL pinning, you should be mindful of certificate expiry. Certificates expire every 1-2 years and when one does, it’ll need to be updated in the app as well as on the server. As soon as the certificate on the server has been updated, any apps with the old certificate embedded in them will cease to work.
+:::
 
 ## Summary
 
diff --git a/website/versioned_docs/version-0.81/shadow-props.md b/website/versioned_docs/version-0.81/shadow-props.md
index cbff04e435c..d5e8a037059 100644
--- a/website/versioned_docs/version-0.81/shadow-props.md
+++ b/website/versioned_docs/version-0.81/shadow-props.md
@@ -240,7 +240,7 @@ Both `boxShadow` and `dropShadow` are generally more capable than the `shadow` p
 
 See [View Style Props](./view-style-props#boxshadow) for documentation.
 
-### `dropShadow` <div class="label android">Android</div>
+### `dropShadow` <div className="label android">Android</div>
 
 See [View Style Props](./view-style-props#filter) for documentation.
 
@@ -256,7 +256,7 @@ This property will only work on Android API 28 and above. For similar functional
 
 ---
 
-### `shadowOffset` <div class="label ios">iOS</div>
+### `shadowOffset` <div className="label ios">iOS</div>
 
 Sets the drop shadow offset.
 
@@ -266,7 +266,7 @@ Sets the drop shadow offset.
 
 ---
 
-### `shadowOpacity` <div class="label ios">iOS</div>
+### `shadowOpacity` <div className="label ios">iOS</div>
 
 Sets the drop shadow opacity (multiplied by the color's alpha component).
 
@@ -276,7 +276,7 @@ Sets the drop shadow opacity (multiplied by the color's alpha component).
 
 ---
 
-### `shadowRadius` <div class="label ios">iOS</div>
+### `shadowRadius` <div className="label ios">iOS</div>
 
 Sets the drop shadow blur radius.
 
diff --git a/website/versioned_docs/version-0.81/share.md b/website/versioned_docs/version-0.81/share.md
index 0fdb76fabc9..1fc5823361f 100644
--- a/website/versioned_docs/version-0.81/share.md
+++ b/website/versioned_docs/version-0.81/share.md
@@ -108,10 +108,10 @@ In Android, returns a Promise which will always be resolved with action being `S
 
 **Properties:**
 
-| Name                                                         | Type   | Description                                                                                                                                                                                                                                                                                                                                                              |
-| ------------------------------------------------------------ | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| content <div className="label basic required">Required</div> | object | `message` - a message to share<br/>`url` - a URL to share <div class="label ios">iOS</div><br/>`title` - title of the message <div class="label android">Android</div><hr/>At least one of `url` and `message` is required.                                                                                                                                              |
-| options                                                      | object | `dialogTitle` <div class="label android">Android</div><br/>`excludedActivityTypes` <div class="label ios">iOS</div><br/>`subject` - a subject to share via email <div class="label ios">iOS</div><br/>`tintColor` <div class="label ios">iOS</div><br/>`anchor` - the node to which the action sheet should be anchored (used for iPad) <div class="label ios">iOS</div> |
+| Name                                                         | Type   | Description                                                                                                                                                                                                                                                                                                                                                                                  |
+| ------------------------------------------------------------ | ------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| content <div className="label basic required">Required</div> | object | `message` - a message to share<br/>`url` - a URL to share <div className="label ios">iOS</div><br/>`title` - title of the message <div className="label android">Android</div><hr/>At least one of `url` and `message` is required.                                                                                                                                                          |
+| options                                                      | object | `dialogTitle` <div className="label android">Android</div><br/>`excludedActivityTypes` <div className="label ios">iOS</div><br/>`subject` - a subject to share via email <div className="label ios">iOS</div><br/>`tintColor` <div className="label ios">iOS</div><br/>`anchor` - the node to which the action sheet should be anchored (used for iPad) <div className="label ios">iOS</div> |
 
 ---
 
@@ -127,7 +127,7 @@ The content was successfully shared.
 
 ---
 
-### `dismissedAction` <div class="label ios">iOS</div>
+### `dismissedAction` <div className="label ios">iOS</div>
 
 ```tsx
 static dismissedAction: 'dismissedAction';
diff --git a/website/versioned_docs/version-0.81/statusbar.md b/website/versioned_docs/version-0.81/statusbar.md
index 4b905d92942..639b5c9e682 100644
--- a/website/versioned_docs/version-0.81/statusbar.md
+++ b/website/versioned_docs/version-0.81/statusbar.md
@@ -243,7 +243,7 @@ For cases where using a component is not ideal, there is also an imperative API
 
 ## Constants
 
-### `currentHeight` <div class="label android">Android</div>
+### `currentHeight` <div className="label android">Android</div>
 
 The height of the status bar, which includes the notch height, if present.
 
@@ -261,7 +261,7 @@ If the transition between status bar property changes should be animated. Suppor
 
 ---
 
-### `backgroundColor` <div class="label android">Android</div>
+### `backgroundColor` <div className="label android">Android</div>
 
 The background color of the status bar.
 
@@ -297,7 +297,7 @@ If the status bar is hidden.
 
 ---
 
-### `networkActivityIndicatorVisible` <div class="label ios">iOS</div>
+### `networkActivityIndicatorVisible` <div className="label ios">iOS</div>
 
 If the network activity indicator should be visible.
 
@@ -307,7 +307,7 @@ If the network activity indicator should be visible.
 
 ---
 
-### `showHideTransition` <div class="label ios">iOS</div>
+### `showHideTransition` <div className="label ios">iOS</div>
 
 The transition effect when showing and hiding the status bar using the `hidden` prop.
 
@@ -317,7 +317,7 @@ The transition effect when showing and hiding the status bar using the `hidden`
 
 ---
 
-### `translucent` <div class="label android">Android</div>
+### `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.
 
@@ -341,9 +341,9 @@ Get and remove the last StatusBar entry from the stack.
 
 **Parameters:**
 
-| Name                                                   | Type | Description                           |
-| ------------------------------------------------------ | ---- | ------------------------------------- |
-| entry <div class="label basic required">Required</div> | any  | Entry returned from `pushStackEntry`. |
+| Name                                                       | Type | Description                           |
+| ---------------------------------------------------------- | ---- | ------------------------------------- |
+| entry <div className="label basic required">Required</div> | any  | Entry returned from `pushStackEntry`. |
 
 ---
 
@@ -357,9 +357,9 @@ Push a StatusBar entry onto the stack. The return value should be passed to `pop
 
 **Parameters:**
 
-| Name                                                   | Type | Description                                                      |
-| ------------------------------------------------------ | ---- | ---------------------------------------------------------------- |
-| props <div class="label basic required">Required</div> | any  | Object containing the StatusBar props to use in the stack entry. |
+| Name                                                       | Type | Description                                                      |
+| ---------------------------------------------------------- | ---- | ---------------------------------------------------------------- |
+| props <div className="label basic required">Required</div> | any  | Object containing the StatusBar props to use in the stack entry. |
 
 ---
 
@@ -376,14 +376,14 @@ Replace an existing StatusBar stack entry with new props.
 
 **Parameters:**
 
-| Name                                                   | Type | Description                                                                  |
-| ------------------------------------------------------ | ---- | ---------------------------------------------------------------------------- |
-| entry <div class="label basic required">Required</div> | any  | Entry returned from `pushStackEntry` to replace.                             |
-| props <div class="label basic required">Required</div> | any  | Object containing the StatusBar props to use in the replacement stack entry. |
+| 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 class="label android">Android</div>
+### `setBackgroundColor()` <div className="label android">Android</div>
 
 ```tsx
 static setBackgroundColor(color: ColorValue, animated?: boolean);
@@ -397,10 +397,10 @@ Due to edge-to-edge enforcement introduced in Android 15, setting background col
 
 **Parameters:**
 
-| Name                                                   | Type    | Description               |
-| ------------------------------------------------------ | ------- | ------------------------- |
-| color <div class="label basic required">Required</div> | string  | Background color.         |
-| animated                                               | boolean | Animate the style change. |
+| Name                                                       | Type    | Description               |
+| ---------------------------------------------------------- | ------- | ------------------------- |
+| color <div className="label basic required">Required</div> | string  | Background color.         |
+| animated                                                   | boolean | Animate the style change. |
 
 ---
 
@@ -414,10 +414,10 @@ Set the status bar style.
 
 **Parameters:**
 
-| Name                                                   | Type                                       | Description               |
-| ------------------------------------------------------ | ------------------------------------------ | ------------------------- |
-| style <div class="label basic required">Required</div> | [StatusBarStyle](statusbar#statusbarstyle) | Status bar style to set.  |
-| animated                                               | boolean                                    | Animate the style change. |
+| 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. |
 
 ---
 
@@ -431,14 +431,14 @@ Show or hide the status bar.
 
 **Parameters:**
 
-| Name                                                    | Type                                               | Description                                             |
-| ------------------------------------------------------- | -------------------------------------------------- | ------------------------------------------------------- |
-| hidden <div class="label basic required">Required</div> | boolean                                            | Hide the status bar.                                    |
-| animation <div class="label ios">iOS</div>              | [StatusBarAnimation](statusbar#statusbaranimation) | Animation when changing the status bar hidden property. |
+| 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 class="label ios">iOS</div>
+### `setNetworkActivityIndicatorVisible()` <div className="label ios">iOS</div>
 
 ```tsx
 static setNetworkActivityIndicatorVisible(visible: boolean);
@@ -448,13 +448,13 @@ Control the visibility of the network activity indicator.
 
 **Parameters:**
 
-| Name                                                     | Type    | Description         |
-| -------------------------------------------------------- | ------- | ------------------- |
-| visible <div class="label basic required">Required</div> | boolean | Show the indicator. |
+| Name                                                         | Type    | Description         |
+| ------------------------------------------------------------ | ------- | ------------------- |
+| visible <div className="label basic required">Required</div> | boolean | Show the indicator. |
 
 ---
 
-### `setTranslucent()` <div class="label android">Android</div>
+### `setTranslucent()` <div className="label android">Android</div>
 
 ```tsx
 static setTranslucent(translucent: boolean);
@@ -468,9 +468,9 @@ Due to edge-to-edge enforcement introduced in Android 15, setting the status bar
 
 **Parameters:**
 
-| Name                                                         | Type    | Description         |
-| ------------------------------------------------------------ | ------- | ------------------- |
-| translucent <div class="label basic required">Required</div> | boolean | Set as translucent. |
+| Name                                                             | Type    | Description         |
+| ---------------------------------------------------------------- | ------- | ------------------- |
+| translucent <div className="label basic required">Required</div> | boolean | Set as translucent. |
 
 ## Type Definitions
 
diff --git a/website/versioned_docs/version-0.81/switch.md b/website/versioned_docs/version-0.81/switch.md
index ca76878015e..fcbaae7b1de 100644
--- a/website/versioned_docs/version-0.81/switch.md
+++ b/website/versioned_docs/version-0.81/switch.md
@@ -66,7 +66,7 @@ If true the user won't be able to toggle the switch.
 
 ---
 
-### `ios_backgroundColor` <div class="label ios">iOS</div>
+### `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).
 
diff --git a/website/versioned_docs/version-0.81/testing-overview.md b/website/versioned_docs/version-0.81/testing-overview.md
index ae00c6269f1..59562fae587 100644
--- a/website/versioned_docs/version-0.81/testing-overview.md
+++ b/website/versioned_docs/version-0.81/testing-overview.md
@@ -41,13 +41,17 @@ To make your app more testable, start by separating the view part of your app—
 
 Theoretically, you could go so far as to move all logic and data fetching out of your components. This way your components would be solely dedicated to rendering. Your state would be entirely independent of your components. Your app’s logic would work without any React components at all!
 
-> We encourage you to further explore the topic of testable code in other learning resources.
+:::tip
+We encourage you to further explore the topic of testable code in other learning resources.
+:::
 
 ## Writing Tests
 
 After writing testable code, it’s time to write some actual tests! The default template of React Native ships with [Jest](https://jestjs.io) testing framework. It includes a preset that's tailored to this environment so you can get productive without tweaking the configuration and mocks straight away—[more on mocks](#mocking) shortly. You can use Jest to write all types of tests featured in this guide.
 
-> If you do test-driven development, you actually write tests first! That way, testability of your code is given.
+:::note
+If you do test-driven development, you actually write tests first! That way, testability of your code is given.
+:::
 
 ### Structuring Tests
 
@@ -87,7 +91,9 @@ The great thing about unit tests is that they are quick to write and run. Theref
 
 Sometimes, when your tested objects have external dependencies, you’ll want to “mock them out.” “Mocking” is when you replace some dependency of your code with your own implementation.
 
-> Generally, using real objects in your tests is better than using mocks but there are situations where this is not possible. For example: when your JS unit test relies on a native module written in Java or Objective-C.
+:::info
+Generally, using real objects in your tests is better than using mocks but there are situations where this is not possible. For example: when your JS unit test relies on a native module written in Java or Objective-C.
+:::
 
 Imagine you’re writing an app that shows the current weather in your city and you’re using some external service or other dependency that provides you with the weather information. If the service tells you that it’s raining, you want to show an image with a rainy cloud. You don’t want to call that service in your tests, because:
 
@@ -97,7 +103,9 @@ Imagine you’re writing an app that shows the current weather in your city and
 
 Therefore, you can provide a mock implementation of the service, effectively replacing thousands of lines of code and some internet-connected thermometers!
 
-> Jest comes with [support for mocking](https://jestjs.io/docs/en/mock-functions#mocking-modules) from function level all the way to module level mocking.
+:::note
+Jest comes with [support for mocking](https://jestjs.io/docs/en/mock-functions#mocking-modules) from function level all the way to module level mocking.
+:::
 
 ## Integration Tests
 
@@ -105,12 +113,14 @@ When writing larger software systems, individual pieces of it need to interact w
 
 In integration testing, real individual units are combined (same as in your app) and tested together to ensure that their cooperation works as expected. This is not to say that mocking does not happen here: you’ll still need mocks (for example, to mock communication with a weather service), but you'll need them much less than in unit testing.
 
-> Please note that the terminology around what integration testing means is not always consistent. Also, the line between what is a unit test and what is an integration test may not always be clear. For this guide, your test falls into "integration testing" if it:
->
-> - Combines several modules of your app as described above
-> - Uses an external system
-> - Makes a network call to other application (such as the weather service API)
-> - Does any kind of file or database <abbr title="Input/Output">I/O</abbr>
+:::info
+Please note that the terminology around what integration testing means is not always consistent. Also, the line between what is a unit test and what is an integration test may not always be clear. For this guide, your test falls into "integration testing" if it:
+
+- Combines several modules of your app as described above
+- Uses an external system
+- Makes a network call to other application (such as the weather service API)
+- Does any kind of file or database <abbr title="Input/Output">I/O</abbr>
+  :::
 
 <img src="/docs/assets/p_tests-integration.svg" alt=" " />
 
@@ -130,7 +140,9 @@ There are several libraries that can help you testing these:
 - [React Native Testing Library](https://callstack.github.io/react-native-testing-library/) builds on top of React’s test renderer and adds `fireEvent` and `query` APIs described in the next paragraph.
 - [Deprecated] React’s [Test Renderer](https://react.dev/blog/2024/04/25/react-19-upgrade-guide#deprecated-react-test-renderer), developed alongside its core, provides a React renderer that can be used to render React components to pure JavaScript objects, without depending on the DOM or a native mobile environment.
 
-> Component tests are only JavaScript tests running in Node.js environment. They do _not_ take into account any iOS, Android, or other platform code which is backing the React Native components. It follows that they cannot give you a 100% confidence that everything works for the user. If there is a bug in the iOS or Android code, they will not find it.
+:::warning
+Component tests are only JavaScript tests running in Node.js environment. They do _not_ take into account any iOS, Android, or other platform code which is backing the React Native components. It follows that they cannot give you a 100% confidence that everything works for the user. If there is a bug in the iOS or Android code, they will not find it.
+:::
 
 <img src="/docs/assets/p_tests-component.svg" alt=" " />
 
@@ -180,7 +192,9 @@ Conversely, you should avoid:
 
 Avoid testing implementation details like props or state—while such tests work, they are not oriented toward how users will interact with the component and tend to break by refactoring (for example when you'd like to rename some things or rewrite class component using hooks).
 
-> React class components are especially prone to testing their implementation details such as internal state, props or event handlers. To avoid testing implementation details, prefer using function components with Hooks, which make relying on component internals _harder_.
+:::info
+React class components are especially prone to testing their implementation details such as internal state, props or event handlers. To avoid testing implementation details, prefer using function components with Hooks, which make relying on component internals _harder_.
+:::
 
 Component testing libraries such as [React Native Testing Library](https://callstack.github.io/react-native-testing-library/) facilitate writing user-centric tests by careful choice of provided APIs. The following example uses `fireEvent` methods `changeText` and `press` that simulate a user interacting with the component and a query function `getAllByText` that finds matching `Text` nodes in the rendered output.
 
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 76ec9fb9715..93c978a9ae7 100644
--- a/website/versioned_docs/version-0.81/text-style-props.md
+++ b/website/versioned_docs/version-0.81/text-style-props.md
@@ -805,7 +805,7 @@ Specifies font weight. The values `'normal'` and `'bold'` are supported for most
 
 ---
 
-### `includeFontPadding` <div class="label android">Android</div>
+### `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`.
 
@@ -819,22 +819,9 @@ Set to `false` to remove extra font padding intended to make space for certain a
 
 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>
+| Type                                                                                                                 | Default |
+| -------------------------------------------------------------------------------------------------------------------- | ------- |
+| array of enum(`'small-caps'`, `'oldstyle-nums'`, `'lining-nums'`, `'tabular-nums'`, `'proportional-nums'`) or string | `[]`    |
 
 ---
 
@@ -868,7 +855,7 @@ Specifies text alignment. On Android, the value 'justify' is only supported on O
 
 ---
 
-### `textAlignVertical` <div class="label android">Android</div>
+### `textAlignVertical` <div className="label android">Android</div>
 
 | Type                                            | Default  |
 | ----------------------------------------------- | -------- |
@@ -876,7 +863,7 @@ Specifies text alignment. On Android, the value 'justify' is only supported on O
 
 ---
 
-### `textDecorationColor` <div class="label ios">iOS</div>
+### `textDecorationColor` <div className="label ios">iOS</div>
 
 | Type               |
 | ------------------ |
@@ -892,7 +879,7 @@ Specifies text alignment. On Android, the value 'justify' is only supported on O
 
 ---
 
-### `textDecorationStyle` <div class="label ios">iOS</div>
+### `textDecorationStyle` <div className="label ios">iOS</div>
 
 | Type                                                | Default   |
 | --------------------------------------------------- | --------- |
@@ -932,7 +919,7 @@ Specifies text alignment. On Android, the value 'justify' is only supported on O
 
 ---
 
-### `verticalAlign` <div class="label android">Android</div>
+### `verticalAlign` <div className="label android">Android</div>
 
 | Type                                            | Default  |
 | ----------------------------------------------- | -------- |
@@ -940,7 +927,7 @@ Specifies text alignment. On Android, the value 'justify' is only supported on O
 
 ---
 
-### `writingDirection` <div class="label ios">iOS</div>
+### `writingDirection` <div className="label ios">iOS</div>
 
 | Type                             | Default  |
 | -------------------------------- | -------- |
diff --git a/website/versioned_docs/version-0.81/text.md b/website/versioned_docs/version-0.81/text.md
index 73e4932c78d..a81b9f0b495 100644
--- a/website/versioned_docs/version-0.81/text.md
+++ b/website/versioned_docs/version-0.81/text.md
@@ -215,7 +215,7 @@ An accessibility hint helps users understand what will happen when they perform
 
 ---
 
-### `accessibilityLanguage` <div class="label ios">iOS</div>
+### `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).
 
@@ -319,7 +319,7 @@ Specifies whether fonts should scale to respect Text Size accessibility settings
 
 ---
 
-### `android_hyphenationFrequency` <div class="label android">Android</div>
+### `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+.
 
@@ -387,7 +387,7 @@ Indicates whether a selectable element is currently selected or not.
 | ------- |
 | boolean |
 
-### `dataDetectorType` <div class="label android">Android</div>
+### `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.
 
@@ -399,7 +399,7 @@ You can provide only one type.
 
 ---
 
-### `disabled` <div class="label android">Android</div>
+### `disabled` <div className="label android">Android</div>
 
 Specifies the disabled state of the text view for testing purposes.
 
@@ -409,7 +409,7 @@ Specifies the disabled state of the text view for testing purposes.
 
 ---
 
-### `dynamicTypeRamp` <div class="label ios">iOS</div>
+### `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.
 
@@ -462,7 +462,7 @@ Specifies the largest possible scale a font can reach when `allowFontScaling` is
 
 ---
 
-### `minimumFontScale` <div class="label ios">iOS</div>
+### `minimumFontScale` <div className="label ios">iOS</div>
 
 Specifies the smallest possible scale a font can reach when `adjustsFontSizeToFit` is enabled. (values 0.01-1.0).
 
@@ -656,7 +656,7 @@ Lets the user select text, to use the native copy and paste functionality.
 
 ---
 
-### `selectionColor` <div class="label android">Android</div>
+### `selectionColor` <div className="label android">Android</div>
 
 The highlight color of the text.
 
@@ -674,7 +674,7 @@ The highlight color of the text.
 
 ---
 
-### `suppressHighlighting` <div class="label ios">iOS</div>
+### `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.
 
@@ -694,7 +694,7 @@ Used to locate this view in end-to-end tests.
 
 ---
 
-### `textBreakStrategy` <div class="label android">Android</div>
+### `textBreakStrategy` <div className="label android">Android</div>
 
 Set text break strategy on Android API Level 23+, possible values are `simple`, `highQuality`, `balanced`.
 
@@ -704,7 +704,7 @@ Set text break strategy on Android API Level 23+, possible values are `simple`,
 
 ---
 
-### `lineBreakStrategyIOS` <div class="label ios">iOS</div>
+### `lineBreakStrategyIOS` <div className="label ios">iOS</div>
 
 Set line break strategy on iOS 14+. Possible values are `none`, `standard`, `hangul-word` and `push-out`.
 
diff --git a/website/versioned_docs/version-0.81/textinput.md b/website/versioned_docs/version-0.81/textinput.md
index 8c2d0c1c413..3f407a8d168 100644
--- a/website/versioned_docs/version-0.81/textinput.md
+++ b/website/versioned_docs/version-0.81/textinput.md
@@ -174,7 +174,7 @@ The following values work across platforms:
 - `tel`
 - `username`
 
-<div class="label basic ios">iOS</div>
+<div className="label basic ios">iOS</div>
 
 The following values work on iOS only:
 
@@ -188,7 +188,7 @@ The following values work on iOS only:
 - `organization-title`
 - `url`
 
-<div class="label basic android">Android</div>
+<div className="label basic android">Android</div>
 
 The following values work on Android only:
 
@@ -261,7 +261,7 @@ If `true`, caret is hidden. The default value is `false`.
 
 ---
 
-### `clearButtonMode` <div class="label ios">iOS</div>
+### `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`.
 
@@ -271,7 +271,7 @@ When the clear button should appear on the right side of the text view. This pro
 
 ---
 
-### `clearTextOnFocus` <div class="label ios">iOS</div>
+### `clearTextOnFocus` <div className="label ios">iOS</div>
 
 If `true`, clears the text field automatically when editing begins.
 
@@ -291,7 +291,7 @@ If `true`, context menu is hidden. The default value is `false`.
 
 ---
 
-### `dataDetectorTypes` <div class="label ios">iOS</div>
+### `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.
 
@@ -322,7 +322,17 @@ Provides an initial value that will change when the user starts typing. Useful f
 
 ---
 
-### `cursorColor` <div class="label android">Android</div>
+### `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.
 
@@ -332,7 +342,7 @@ When provided it will set the color of the cursor (or "caret") in the component.
 
 ---
 
-### `disableFullscreenUI` <div class="label android">Android</div>
+### `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`.
 
@@ -352,7 +362,7 @@ If `false`, text is not editable. The default value is `true`.
 
 ---
 
-### `enablesReturnKeyAutomatically` <div class="label ios">iOS</div>
+### `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`.
 
@@ -392,7 +402,7 @@ The following values work on iOS only:
 
 ---
 
-### `importantForAutofill` <div class="label android">Android</div>
+### `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`.
 
@@ -408,7 +418,7 @@ Tells the operating system whether the individual fields in your app should be i
 
 ---
 
-### `inlineImageLeft` <div class="label android">Android</div>
+### `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
 
@@ -424,7 +434,7 @@ If defined, the provided image resource will be rendered on the left. The image
 
 ---
 
-### `inlineImagePadding` <div class="label android">Android</div>
+### `inlineImagePadding` <div className="label android">Android</div>
 
 Padding between the inline image, if any, and the text input itself.
 
@@ -434,7 +444,7 @@ Padding between the inline image, if any, and the text input itself.
 
 ---
 
-### `inputAccessoryViewID` <div class="label ios">iOS</div>
+### `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.
 
@@ -444,7 +454,7 @@ An optional identifier which links a custom [InputAccessoryView](inputaccessoryv
 
 ---
 
-### `inputAccessoryViewButtonLabel` <div class="label ios">iOS</div>
+### `inputAccessoryViewButtonLabel` <div className="label ios">iOS</div>
 
 An optional label that overrides the default [InputAccessoryView](inputaccessoryview.md) button label.
 
@@ -477,7 +487,7 @@ Support the following values:
 
 ---
 
-### `keyboardAppearance` <div class="label ios">iOS</div>
+### `keyboardAppearance` <div className="label ios">iOS</div>
 
 Determines the color of the keyboard.
 
@@ -491,7 +501,7 @@ Determines the color of the keyboard.
 
 Determines which keyboard to open, e.g.`numeric`.
 
-See screenshots of all the types [here](https://lefkowitz.me/2018/04/30/visual-guide-to-react-native-textinput-keyboardtype-options/).
+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:
 
@@ -525,6 +535,26 @@ The following values work on Android only:
 
 ---
 
+### `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:
@@ -743,7 +773,7 @@ If `true`, text is not editable. The default value is `false`.
 
 ---
 
-### `returnKeyLabel` <div class="label android">Android</div>
+### `returnKeyLabel` <div className="label android">Android</div>
 
 Sets the return key to the label. Use it instead of `returnKeyType`.
 
@@ -789,7 +819,7 @@ The following values work on iOS only:
 | --------------------------------------------------------------------------------------------------------------------------------- |
 | enum('done', 'go', 'next', 'search', 'send', 'none', 'previous', 'default', 'emergency-call', 'google', 'join', 'route', 'yahoo') |
 
-### `rejectResponderTermination` <div class="label ios">iOS</div>
+### `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`.
 
@@ -799,7 +829,7 @@ If `true`, allows TextInput to pass touch events to the parent component. This a
 
 ---
 
-### `rows` <div class="label android">Android</div>
+### `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.
 
@@ -809,7 +839,7 @@ Sets the number of lines for a `TextInput`. Use it with multiline set to `true`
 
 ---
 
-### `scrollEnabled` <div class="label ios">iOS</div>
+### `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}`.
 
@@ -849,7 +879,7 @@ The highlight, selection handle and cursor color of the text input.
 
 ---
 
-### `selectionHandleColor` <div class="label android">Android</div>
+### `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.
 
@@ -879,7 +909,7 @@ When `false`, it will prevent the soft keyboard from showing when the field is f
 
 ---
 
-### `smartInsertDelete` <div class="label ios">iOS</div>
+### `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.
 
@@ -889,7 +919,7 @@ If `false`, the iOS system will not insert an extra space after a paste operatio
 
 ---
 
-### `spellCheck` <div class="label ios">iOS</div>
+### `spellCheck` <div className="label ios">iOS</div>
 
 If `false`, disables spell-check style (i.e. red underlines). The default value is inherited from `autoCorrect`.
 
@@ -940,7 +970,7 @@ Possible values for `textAlign` are:
 
 ---
 
-### `textContentType` <div class="label ios">iOS</div>
+### `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.
 
@@ -1006,7 +1036,7 @@ Possible values for `textContentType` are:
 
 ---
 
-### `passwordRules` <div class="label ios">iOS</div>
+### `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/).
 
@@ -1042,7 +1072,7 @@ Note that not all Text styles are supported, an incomplete list of what is not s
 
 ---
 
-### `textBreakStrategy` <div class="label android">Android</div>
+### `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`.
 
@@ -1052,7 +1082,7 @@ Set text break strategy on Android API Level 23+, possible values are `simple`,
 
 ---
 
-### `underlineColorAndroid` <div class="label android">Android</div>
+### `underlineColorAndroid` <div className="label android">Android</div>
 
 The color of the `TextInput` underline.
 
@@ -1070,36 +1100,6 @@ The value to show for the text input. `TextInput` is a controlled component, whi
 | ------ |
 | string |
 
----
-
-### `lineBreakStrategyIOS` <div class="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 class="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'` |
-
----
-
-### `disableKeyboardShortcuts` <div class="label ios">iOS</div>
-
-If `true`, the keyboard shortcuts (undo/redo and copy buttons) are disabled. The default value is `false`.
-
-| Type |
-| ---- |
-| bool |
-
 ## Methods
 
 ### `.focus()`
diff --git a/website/versioned_docs/version-0.81/the-new-architecture/create-module-library.md b/website/versioned_docs/version-0.81/the-new-architecture/create-module-library.md
index 9f10e35a526..657ef9441bd 100644
--- a/website/versioned_docs/version-0.81/the-new-architecture/create-module-library.md
+++ b/website/versioned_docs/version-0.81/the-new-architecture/create-module-library.md
@@ -38,7 +38,7 @@ npx create-react-native-library@latest <Name of Your Library>
 
 Once the interactive prompt is done, the tool creates a folder whose structure looks like this in Visual Studio Code:
 
-<img class="half-size" alt="Folder structure after initializing a new library." src="/docs/assets/turbo-native-modules/c++visualstudiocode.webp" />
+<img className="half-size" alt="Folder structure after initializing a new library." src="/docs/assets/turbo-native-modules/c++visualstudiocode.webp" />
 
 Feel free to explore the code that has been created for you. However, the most important parts:
 
diff --git a/website/versioned_docs/version-0.81/touchablehighlight.md b/website/versioned_docs/version-0.81/touchablehighlight.md
index aea3968008d..b5427ecbd2b 100644
--- a/website/versioned_docs/version-0.81/touchablehighlight.md
+++ b/website/versioned_docs/version-0.81/touchablehighlight.md
@@ -138,7 +138,7 @@ The color of the underlay that will show through when the touch is active.
 
 ---
 
-### `hasTVPreferredFocus` <div class="label ios">iOS</div>
+### `hasTVPreferredFocus` <div className="label ios">iOS</div>
 
 _(Apple TV only)_ TV preferred focus (see documentation for the View component).
 
@@ -148,7 +148,7 @@ _(Apple TV only)_ TV preferred focus (see documentation for the View component).
 
 ---
 
-### `nextFocusDown` <div class="label android">Android</div>
+### `nextFocusDown` <div className="label android">Android</div>
 
 TV next focus down (see documentation for the View component).
 
@@ -158,7 +158,7 @@ TV next focus down (see documentation for the View component).
 
 ---
 
-### `nextFocusForward` <div class="label android">Android</div>
+### `nextFocusForward` <div className="label android">Android</div>
 
 TV next focus forward (see documentation for the View component).
 
@@ -168,7 +168,7 @@ TV next focus forward (see documentation for the View component).
 
 ---
 
-### `nextFocusLeft` <div class="label android">Android</div>
+### `nextFocusLeft` <div className="label android">Android</div>
 
 TV next focus left (see documentation for the View component).
 
@@ -178,7 +178,7 @@ TV next focus left (see documentation for the View component).
 
 ---
 
-### `nextFocusRight` <div class="label android">Android</div>
+### `nextFocusRight` <div className="label android">Android</div>
 
 TV next focus right (see documentation for the View component).
 
@@ -188,7 +188,7 @@ TV next focus right (see documentation for the View component).
 
 ---
 
-### `nextFocusUp` <div class="label android">Android</div>
+### `nextFocusUp` <div className="label android">Android</div>
 
 TV next focus up (see documentation for the View component).
 
diff --git a/website/versioned_docs/version-0.81/touchablenativefeedback.md b/website/versioned_docs/version-0.81/touchablenativefeedback.md
index b03ac6b2ed4..4cb291a607b 100644
--- a/website/versioned_docs/version-0.81/touchablenativefeedback.md
+++ b/website/versioned_docs/version-0.81/touchablenativefeedback.md
@@ -104,7 +104,7 @@ Check TouchableNativeFeedback.canUseNativeForeground() first, as this is only av
 
 ---
 
-### `hasTVPreferredFocus` <div class="label android">Android</div>
+### `hasTVPreferredFocus` <div className="label android">Android</div>
 
 TV preferred focus (see documentation for the View component).
 
@@ -114,7 +114,7 @@ TV preferred focus (see documentation for the View component).
 
 ---
 
-### `nextFocusDown` <div class="label android">Android</div>
+### `nextFocusDown` <div className="label android">Android</div>
 
 TV next focus down (see documentation for the View component).
 
@@ -124,7 +124,7 @@ TV next focus down (see documentation for the View component).
 
 ---
 
-### `nextFocusForward` <div class="label android">Android</div>
+### `nextFocusForward` <div className="label android">Android</div>
 
 TV next focus forward (see documentation for the View component).
 
@@ -134,7 +134,7 @@ TV next focus forward (see documentation for the View component).
 
 ---
 
-### `nextFocusLeft` <div class="label android">Android</div>
+### `nextFocusLeft` <div className="label android">Android</div>
 
 TV next focus left (see documentation for the View component).
 
@@ -144,7 +144,7 @@ TV next focus left (see documentation for the View component).
 
 ---
 
-### `nextFocusRight` <div class="label android">Android</div>
+### `nextFocusRight` <div className="label android">Android</div>
 
 TV next focus right (see documentation for the View component).
 
@@ -154,7 +154,7 @@ TV next focus right (see documentation for the View component).
 
 ---
 
-### `nextFocusUp` <div class="label android">Android</div>
+### `nextFocusUp` <div className="label android">Android</div>
 
 TV next focus up (see documentation for the View component).
 
diff --git a/website/versioned_docs/version-0.81/touchableopacity.md b/website/versioned_docs/version-0.81/touchableopacity.md
index 525effbefa4..90bd4693681 100644
--- a/website/versioned_docs/version-0.81/touchableopacity.md
+++ b/website/versioned_docs/version-0.81/touchableopacity.md
@@ -84,7 +84,7 @@ Determines what the opacity of the wrapped view should be when touch is active.
 
 ---
 
-### `hasTVPreferredFocus` <div class="label ios">iOS</div>
+### `hasTVPreferredFocus` <div className="label ios">iOS</div>
 
 _(Apple TV only)_ TV preferred focus (see documentation for the View component).
 
@@ -94,7 +94,7 @@ _(Apple TV only)_ TV preferred focus (see documentation for the View component).
 
 ---
 
-### `nextFocusDown` <div class="label android">Android</div>
+### `nextFocusDown` <div className="label android">Android</div>
 
 TV next focus down (see documentation for the View component).
 
@@ -104,7 +104,7 @@ TV next focus down (see documentation for the View component).
 
 ---
 
-### `nextFocusForward` <div class="label android">Android</div>
+### `nextFocusForward` <div className="label android">Android</div>
 
 TV next focus forward (see documentation for the View component).
 
@@ -114,7 +114,7 @@ TV next focus forward (see documentation for the View component).
 
 ---
 
-### `nextFocusLeft` <div class="label android">Android</div>
+### `nextFocusLeft` <div className="label android">Android</div>
 
 TV next focus left (see documentation for the View component).
 
@@ -124,7 +124,7 @@ TV next focus left (see documentation for the View component).
 
 ---
 
-### `nextFocusRight` <div class="label android">Android</div>
+### `nextFocusRight` <div className="label android">Android</div>
 
 TV next focus right (see documentation for the View component).
 
@@ -134,7 +134,7 @@ TV next focus right (see documentation for the View component).
 
 ---
 
-### `nextFocusUp` <div class="label android">Android</div>
+### `nextFocusUp` <div className="label android">Android</div>
 
 TV next focus up (see documentation for the View component).
 
diff --git a/website/versioned_docs/version-0.81/touchablewithoutfeedback.md b/website/versioned_docs/version-0.81/touchablewithoutfeedback.md
index f80cb4a0a03..40fdf10fc58 100644
--- a/website/versioned_docs/version-0.81/touchablewithoutfeedback.md
+++ b/website/versioned_docs/version-0.81/touchablewithoutfeedback.md
@@ -84,7 +84,7 @@ export default TouchableWithoutFeedbackExample;
 
 ## Props
 
-### `accessibilityIgnoresInvertColors` <div class="label ios">iOS</div>
+### `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.
 
@@ -116,7 +116,7 @@ Overrides the text that's read by the screen reader when the user interacts with
 
 ---
 
-### `accessibilityLanguage` <div class="label ios">iOS</div>
+### `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).
 
@@ -264,7 +264,7 @@ Defines a string value that labels an interactive element.
 
 ---
 
-### `aria-live` <div class="label android">Android</div>
+### `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.
 
@@ -278,7 +278,7 @@ Indicates that an element will be updated, and describes the types of updates th
 
 ---
 
-### `aria-modal` <div class="label ios">iOS</div>
+### `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.
 
@@ -518,7 +518,7 @@ Used to locate this view in end-to-end tests.
 
 ---
 
-### `touchSoundDisabled` <div class="label android">Android</div>
+### `touchSoundDisabled` <div className="label android">Android</div>
 
 If true, doesn't play a system sound on touch.
 
diff --git a/website/versioned_docs/version-0.81/transforms.md b/website/versioned_docs/version-0.81/transforms.md
index 77e72bec67c..a88c207ad7a 100644
--- a/website/versioned_docs/version-0.81/transforms.md
+++ b/website/versioned_docs/version-0.81/transforms.md
@@ -211,19 +211,18 @@ The `transformOrigin` property sets the origin for a view's transformations. The
 
 # Example
 
-```SnackPlayer name=TransformOrigin%20Example&supportedPlatforms=ios,android
-import React, {useEffect} from 'react';
+```SnackPlayer name=TransformOrigin%20Example
+import React, {useEffect, useRef} from 'react';
 import {
   Animated,
   View,
   StyleSheet,
   Easing,
-  useAnimatedValue,
 } from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
 const App = () => {
-  const rotateAnim = useAnimatedValue(0);
+  const rotateAnim = useRef(new Animated.Value(0)).current;
 
   useEffect(() => {
     Animated.loop(
diff --git a/website/versioned_docs/version-0.81/turbo-native-modules-ios.md b/website/versioned_docs/version-0.81/turbo-native-modules-ios.md
index 631963b5ade..14585d220ce 100644
--- a/website/versioned_docs/version-0.81/turbo-native-modules-ios.md
+++ b/website/versioned_docs/version-0.81/turbo-native-modules-ios.md
@@ -18,27 +18,27 @@ cd ios
 open TurboModuleExample.xcworkspace
 ```
 
-<img class="half-size" alt="Open Xcode Workspace" src="/docs/assets/turbo-native-modules/xcode/1.webp" />
+<img className="half-size" alt="Open Xcode Workspace" src="/docs/assets/turbo-native-modules/xcode/1.webp" />
 
 2. Right click on app and select <code>New Group</code>, call the new group `NativeLocalStorage`.
 
-<img class="half-size" alt="Right click on app and select New Group" src="/docs/assets/turbo-native-modules/xcode/2.webp" />
+<img className="half-size" alt="Right click on app and select New Group" src="/docs/assets/turbo-native-modules/xcode/2.webp" />
 
 3. In the `NativeLocalStorage` group, create <code>New</code>→<code>File from Template</code>.
 
-<img class="half-size" alt="Create a new file using the Cocoa Touch Class template" src="/docs/assets/turbo-native-modules/xcode/3.webp" />
+<img className="half-size" alt="Create a new file using the Cocoa Touch Class template" src="/docs/assets/turbo-native-modules/xcode/3.webp" />
 
 4. Use the <code>Cocoa Touch Class</code>.
 
-<img class="half-size" alt="Use the Cocoa Touch Class template" src="/docs/assets/turbo-native-modules/xcode/4.webp"  />
+<img className="half-size" alt="Use the Cocoa Touch Class template" src="/docs/assets/turbo-native-modules/xcode/4.webp"  />
 
 5. Name the Cocoa Touch Class <code>RCTNativeLocalStorage</code> with the <code>Objective-C</code> language.
 
-<img class="half-size" alt="Create an Objective-C RCTNativeLocalStorage class" src="/docs/assets/turbo-native-modules/xcode/5.webp" />
+<img className="half-size" alt="Create an Objective-C RCTNativeLocalStorage class" src="/docs/assets/turbo-native-modules/xcode/5.webp" />
 
 6. Rename <code>RCTNativeLocalStorage.m</code> → <code>RCTNativeLocalStorage.mm</code> making it an Objective-C++ file.
 
-<img class="half-size" alt="Convert to and Objective-C++ file" src="/docs/assets/turbo-native-modules/xcode/6.webp" />
+<img className="half-size" alt="Convert to and Objective-C++ file" src="/docs/assets/turbo-native-modules/xcode/6.webp" />
 
 ## Implement localStorage with NSUserDefaults
 
diff --git a/website/versioned_docs/version-0.81/typescript.md b/website/versioned_docs/version-0.81/typescript.md
index 00f885cd44f..3a056bcc9d0 100644
--- a/website/versioned_docs/version-0.81/typescript.md
+++ b/website/versioned_docs/version-0.81/typescript.md
@@ -52,7 +52,9 @@ This command adds the latest version of every dependency. The versions may need
 
 3. Rename a JavaScript file to be `*.tsx`
 
-> You should leave the `./index.js` entrypoint file as it is otherwise you may run into an issue when it comes to bundling a production build.
+:::warning
+You should leave the `./index.js` entrypoint file as it is otherwise you may run into an issue when it comes to bundling a production build.
+:::
 
 4. Run `tsc` to type-check your new TypeScript files.
 
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 1b1d008308f..cd088bfc99f 100644
--- a/website/versioned_docs/version-0.81/view-style-props.md
+++ b/website/versioned_docs/version-0.81/view-style-props.md
@@ -183,7 +183,7 @@ export default App;
 
 ---
 
-### `borderCurve` <div class="label ios">iOS</div>
+### `borderCurve` <div className="label ios">iOS</div>
 
 On iOS 13+, it is possible to change the corner curve of borders.
 
@@ -328,7 +328,7 @@ These shadows can be composed together so that a single `boxShadow` can be compr
 | --------------------------- |
 | array of BoxShadowValue ojects \| string |
 
-### `cursor` <div class="label ios">iOS</div>
+### `cursor` <div className="label ios">iOS</div>
 
 On iOS 17+, Setting to `pointer` allows hover effects when a pointer (such as a trackpad or stylus on iOS, or the users' gaze on visionOS) is over the view.
 
@@ -338,7 +338,7 @@ On iOS 17+, Setting to `pointer` allows hover effects when a pointer (such as a
 
 ---
 
-### `elevation` <div class="label android">Android</div>
+### `elevation` <div className="label android">Android</div>
 
 Sets the elevation of a view, using Android's underlying [elevation API](https://developer.android.com/training/material/shadows-clipping.html#Elevation). This adds a drop shadow to the item and affects z-order for overlapping views. Only supported on Android 5.0+, has no effect on earlier versions.
 
@@ -365,7 +365,7 @@ The following filter functions work across all platforms:
 Due to issues with performance and spec compliance, these are the only two filter functions available on iOS. There are plans to explore some potential workarounds using SwiftUI instead of UIKit for this implementation.
 :::
 
-<div class="label basic android">Android</div>
+<div className="label basic android">Android</div>
 
 The following filter functions work on Android only:
 
diff --git a/website/versioned_docs/version-0.81/view.md b/website/versioned_docs/version-0.81/view.md
index 8f60e598171..f26406d2412 100644
--- a/website/versioned_docs/version-0.81/view.md
+++ b/website/versioned_docs/version-0.81/view.md
@@ -55,7 +55,7 @@ See the [Accessibility guide](accessibility.md#accessibility-actions) for more i
 
 ---
 
-### `accessibilityElementsHidden` <div class="label ios">iOS</div>
+### `accessibilityElementsHidden` <div className="label ios">iOS</div>
 
 A value indicating whether the accessibility elements contained within this accessibility element are hidden. Default is `false`.
 
@@ -77,7 +77,7 @@ An accessibility hint helps users understand what will happen when they perform
 
 ---
 
-### `accessibilityLanguage` <div class="label ios">iOS</div>
+### `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).
 
@@ -89,7 +89,7 @@ See the [iOS `accessibilityLanguage` doc](https://developer.apple.com/documentat
 
 ---
 
-### `accessibilityIgnoresInvertColors` <div class="label ios">iOS</div>
+### `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.
 
@@ -111,7 +111,7 @@ Overrides the text that's read by the screen reader when the user interacts with
 
 ---
 
-### `accessibilityLiveRegion` <div class="label android">Android</div>
+### `accessibilityLiveRegion` <div className="label android">Android</div>
 
 Indicates to accessibility services whether the user should be notified when this view changes. Works for Android API >= 19 only. Possible values:
 
@@ -192,7 +192,7 @@ See the [Accessibility guide](accessibility.md#accessibilityvalue-ios-android) f
 
 ---
 
-### `accessibilityViewIsModal` <div class="label ios">iOS</div>
+### `accessibilityViewIsModal` <div className="label ios">iOS</div>
 
 A value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver. Default is `false`.
 
@@ -274,7 +274,7 @@ Defines a string value that labels an interactive element.
 
 ---
 
-### `aria-labelledby` <div class="label android">Android</div>
+### `aria-labelledby` <div className="label android">Android</div>
 
 Identifies the element that labels the element it is applied to. The value of `aria-labelledby` should match the [`nativeID`](view.md#nativeid) of the related element:
 
@@ -291,7 +291,7 @@ Identifies the element that labels the element it is applied to. The value of `a
 
 ---
 
-### `aria-live` <div class="label android">Android</div>
+### `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.
 
@@ -305,7 +305,7 @@ Indicates that an element will be updated, and describes the types of updates th
 
 ---
 
-### `aria-modal` <div class="label ios">iOS</div>
+### `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.
 
@@ -383,7 +383,7 @@ Setting to false prevents direct children of the view from being removed from th
 
 ---
 
-### `focusable` <div class="label android">Android</div>
+### `focusable` <div className="label android">Android</div>
 
 Whether this `View` should be focusable with a non-touch input device, eg. receive focus with a hardware keyboard.
 
@@ -419,7 +419,7 @@ Used to locate this view from native classes. Has precedence over `nativeID` pro
 
 ---
 
-### `importantForAccessibility` <div class="label android">Android</div>
+### `importantForAccessibility` <div className="label android">Android</div>
 
 Controls how view is important for accessibility which is if it fires accessibility events and if it is reported to accessibility services that query the screen. Works for Android only.
 
@@ -462,7 +462,7 @@ Rendering offscreen to preserve correct alpha behavior is extremely expensive an
 
 ---
 
-### `nextFocusDown` <div class="label android">Android</div>
+### `nextFocusDown` <div className="label android">Android</div>
 
 Designates the next view to receive focus when the user navigates down. See the [Android documentation](https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusDown).
 
@@ -472,7 +472,7 @@ Designates the next view to receive focus when the user navigates down. See the
 
 ---
 
-### `nextFocusForward` <div class="label android">Android</div>
+### `nextFocusForward` <div className="label android">Android</div>
 
 Designates the next view to receive focus when the user navigates forward. See the [Android documentation](https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusForward).
 
@@ -482,7 +482,7 @@ Designates the next view to receive focus when the user navigates forward. See t
 
 ---
 
-### `nextFocusLeft` <div class="label android">Android</div>
+### `nextFocusLeft` <div className="label android">Android</div>
 
 Designates the next view to receive focus when the user navigates left. See the [Android documentation](https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusLeft).
 
@@ -492,7 +492,7 @@ Designates the next view to receive focus when the user navigates left. See the
 
 ---
 
-### `nextFocusRight` <div class="label android">Android</div>
+### `nextFocusRight` <div className="label android">Android</div>
 
 Designates the next view to receive focus when the user navigates right. See the [Android documentation](https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusRight).
 
@@ -502,7 +502,7 @@ Designates the next view to receive focus when the user navigates right. See the
 
 ---
 
-### `nextFocusUp` <div class="label android">Android</div>
+### `nextFocusUp` <div className="label android">Android</div>
 
 Designates the next view to receive focus when the user navigates up. See the [Android documentation](https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusUp).
 
@@ -524,7 +524,7 @@ See the [Accessibility guide](accessibility.md#accessibility-actions) for more i
 
 ---
 
-### `onAccessibilityEscape` <div class="label ios">iOS</div>
+### `onAccessibilityEscape` <div className="label ios">iOS</div>
 
 When `accessible` is `true`, the system will invoke this function when the user performs the escape gesture.
 
@@ -534,7 +534,7 @@ When `accessible` is `true`, the system will invoke this function when the user
 
 ---
 
-### `onAccessibilityTap` <div class="label ios">iOS</div>
+### `onAccessibilityTap` <div className="label ios">iOS</div>
 
 When `accessible` is true, the system will try to invoke this function when the user performs accessibility tap gesture.
 
@@ -556,7 +556,7 @@ This event is fired immediately once the layout has been calculated, but the new
 
 ---
 
-### `onMagicTap` <div class="label ios">iOS</div>
+### `onMagicTap` <div className="label ios">iOS</div>
 
 When `accessible` is `true`, the system will invoke this function when the user performs the magic tap gesture.
 
@@ -712,7 +712,7 @@ This is a reserved performance property exposed by `RCTView` and is useful for s
 
 ---
 
-### `renderToHardwareTextureAndroid` <div class="label android">Android</div>
+### `renderToHardwareTextureAndroid` <div className="label android">Android</div>
 
 Whether this `View` should render itself (and all of its children) into a single hardware texture on the GPU.
 
@@ -734,7 +734,7 @@ On Android, this is useful for animations and interactions that only modify opac
 
 ---
 
-### `shouldRasterizeIOS` <div class="label ios">iOS</div>
+### `shouldRasterizeIOS` <div className="label ios">iOS</div>
 
 Whether this `View` should be rendered as a bitmap before compositing.
 
@@ -756,7 +756,7 @@ Rasterization incurs an off-screen drawing pass and the bitmap consumes memory.
 
 ---
 
-### `tabIndex` <div class="label android">Android</div>
+### `tabIndex` <div className="label android">Android</div>
 
 Whether this `View` should be focusable with a non-touch input device, eg. receive focus with a hardware keyboard.
 Supports the following values:
diff --git a/website/versioned_docs/version-0.81/virtualizedlist.md b/website/versioned_docs/version-0.81/virtualizedlist.md
index de9a07b666e..1bf19aa1806 100644
--- a/website/versioned_docs/version-0.81/virtualizedlist.md
+++ b/website/versioned_docs/version-0.81/virtualizedlist.md
@@ -166,7 +166,7 @@ Opaque data type passed to `getItem` and `getItemCount` to retrieve items.
 
 ---
 
-### <div class="label required basic">Required</div> **`getItem`**
+### <div className="label required basic">Required</div> **`getItem`**
 
 ```tsx
 (data: any, index: number) => any;
@@ -180,7 +180,7 @@ A generic accessor for extracting an item from any sort of data blob.
 
 ---
 
-### <div class="label required basic">Required</div> **`getItemCount`**
+### <div className="label required basic">Required</div> **`getItemCount`**
 
 ```tsx
 (data: any) => number;
@@ -194,7 +194,7 @@ Determines how many items are in the data blob.
 
 ---
 
-### <div class="label required basic">Required</div> **`renderItem`**
+### <div className="label required basic">Required</div> **`renderItem`**
 
 ```tsx
 (info: any) => ?React.Element<any>