Tweaks

Author: satya164

versioned_docs/version-7.x/bottom-tab-navigator.md

@@ -271,11 +271,11 @@ Style object for the tab label.
 Example:
 
 ```js
-    tabBarLabelStyle: {
-      fontSize: 16,
-      fontFamily: 'Georgia',
-      fontWeight: 300,
-    },
+tabBarLabelStyle: {
+  fontSize: 16,
+  fontFamily: 'Georgia',
+  fontWeight: 300,
+},
 ```
 
 #### `tabBarIcon`
@@ -301,10 +301,10 @@ Style for the badge on the tab icon. You can specify a background color or text
 Example:
 
 ```js
-    tabBarBadgeStyle: {
-      color: 'black',
-      backgroundColor: 'yellow',
-    },
+tabBarBadgeStyle: {
+  color: 'black',
+  backgroundColor: 'yellow',
+},
 ```
 
 #### `tabBarAccessibilityLabel`

versioned_docs/version-7.x/deep-linking.md

@@ -207,11 +207,11 @@ To make sure Universal Links work in your app, you also need to setup [Associate
 If you're using React Navigation within a hybrid app - an iOS app that has both Swift/ObjC and React Native parts - you may be missing the `RCTLinkingIOS` subspec in your `Podfile`, which is installed by default in new React Native projects. To add this, ensure your `Podfile` looks like the following:
 
 ```pod
- pod 'React', :path => '../node_modules/react-native', :subspecs => [
-    . . . // other subspecs
-    'RCTLinkingIOS',
-    . . .
-  ]
+pod 'React', :path => '../node_modules/react-native', :subspecs => [
+  . . . // other subspecs
+  'RCTLinkingIOS',
+  . . .
+]
 ```
 
 ### Setup on Android

versioned_docs/version-7.x/drawer-navigator.md

@@ -298,7 +298,7 @@ Color for the icon and label in the active item in the drawer.
 ![Drawer active tint color](/assets/navigators/drawer/drawerActiveTintColor.png)
 
 ```js
-   drawerActiveTintColor: 'green',
+drawerActiveTintColor: 'green',
 ```
 
 #### `drawerActiveBackgroundColor`
@@ -308,13 +308,13 @@ Background color for the active item in the drawer.
 ![Drawer active background color](/assets/navigators/drawer/drawerActiveBackgroundColor.png)
 
 ```js
-    screenOptions={{
-      drawerActiveTintColor: 'white',
-      drawerActiveBackgroundColor: '#003CB3',
-      drawerLabelStyle: {
-        color: 'white',
-      },
-    }}
+screenOptions={{
+  drawerActiveTintColor: 'white',
+  drawerActiveBackgroundColor: '#003CB3',
+  drawerLabelStyle: {
+    color: 'white',
+  },
+}}
 ```
 
 #### `drawerInactiveTintColor`
@@ -334,12 +334,12 @@ Style object for the single item, which can contain an icon and/or a label.
 Example:
 
 ```js
-   drawerItemStyle: {
-    backgroundColor: '#9dd3c8',
-    borderColor: 'black',
-    borderWidth: 2,
-    opacity: 0.6,
-  },
+drawerItemStyle: {
+  backgroundColor: '#9dd3c8',
+  borderColor: 'black',
+  borderWidth: 2,
+  opacity: 0.6,
+},
 ```
 
 #### `drawerLabelStyle`
@@ -351,11 +351,11 @@ Style object to apply to the `Text` style inside content section which renders a
 Example:
 
 ```js
-   drawerLabelStyle: {
-      color: 'black',
-      fontSize: 20,
-      fontFamily: 'Georgia',
-    },
+drawerLabelStyle: {
+  color: 'black',
+  fontSize: 20,
+  fontFamily: 'Georgia',
+},
 ```
 
 #### `drawerContentContainerStyle`

versioned_docs/version-7.x/native-stack-navigator.md

@@ -688,12 +688,12 @@ Only supported on iOS.
 Example:
 
 ```js
-    headerLargeTitleStyle: {
-      fontFamily: 'Georgia',
-      fontSize: 22,
-      fontWeight: '500',
-      color: 'blue',
-    },
+headerLargeTitleStyle: {
+  fontFamily: 'Georgia',
+  fontSize: 22,
+  fontWeight: '500',
+  color: 'blue',
+},
 ```
 
 #### `headerStyle`
@@ -726,83 +726,83 @@ Supported values:
 
 <div className="options-grid">
 
-- <img src="/assets/navigators/native-stack/header-blur-effect-extra-light.png" alt="Header blur effect extraLight" />
+- ![Header blur effect extraLight](/assets/navigators/native-stack/header-blur-effect-extra-light.png)
 
   `extraLight`
 
-- <img src="/assets/navigators/native-stack/header-blur-effect-light.png" alt="Header blur effect light" />
+- ![Header blur effect light](/assets/navigators/native-stack/header-blur-effect-light.png)
 
   `light`
 
-- <img src="/assets/navigators/native-stack/header-blur-effect-regular.png" alt="Header blur effect regular" />
+- ![Header blur effect regular](/assets/navigators/native-stack/header-blur-effect-regular.png)
 
   `regular`
 
-- <img src="/assets/navigators/native-stack/header-blur-effect-prominent.png" alt="Header blur effect prominent" />
+- ![Header blur effect prominent](/assets/navigators/native-stack/header-blur-effect-prominent.png)
 
   `prominent`
 
-- <img src="/assets/navigators/native-stack/header-blur-effect-system-ultra-thin-material.png" alt="Header blur effect systemUltraThinMaterial" />
+- ![Header blur effect systemUltraThinMaterial](/assets/navigators/native-stack/header-blur-effect-system-ultra-thin-material.png)
 
   `systemUltraThinMaterial`
 
-- <img src="/assets/navigators/native-stack/header-blur-effect-system-thin-material.png" alt="Header blur effect systemThinMaterial" />
+- ![Header blur effect systemThinMaterial](/assets/navigators/native-stack/header-blur-effect-system-thin-material.png)
 
   `systemThinMaterial`
 
-- <img src="/assets/navigators/native-stack/header-blur-effect-system-material.png" alt="Header blur effect systemMaterial" />
+- ![Header blur effect systemMaterial](/assets/navigators/native-stack/header-blur-effect-system-material.png)
 
   `systemMaterial`
 
-- <img src="/assets/navigators/native-stack/header-blur-effect-system-thick-material.png" alt="Header blur effect systemThickMaterial" />
+- ![Header blur effect systemThickMaterial](/assets/navigators/native-stack/header-blur-effect-system-thick-material.png)
 
   `systemThickMaterial`
 
-- <img src="/assets/navigators/native-stack/header-blur-effect-system-chrome-material.png" alt="Header blur effect systemChromeMaterial" />
+- ![Header blur effect systemChromeMaterial](/assets/navigators/native-stack/header-blur-effect-system-chrome-material.png)
 
   `systemChromeMaterial`
 
-- <img src="/assets/navigators/native-stack/header-blur-effect-system-ultra-thin-material-light.png" alt="Header blur effect systemUltraThinMaterialLight" />
+- ![Header blur effect systemUltraThinMaterialLight](/assets/navigators/native-stack/header-blur-effect-system-ultra-thin-material-light.png)
 
   `systemUltraThinMaterialLight`
 
-- <img src="/assets/navigators/native-stack/header-blur-effect-system-thin-material-light.png" alt="Header blur effect systemThinMaterialLight" />
+- ![Header blur effect systemThinMaterialLight](/assets/navigators/native-stack/header-blur-effect-system-thin-material-light.png)
 
   `systemThinMaterialLight`
 
-- <img src="/assets/navigators/native-stack/header-blur-effect-system-material-light.png" alt="Header blur effect systemMaterialLight" />
+- ![Header blur effect systemMaterialLight](/assets/navigators/native-stack/header-blur-effect-system-material-light.png)
 
   `systemMaterialLight`
 
-- <img src="/assets/navigators/native-stack/header-blur-effect-system-thick-material-light.png" alt="Header blur effect systemThickMaterialLight" />
+- ![Header blur effect systemThickMaterialLight](/assets/navigators/native-stack/header-blur-effect-system-thick-material-light.png)
 
   `systemThickMaterialLight`
 
-- <img src="/assets/navigators/native-stack/header-blur-effect-system-chrome-material-light.png" alt="Header blur effect systemChromeMaterialLight" />
+- ![Header blur effect systemChromeMaterialLight](/assets/navigators/native-stack/header-blur-effect-system-chrome-material-light.png)
 
   `systemChromeMaterialLight`
 
-- <img src="/assets/navigators/native-stack/header-blur-effect-dark.png" alt="Header blur effect dark" />
+- ![Header blur effect dark](/assets/navigators/native-stack/header-blur-effect-dark.png)
 
   `dark`
 
-- <img src="/assets/navigators/native-stack/header-blur-effect-system-ultra-thin-material-dark.png" alt="Header blur effect systemUltraThinMaterialDark" />
+- ![Header blur effect systemUltraThinMaterialDark](/assets/navigators/native-stack/header-blur-effect-system-ultra-thin-material-dark.png)
 
   `systemUltraThinMaterialDark`
 
-- <img src="/assets/navigators/native-stack/header-blur-effect-system-thin-material-dark.png" alt="Header blur effect systemThinMaterialDark" />
+- ![Header blur effect systemThinMaterialDark](/assets/navigators/native-stack/header-blur-effect-system-thin-material-dark.png)
 
   `systemThinMaterialDark`
 
-- <img src="/assets/navigators/native-stack/header-blur-effect-system-material-dark.png" alt="Header blur effect systemMaterialDark" />
+- ![Header blur effect systemMaterialDark](/assets/navigators/native-stack/header-blur-effect-system-material-dark.png)
 
   `systemMaterialDark`
 
-- <img src="/assets/navigators/native-stack/header-blur-effect-system-thick-material-dark.png" alt="Header blur effect systemThickMaterialDark" />
+- ![Header blur effect systemThickMaterialDark](/assets/navigators/native-stack/header-blur-effect-system-thick-material-dark.png)
 
   `systemThickMaterialDark`
 
-- <img src="/assets/navigators/native-stack/header-blur-effect-system-chrome-material-dark.png" alt="Header blur effect systemChromeMaterialDark" />
+- ![Header blur effect systemChromeMaterialDark](/assets/navigators/native-stack/header-blur-effect-system-chrome-material-dark.png)
 
   `systemChromeMaterialDark`
 
@@ -823,14 +823,14 @@ Function which returns a React Element to render as the background of the header
 Example:
 
 ```js
-     headerBackground: () => (
-      <LinearGradient
-        colors={['#c17388', '#90306f']}
-        style={{ flex: 1 }}
-        start={{ x: 0, y: 0 }}
-        end={{ x: 1, y: 0 }}
-      />
-      ),
+headerBackground: () => (
+  <LinearGradient
+    colors={['#c17388', '#90306f']}
+    style={{ flex: 1 }}
+    start={{ x: 0, y: 0 }}
+    end={{ x: 1, y: 0 }}
+  />
+),
 ```
 
 #### `headerTintColor`
@@ -849,11 +849,11 @@ Function which returns a React Element to display on the left side of the header
 Example:
 
 ```js
-    headerLeft: () => (
-      <MaterialCommunityIcons name="map" color="gray" size={36} />
-    ),
-    headerBackVisible: true,
-    headerBackTitle: 'Back',
+headerLeft: () => (
+  <MaterialCommunityIcons name="map" color="gray" size={36} />
+),
+headerBackVisible: true,
+headerBackTitle: 'Back',
 ```
 
 #### `unstable_headerLeftItems`
@@ -962,12 +962,12 @@ Style object for header title. Supported properties:
 Example:
 
 ```js
-    headerTitleStyle: {
-      color: 'blue',
-      fontSize: 22,
-      fontFamily: 'Georgia',
-      fontWeight: 300,
-    },
+headerTitleStyle: {
+  color: 'blue',
+  fontSize: 22,
+  fontFamily: 'Georgia',
+  fontWeight: 300,
+},
 ```
 
 #### `headerSearchBarOptions`

versioned_docs/version-7.x/stack-navigator.md

@@ -27,7 +27,7 @@ sidebar_label: Stack
 Stack Navigator provides a way for your app to transition between screens where each new screen is placed on top of a stack.
 
 <details>
-<summary>Comparison with [Native Stack](native-stack-navigator.md)</summary>
+<summary>Comparison with [Native Stack Navigator](native-stack-navigator.md)</summary>
 
 The Stack navigator is implemented in JavaScript and mimics the familiar iOS and Android look & feel. Since it's a custom implementation, it is extremely customizable.
 

versioned_docs/version-8.x/deep-linking.md

@@ -207,11 +207,11 @@ To make sure Universal Links work in your app, you also need to setup [Associate
 If you're using React Navigation within a hybrid app - an iOS app that has both Swift/ObjC and React Native parts - you may be missing the `RCTLinkingIOS` subspec in your `Podfile`, which is installed by default in new React Native projects. To add this, ensure your `Podfile` looks like the following:
 
 ```pod
- pod 'React', :path => '../node_modules/react-native', :subspecs => [
-    . . . // other subspecs
-    'RCTLinkingIOS',
-    . . .
-  ]
+pod 'React', :path => '../node_modules/react-native', :subspecs => [
+  . . . // other subspecs
+  'RCTLinkingIOS',
+  . . .
+]
 ```
 
 ### Setup on Android

versioned_docs/version-8.x/drawer-navigator.md

@@ -390,7 +390,7 @@ Color for the icon and label in the active item in the drawer.
 ![Drawer active tint color](/assets/navigators/drawer/drawerActiveTintColor.png)
 
 ```js
-   drawerActiveTintColor: 'green',
+drawerActiveTintColor: 'green',
 ```
 
 #### `drawerActiveBackgroundColor`
@@ -400,13 +400,13 @@ Background color for the active item in the drawer.
 ![Drawer active background color](/assets/navigators/drawer/drawerActiveBackgroundColor.png)
 
 ```js
-    screenOptions={{
-      drawerActiveTintColor: 'white',
-      drawerActiveBackgroundColor: '#003CB3',
-      drawerLabelStyle: {
-        color: 'white',
-      },
-    }}
+screenOptions={{
+  drawerActiveTintColor: 'white',
+  drawerActiveBackgroundColor: '#003CB3',
+  drawerLabelStyle: {
+    color: 'white',
+  },
+}}
 ```
 
 #### `drawerInactiveTintColor`
@@ -426,12 +426,12 @@ Style object for the single item, which can contain an icon and/or a label.
 Example:
 
 ```js
-   drawerItemStyle: {
-    backgroundColor: '#9dd3c8',
-    borderColor: 'black',
-    borderWidth: 2,
-    opacity: 0.6,
-  },
+drawerItemStyle: {
+  backgroundColor: '#9dd3c8',
+  borderColor: 'black',
+  borderWidth: 2,
+  opacity: 0.6,
+},
 ```
 
 #### `drawerLabelStyle`
@@ -443,11 +443,11 @@ Style object to apply to the `Text` style inside content section which renders a
 Example:
 
 ```js
-   drawerLabelStyle: {
-      color: 'black',
-      fontSize: 20,
-      fontFamily: 'Georgia',
-    },
+drawerLabelStyle: {
+  color: 'black',
+  fontSize: 20,
+  fontFamily: 'Georgia',
+},
 ```
 
 #### `drawerContentContainerStyle`