Minor

build-init.js

@@ -18,7 +18,12 @@ const cloneRepos = () => {
     shellJS.exec('git clone ' + URL);
     shellJS.cd('NativeBase');
 
-    const a = shellJS.exec('git checkout ' + 'v' + v);
+    let a = shellJS.exec('git checkout ' + 'v' + v);
+
+    //TODO: 3.2.0-hack
+    if (v === '3.2.0') {
+      a = shellJS.exec('git checkout ' + 'master');
+    }
     if (a.code !== 0) {
       shellJS.exec('git checkout ' + FALLBACK_BRANCH);
       shellJS.exec('git pull');

docs/alertDialog.md

@@ -24,110 +24,8 @@ import { AlertDialog } from 'native-base';
 
 ### Basic
 
-```SnackPlayer name=AlertDialog%20Basic
-import React from "react";
-import {
-  AlertDialog,
-  Button,
-  Center,
-  NativeBaseProvider,
-} from "native-base";
-
-function AlertDialogComponent() {
-  const [isOpen, setIsOpen] = React.useState(false);
-  const onClose = () => setIsOpen(false);
-  const cancelRef = React.useRef();
-  return (
-    <Center>
-      <AlertDialog
-        leastDestructiveRef={cancelRef}
-        isOpen={isOpen}
-        onClose={onClose}
-        motionPreset={"fade"}
-      >
-        <AlertDialog.Content>
-          <AlertDialog.Header fontSize="lg" fontWeight="bold">
-            Delete Customer
-          </AlertDialog.Header>
-          <AlertDialog.Body>
-            Are you sure? You can't undo this action afterwards.
-          </AlertDialog.Body>
-          <AlertDialog.Footer>
-            <Button ref={cancelRef} onPress={onClose}>
-              Cancel
-            </Button>
-            <Button colorScheme="red" onPress={onClose} ml="3">
-              Delete
-            </Button>
-          </AlertDialog.Footer>
-        </AlertDialog.Content>
-      </AlertDialog>
-      <Button colorScheme="danger" onPress={() => setIsOpen(!isOpen)}>
-        Delete Customer
-      </Button>
-    </Center>
-  );
-}
-export default function () {
-  return (
-    <NativeBaseProvider>
-      <Center flex="1">
-        <AlertDialogComponent />
-      </Center>
-    </NativeBaseProvider>
-  );
-}
-```
+```ComponentSnackPlayer path=composites,AlertDialog,basic.tsx
 
-### Transition
-
-```SnackPlayer name=AlertDialog%20Transition
-import React from "react";
-import { AlertDialog, Button, Center, NativeBaseProvider } from "native-base";
-
-function AlertDialogComponent() {
-  const [isOpen, setIsOpen] = React.useState(false);
-  const onClose = () => setIsOpen(false);
-  const cancelRef = React.useRef();
-  return (
-    <Center>
-      <AlertDialog
-        motionPreset="fade"
-        leastDestructiveRef={cancelRef}
-        onClose={onClose}
-        isOpen={isOpen}
-        isCentered
-      >
-        <AlertDialog.Content>
-          <AlertDialog.CloseButton />
-          <AlertDialog.Header>Discard Changes?</AlertDialog.Header>
-          <AlertDialog.Body>
-            Are you sure you want to discard all of your notes? 44 words will be
-            deleted.
-          </AlertDialog.Body>
-          <AlertDialog.Footer>
-            <Button ref={cancelRef} onPress={onClose}>
-              No
-            </Button>
-            <Button colorScheme="red" ml={3}>
-              Yes
-            </Button>
-          </AlertDialog.Footer>
-        </AlertDialog.Content>
-      </AlertDialog>
-      <Button onPress={() => setIsOpen(!isOpen)}>Discard</Button>
-    </Center>
-  );
-}
-export default function () {
-  return (
-    <NativeBaseProvider>
-      <Center flex="1">
-        <AlertDialogComponent />
-      </Center>
-    </NativeBaseProvider>
-  );
-}
 ```
 
 ## Styling
@@ -149,12 +47,12 @@ Adheres to the [Alert and Message Dialogs WAI-ARIA design pattern.](https://www.
 
 ### 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. |
 
 

docs/box.md

@@ -33,20 +33,21 @@ import { Box, Center, NativeBaseProvider } from "native-base"
 
 export const Example = () => {
   return (
-    <Box
+   <Box
       bg={{
         linearGradient: {
-          colors: ["lightBlue.300", "violet.800"],
+          colors: ['lightBlue.300', 'violet.800'],
           start: [0, 0],
           end: [1, 0],
         },
       }}
       p="12"
-      rounded="lg"
+      rounded="xl"
       _text={{
-        fontSize: "md",
-        fontWeight: "bold",
-        color: "white",
+        fontSize: 'md',
+        fontWeight: 'medium',
+        color: 'warmGray.50',
+        textAlign: 'center',
       }}
     >
       This is a Box with Linear Gradient
@@ -63,7 +64,7 @@ const config = {
 export default () => {
   return (
     <NativeBaseProvider config={config}>
-      <Center flex="1">
+      <Center flex={1} px="3">
         <Example />
       </Center>
     </NativeBaseProvider>

docs/buildingDrawerNavigation.md

@@ -40,7 +40,7 @@ function Component(props) {
       <Pressable onPress={() => props.navigation.toggleDrawer()} position="absolute" ml="2" zIndex="1">
         <HamburgerIcon ml="2" size="sm"/>
       </Pressable>
-      <Center flex="1" >
+      <Center flex={1} >
         <Heading size="md">{props.route.name}</Heading>
       </Center>
     </HStack>
@@ -148,7 +148,7 @@ function CustomDrawerContent(props) {
 }
 function MyDrawer() {
   return (
-    <Box safeArea flex="1" >
+    <Box safeArea flex={1} >
     <Drawer.Navigator
       drawerContent={(props) => <CustomDrawerContent {...props} />}
     >

docs/buildingFooterTabs.md

@@ -31,14 +31,14 @@ export default function App() {
   const [selected, setSelected] = React.useState(1);
   return (
     <NativeBaseProvider>
-      <Box flex="1" bg="white" safeAreaTop>
-        <Center flex="1"></Center>
+      <Box flex={1} bg="white" safeAreaTop>
+        <Center flex={1}></Center>
         <HStack bg="indigo.600" alignItems="center" safeAreaBottom shadow={6}>
           <Pressable
             cursor="pointer"
             opacity={selected === 0 ? 1 : 0.5}
             py="3"
-            flex="1"
+            flex={1}
             onPress={() => setSelected(0)}>
             <Center>
               <Icon
@@ -59,9 +59,10 @@ export default function App() {
           <Pressable
             cursor="pointer"
             opacity={selected === 1 ? 1 : 0.5}
-            py={2}
+            py="2"
             flex={1}
-            onPress={() => setSelected(1)}>
+            onPress={() => setSelected(1)}
+          >
             <Center>
               <Icon
                 mb="1"
@@ -78,8 +79,9 @@ export default function App() {
             cursor="pointer"
             opacity={selected === 2 ? 1 : 0.6}
             py="2"
-            flex="1"
-            onPress={() => setSelected(2)}>
+            flex={1}
+            onPress={() => setSelected(2)}
+          >
             <Center>
               <Icon
                 mb={1}
@@ -100,8 +102,9 @@ export default function App() {
             cursor="pointer"
             opacity={selected === 3 ? 1 : 0.5}
             py="2"
-            flex="1"
-            onPress={() => setSelected(3)}>
+            flex={1}
+            onPress={() => setSelected(3)}
+          >
             <Center>
               <Icon
                 mb={1}

docs/buildingSearchBar.md

@@ -107,8 +107,8 @@ function SearchBar() {
 export default function () {
   return (
     <NativeBaseProvider>
-      <Center flex="1" px="2">
-        <SearchBar />
+      <Center flex={1} px="2">
+        <SearchBar/>
       </Center>
     </NativeBaseProvider>
   );

docs/buildingSwipeList.md

@@ -112,12 +112,9 @@ function Basic() {
     <Box>
       <Pressable onPress={() => console.log('You touched me')} bg="white">
         <Box
-          borderBottomWidth="1"
-          borderColor="coolGray.200"
           pl="4"
           pr="5"
           py="2"
-          _dark={{ borderColor: 'gray.600' }}
           >
           <HStack alignItems="center" space={3}>
             <Avatar size="48px" source={{ uri: item.avatarUrl }} />

docs/buildingTabView.md

@@ -25,13 +25,13 @@ import { TabView, SceneMap } from 'react-native-tab-view';
 import { NativeBaseProvider, Box, Text, Center } from 'native-base';
 import Constants from 'expo-constants';
 
-const FirstRoute = () => <Center flex="1">This is Tab 1</Center>;
+const FirstRoute = () => <Center flex={1}>This is Tab 1</Center>;
 
-const SecondRoute = () => <Center flex="1">This is Tab 2</Center>;
+const SecondRoute = () => <Center flex={1}>This is Tab 2</Center>;
 
-const ThirdRoute = () => <Center flex="1">This is Tab 3</Center>;
+const ThirdRoute = () => <Center flex={1}>This is Tab 3</Center>;
 
-const FourthRoute = () => <Center flex="1">This is Tab 4 </Center>;
+const FourthRoute = () => <Center flex={1}>This is Tab 4 </Center>;
 
 const initialLayout = { width: Dimensions.get('window').width };
 
@@ -69,7 +69,7 @@ export default function TabViewExample() {
             <Box
               borderBottomWidth="3"
               borderColor={borderColor}
-              flex="1"
+              flex={1}
               alignItems="center"
               p="3"
               cursor="pointer">

docs/builldingCard.md

@@ -95,7 +95,7 @@ function CardComponent(){
 export default function () {
   return (
   <NativeBaseProvider>
-    <Center flex="1" px="3">
+    <Center flex={1} px="3">
       <CardComponent/>
     </Center>
   </NativeBaseProvider>