GeekyAnts · surajahmed · Sep 20, 2021 · Sep 8, 2021 · Sep 20, 2021 · Sep 20, 2021
diff --git a/docs/alert.md b/docs/alert.md
@@ -13,8 +13,8 @@ NativeBase exports 5 Alert related components:
 
 - `Alert`: The wrapper for alert components.
 - `Alert.Icon`: The visual icon for the alert that changes based on the `status` prop.
-- `Alert.Title`: The title of the alert to be announced by screen readers.
-- `Alert.Description`: The description of the alert to be announced by screen readers.
+<!-- - `Alert.Title`: The title of the alert to be announced by screen readers. -->
+<!-- - `Alert.Description`: The description of the alert to be announced by screen readers. -->
 
 ```jsx
 import { Alert } from 'native-base';

diff --git a/docs/migration/v3xtov32.md b/docs/migration/v3xtov32.md
@@ -7,116 +7,38 @@ As we continue to improve NativeBase v3 we got a lot of feature requests and we
 
 To do that we had to make some changes to our theme in `v3.2.0`. These are breaking changes if you are using some of the tokens in your project. To make it easy for you to upgrade, we are providing three options:
 
-## Option 1 - Extend previous version's theme for backward compatibility
+## Extend previous version's theme for backward compatibility
 
-You can use this CLI tool to upgrade to `v3.2.0` and run a codemmod that adds a backward compatible theme to your code.
-
-```bash
-npx native-base-upgrade
-```
-
-Please follow the instructions after running this. The codemod will add a backward compatible theme to your `NativeBaseProvider`.
-
-If you want to do this manually, you can add this theme to your provider which preserves all the old token that were changed or removed in v3.2.0.
+You need to add `v3CompatibleTheme` to your `NativeBaseProvider` which preserves all the old token that were changed or removed in v3.2.0.
 
 ```jsx
-import { NativeBaseProvider, extendTheme } from "native-base";
-
-const compatibilityTheme = {
-  lineHeights: {
-    none: "1",
-    shorter: "1.25",
-    short: "1.375",
-    base: "1.5",
-    tall: "1.625",
-    taller: "2",
-    3: "12px",
-    4: "16px",
-    5: "20px",
-    6: "24px",
-    7: "28px",
-    8: "32px",
-    9: "36px",
-    10: "40px",
-  },
-  letterSpacings: {
-    xxs: "-1.5",
-    xs: "-0.5",
-    sm: "0",
-    md: "0.1",
-    lg: "0.15",
-    xl: "0.25",
-    "2xl": "0.4",
-    "3xl": "0.5",
-    "4xl": "1.25",
-    "5xl": "1.5",
-  },
-  fontSizes: {
-    xxs: "10",
-  },
-  radii: {
-    sm: "2",
-    md: "4",
-    lg: "6",
-    xl: "8",
-    pill: "25",
-  },
-  borderWidth: {
-    none: "0",
-  },
-};
+import { NativeBaseProvider, extendTheme, v3CompatibleTheme } from "native-base";
+
 // ...
 const yourCustomTheme = {
   // ...
 }
 
 <NativeBaseProvider
-  theme={extendTheme(compatibilityTheme, yourCustomTheme)}
+  theme={extendTheme(v3CompatibleTheme, yourCustomTheme)}
 >
 </NativeBaseProvider>
 ```
 
-## Option 2 - Upgrade manually with new theme tokens
-
-If you choose this option, you won't have to carry the baggage of older theme for compatibility. To upgrade manually to `v3.2.0`, follow these steps:
+## Handling breaking changes
 
-1. Find if any of the tokens on the left-hand side exist in your project for `lineHeight`, `letterSpacing`, `borderRadius` or `fontSize`, and replace them with the new values/tokens from the right-hand side:
+Below is a rough account of the breaking API changes as well as the minimal change to migrate
 
-   ```js
-   {
-     // For lineHeight
-     "none": "1px",
-     "shorter": "1.25px",
-     "short": "1.375px",
-     "base": "1.5px",
-     "tall": "1.625px",
-     "taller": "2px",
-     "3": "12px",
-     "4": "2xs",
-     "5": "sm",
-     "6": "lg",
-     "7": "xl",
-     "8": "2xl",
-     "9": "36px",
-     "10": "3xl"
 
-     // For letterSpacing
-     "xxs": "2xs"
+### Alert:
 
-     // For borderRadius
-     "sm": "xs",
-     "md": "sm",
-     "lg": "md",
-     "xl": "lg",
-     "pill": "25"
+* Removed `Alert.Title`. Use `Text` component instead.
+* Removed `Alert.Description`. Use `Text` component instead.
 
-     // For fontSize
-     "xxs": "2xs"
 
-   }
-   ```
+## Note:
 
-2. We have introduced [strict mode](../strict-mode.md) in `v3.2.0` which is `off` by default. If you don't want to have strict mode, step 1 is enough. If you want to comply with the strict mode, you also need to do these:
+We have introduced [strict mode](../strict-mode.md) in `v3.2.0` which is `off` by default. If you don't want to have strict mode, step 1 is enough. If you want to comply with the strict mode, you also need to do these:
 
    1. All utility props which take theme tokens as values, now take only string values as a valid type
 
@@ -142,14 +64,4 @@ If you choose this option, you won't have to carry the baggage of older theme fo
         <Icon as={<Ionicons name="md-checkmark-circle" />} />
         /* incorrect */
         <Icon as={<Ionicons />} name="md-checkmark-circle" />
-      ```
-
-## Option 3 - Use the upgrade tool with an experimental flag
-
-To upgrade to `v3.2.0` and also update your code according to the breaking changes introduced in `v3.2.0` without modifying your app's design, you can run the `native-base-upgrade` tool with an experimental flag.
-
-```bash
-npx native-base-upgrade --experimental-inline-props
-```
-
-As the name suggests, this is an experimental flag and it doesn't handle all the cases. We strongly recommend that you check in your code to a version control software before running this and also verify the changes made by this tool. You might have to upgrade some of the things manually(as explained [here](#option-2---upgrade-manually-with-new-theme-tokens)) even after running this.
+
diff --git a/nb-plugins/component-snackplayer/index.js b/nb-plugins/component-snackplayer/index.js
@@ -18,7 +18,7 @@ const processNode = (node, parent) => {
   return new Promise(async (resolve, reject) => {
     try {
       const params = parseParams(node.meta);
-      const NBversion = '3.0.7';
+      const NBversion = '3.2.0-alpha.4';
       // Gather necessary Params
       let name = params.name ? decodeURIComponent(params.name) : 'Example';
       const description = params.description

diff --git a/versioned_docs/version-3.2.0/VStack.md b/versioned_docs/version-3.2.0/VStack.md
@@ -1,5 +1,5 @@
 ---
-id: VStack
+id: v-stack
 title: VStack / Column
 ---
 

diff --git a/versioned_docs/version-3.2.0/ZStack.md b/versioned_docs/version-3.2.0/ZStack.md
@@ -1,3 +1,8 @@
+---
+id: z-stack
+title: ZStack
+---
+
 `ZStack` aligns items absolutely in the z-axis.
 
 ## Examples

diff --git a/versioned_docs/version-3.2.0/accessibility.md b/versioned_docs/version-3.2.0/accessibility.md
@@ -11,7 +11,7 @@ NativeBase uses [React Native ARIA](https://react-native-aria.geekyants.com/) to
 
 ## Accessible Labels
 
-When a view is marked as accessible, it is a good practice to set an `accessibilityLabel` on the view, so that people who use voice-over know what element they have selected. Voice-over will read this string when a user selects the associated element. NativeBase with the use of [React Native ARIA](https://www.notion.so/Accessibility-83852d7c4b094e69a3e4f1047994bd1c) does this for you out of the box.
+When a view is marked as accessible, it is a good practice to set an `accessibilityLabel` on the view, so that people who use voice-over know what element they have selected. Voice-over will read this string when a user selects the associated element. NativeBase with the use of [React Native ARIA](https://react-native-aria.geekyants.com/) does this for you out of the box.
 
 ## Keyboard Navigation
 

diff --git a/versioned_docs/version-3.2.0/alertDialog.md b/versioned_docs/version-3.2.0/alertDialog.md
@@ -56,7 +56,7 @@ function AlertDialogComponent() {
             <Button ref={cancelRef} onPress={onClose}>
               Cancel
             </Button>
-            <Button colorScheme="red" onPress={onClose} ml={3}>
+            <Button colorScheme="red" onPress={onClose} ml="3">
               Delete
             </Button>
           </AlertDialog.Footer>
@@ -71,7 +71,7 @@ function AlertDialogComponent() {
 export default function () {
   return (
     <NativeBaseProvider>
-      <Center flex={1}>
+      <Center flex="1">
         <AlertDialogComponent />
       </Center>
     </NativeBaseProvider>
@@ -122,7 +122,7 @@ function AlertDialogComponent() {
 export default function () {
   return (
     <NativeBaseProvider>
-      <Center flex={1}>
+      <Center flex="1">
         <AlertDialogComponent />
       </Center>
     </NativeBaseProvider>
@@ -142,16 +142,19 @@ AlertDialog and its components compose the **[Modal](modal.md)** component, so a
 | ------------------- | --------- | -------------------------------------------------------------- | ------- |
 | leastDestructiveRef | React.Ref | The least destructive action to get focus when dialog is open. | -       |
 
+
 ## Accessibility
 
 Adheres to the [Alert and Message Dialogs WAI-ARIA design pattern.](https://www.w3.org/TR/wai-aria-practices-1.2/#alertdialog)
 
 ### Keyboard Interactions
 
-| Name        | Description                                               |
-| ----------- | --------------------------------------------------------- |
-| Space       | Opens/closes the dialog.                                  |
-| Enter       | Opens/closes the dialog.                                  |
-| Tab         | Moves focus to the next focusable element.                |
-| Shift + Tab | Moves focus to the previous focusable element.            |
-| Esc         | Closes the dialog and moves focus to AlertDialog.Trigger. |
+| Name                | Description |
+| --------------------|-------------|
+| Space   | Opens/closes the dialog. |
+| Enter   | Opens/closes the dialog. |
+| Tab     | Moves focus to the next focusable element. |
+| Shift + Tab | Moves focus to the previous focusable element. |
+| Esc     | Closes the dialog and moves focus to AlertDialog.Trigger. | 
+
+
diff --git a/versioned_docs/version-3.2.0/appDrawer.md b/versioned_docs/version-3.2.0/appDrawer.md
@@ -34,13 +34,13 @@ function AppDrawer(){
     "forum",
   ];
 
-  return <SimpleGrid columns={5} spacingY={4} spacingX={4}>
+  return <SimpleGrid columns="5" spacingY="4" spacingX="4">
       {icons.map((icon) => (
         <IconButton
           borderRadius="full"
           colorScheme="indigo"
           variant="solid"
-          p={4}
+          p="4"
           icon={<Icon name={icon} as={MaterialIcons} size='sm' />}
         />
       ))}

diff --git a/versioned_docs/version-3.2.0/box.md b/versioned_docs/version-3.2.0/box.md
@@ -41,7 +41,7 @@ export const Example = () => {
           end: [1, 0],
         },
       }}
-      p={12}
+      p="12"
       rounded="lg"
       _text={{
         fontSize: "md",
@@ -63,7 +63,7 @@ const config = {
 export default () => {
   return (
     <NativeBaseProvider config={config}>
-      <Center flex={1}>
+      <Center flex="1">
         <Example />
       </Center>
     </NativeBaseProvider>
@@ -89,7 +89,7 @@ const Example = () => {
           end: [1, 0],
         },
       }}
-      p={12}
+      p="12"
       rounded="lg"
       _text={{ fontSize: 'md', fontWeight: 'bold', color: 'white' }}
     >

diff --git a/versioned_docs/version-3.2.0/buildingAppBar.md b/versioned_docs/version-3.2.0/buildingAppBar.md
@@ -21,12 +21,12 @@ function AppBar(){
 
         <Box safeAreaTop backgroundColor="#6200ee" />
 
-        <HStack bg='#6200ee' px={1} py={3} justifyContent='space-between' alignItems='center'>
-          <HStack space={4} alignItems='center'>
+        <HStack bg='#6200ee' px="1" py="3" justifyContent='space-between' alignItems='center'>
+          <HStack space="4" alignItems='center'>
             <IconButton icon={<Icon size="sm" as={<MaterialIcons name='menu' />} color="white" />} />
-            <Text color="white" fontSize={20} fontWeight='bold'>Home</Text>
+            <Text color="white" fontSize="20" fontWeight='bold'>Home</Text>
           </HStack>
-          <HStack space={2}>
+          <HStack space="2">
             <IconButton icon={<Icon as={<MaterialIcons name='favorite' />} size='sm' color="white" />} />
             <IconButton icon={<Icon as={<MaterialIcons name='search' />}
             color="white" size='sm'  />} />