Merge pull request #4993 from GeekyAnts/release/3.4.4-rc.0

release 3.4.4-rc.0

example/.nvmrc

@@ -0,0 +1 @@
+v14.19.0

example/__mocks__/@react-native-async-storage/async-storage.js

@@ -0,0 +1,2 @@
+import DefaultValue from '@react-native-async-storage/async-storage/jest/async-storage-mock';
+export default DefaultValue;

example/__mocks__/globalMock.js

@@ -7,3 +7,6 @@ jest.mock('react-native-keyboard-aware-scroll-view', () => {
   const KeyboardAwareScrollView = ({ children }) => children;
   return { KeyboardAwareScrollView };
 });
+
+import mockAsyncStorage from '@react-native-async-storage/async-storage/jest/async-storage-mock';
+jest.mock('@react-native-async-storage/async-storage', () => mockAsyncStorage);

example/babel.config.js

@@ -4,7 +4,7 @@ const pak = require('../package.json');
 module.exports = function (api) {
   api.cache(true);
   return {
-    presets: ['babel-preset-expo'],
+    presets: [['babel-preset-expo', { jsxRuntime: 'classic' }]],
     plugins: [
       [
         'module-resolver',

example/package.json

@@ -18,7 +18,7 @@
   "dependencies": {
     "@expo/vector-icons": "^12.0.0",
     "@react-native-aria/overlays": "^0.2.9",
-    "@react-native-async-storage/async-storage": "~1.15.0",
+    "@react-native-async-storage/async-storage": "^1.17.3",
     "expo": "^44.0.0",
     "expo-font": "~10.0.4",
     "expo-linear-gradient": "~11.0.3",
@@ -42,7 +42,7 @@
     "@storybook/addon-links": "^5.3",
     "@storybook/addon-ondevice-actions": "^5.3.23",
     "@storybook/addon-ondevice-knobs": "^5.3.23",
-    "@storybook/addon-storyshots": "^6.3.4",
+    "@storybook/addon-storyshots": "6.3",
     "@storybook/react-native": "^5.3.23",
     "@storybook/react-native-server": "^5.3.23",
     "@types/react": "~17.0.21",
@@ -57,7 +57,7 @@
     "patch-package": "^6.2.2",
     "postinstall-postinstall": "^2.1.0",
     "react-dom": "17.0.1",
-    "react-test-renderer": "^17.0.2",
+    "react-test-renderer": "17.0.1",
     "typescript": "~4.3.5"
   },
   "private": false

example/scripts/test.sh

@@ -12,16 +12,48 @@ case "$OS" in
   *)        rm -fR node_modules/react node_modules/react-native ;;
 esac
 
+red=`tput setaf 1`
+green=`tput setaf 2`
+reset=`tput sgr0`
+
+#TODO:- run script with nvm use/ facing issues with yarn test working with npm run test
+# script to be added
+#unset PREFIX
+# . ~/.nvm/nvm.sh
+# nvm install v14.19.0
+# nvm use
+
 if [ $# -eq 0 ]
   then
     jest --config jest-ios.config.js --silent
     jest --config jest-android.config.js --silent
-    jest --silent
+    NODEVERSION=$(node -v)
+    echo "you are using node version $NODEVERSION"
+    if [ $NODEVERSION != "v14.19.0" ]
+      then
+        echo "${red}Error! Node module v14.19.0 is not present or nvm is not installed
+        ${green}If you have node v14.19.0 run 'nvm use'
+        Else run 'nvm install v14.19.0'${reset} "
+      else
+        jest --silent
+    fi 
+
   else
     echo "Tests will be updated!"
     jest --config jest-ios.config.js -u --silent
     jest --config jest-android.config.js -u --silent
-    jest -u --silent
+      NODEVERSION=$(node -v)
+    echo "you are using node version $NODEVERSION"
+    if [ $NODEVERSION != "v14.19.0" ]
+      then
+        jest -u --silent
+        echo "${red}Error! Node module v14.19.0 is not present or nvm is not installed
+        ${green}If you have node v14.19.0 run 'nvm use'
+        Else run 'nvm install v14.19.0'${reset} "
+      else
+        jest -u --silent
+    fi 
+
 fi
 
 yarn install  --check-files

example/storybook/stories/components/basic/StatusBar/Basic.tsx

@@ -1,5 +1,25 @@
-import React from 'react';
-import { StatusBar } from 'native-base';
+import React, { useState } from 'react';
+import { StatusBar, Box, Text, Button } from 'native-base';
+
 export const Example = () => {
-  return <StatusBar />;
+  const [hidden, setHidden] = useState(false);
+  const changeStatusBarVisibility = () => setHidden(!hidden);
+  return (
+    <Box flex={1} justifyContent="center" safeArea>
+      <StatusBar
+        animated={true}
+        backgroundColor="#61dafb"
+        barStyle="default"
+        showHideTransition="fade"
+        hidden={hidden}
+      />
+      <Text textAlign="center" mb={3}>
+        StatusBar Visibility:{'\n'}
+        {hidden ? 'Hidden' : 'Visible'}
+      </Text>
+      <Box p={10}>
+        <Button onPress={changeStatusBarVisibility}>Toggle StatusBar</Button>
+      </Box>
+    </Box>
+  );
 };

example/storybook/stories/components/composites/Alert/variant.tsx

@@ -6,7 +6,7 @@ import {
   VStack,
   Text,
   Divider,
-  Center,
+  ScrollView,
 } from 'native-base';
 
 export function Example() {
@@ -30,8 +30,16 @@ export function Example() {
   };
 
   return (
-    <Center>
-      <Stack space={3} w="90%" maxW="400">
+    <ScrollView mt={5}>
+      <Stack
+        space={3}
+        w="90%"
+        maxW="400"
+        mr={5}
+        flexDirection="column"
+        justifyContent="center"
+        alignItems="center"
+      >
         {[
           'solid',
           'left-accent',
@@ -72,6 +80,6 @@ export function Example() {
           );
         })}
       </Stack>
-    </Center>
+    </ScrollView>
   );
 }

example/storybook/stories/components/composites/Breadcrumb/Composition.tsx

@@ -13,7 +13,7 @@ export const Example = () => {
       <Breadcrumb spacing={2} _button={{ bg: 'transparent' }}>
         <Breadcrumb.Item>
           <Breadcrumb.Link>
-            <HStack>
+            <HStack justifyContent="center" alignItems="center">
               <Breadcrumb.Icon
                 as={<MaterialIcons name="home" />}
                 mr={1}
@@ -27,22 +27,24 @@ export const Example = () => {
         </Breadcrumb.Item>
         <Breadcrumb.Item>
           <Breadcrumb.Link href="https://alpha.nativebase.io/" isExternal>
-            <Breadcrumb.Icon
-              fontWeight={'bold'}
-              as={MaterialCommunityIcons}
-              name="file-document"
-              mr={1}
-              size="xs"
-            />
-            <Breadcrumb.Text>Docs</Breadcrumb.Text>
+            <HStack justifyContent="center" alignItems="center">
+              <Breadcrumb.Icon
+                fontWeight={'bold'}
+                as={MaterialCommunityIcons}
+                name="file-document"
+                mr={1}
+                size="xs"
+              />
+              <Breadcrumb.Text>Docs</Breadcrumb.Text>
+            </HStack>
           </Breadcrumb.Link>
         </Breadcrumb.Item>
         <Breadcrumb.Item isCurrent>
           <Breadcrumb.Link
             href="https://github.com/GeekyAnts/nativebase"
             isExternal
           >
-            <HStack>
+            <HStack justifyContent="center" alignItems="center">
               <Breadcrumb.Icon
                 as={<AntDesign name="github" />}
                 mr={1}

example/storybook/stories/components/composites/Breadcrumb/Separators.tsx

@@ -6,7 +6,11 @@ export const Example = () => {
       <Heading mb={4}>Breadcrumb with String Separator</Heading>
       <Breadcrumb separator={'-'}>
         <Breadcrumb.Item isCurrent>
-          <Breadcrumb.Link>Home (This is currently active)</Breadcrumb.Link>
+          <Breadcrumb.Link>
+            <Breadcrumb.Text _current={{ color: 'red.500' }}>
+              Home (This is currently active)
+            </Breadcrumb.Text>
+          </Breadcrumb.Link>
         </Breadcrumb.Item>
         <Breadcrumb.Item>
           <Breadcrumb.Link href="https://alpha.nativebase.io/" isExternal>

example/storybook/stories/components/composites/IconButton/SVGIcon.tsx

@@ -13,11 +13,11 @@ export const Example = () => {
           viewBox: '0 0 100 100',
           size: 10,
           strokeWidth: '10',
+          width: '100',
+          height: '100',
         }}
       >
-        <Icon width="100" height="100">
-          <Path d="M46.667 90v-.008c-4.922 0-11.021-2.695-13.333-6.66V40c5.521 0 10-4.479 10-10V13.333A3.33 3.33 0 0 1 46.667 10C54.029 10 60 15.97 60 23.333v13.333A3.331 3.331 0 0 0 63.334 40H80c5.52 0 10 4.479 10 10v30h-.004c0 5.52-4.477 9.992-9.996 10H46.667zM10 40h16.666v43.333H10z" />
-        </Icon>
+        <Path d="M46.667 90v-.008c-4.922 0-11.021-2.695-13.333-6.66V40c5.521 0 10-4.479 10-10V13.333A3.33 3.33 0 0 1 46.667 10C54.029 10 60 15.97 60 23.333v13.333A3.331 3.331 0 0 0 63.334 40H80c5.52 0 10 4.479 10 10v30h-.004c0 5.52-4.477 9.992-9.996 10H46.667zM10 40h16.666v43.333H10z" />
       </IconButton>
 
       {/* Alternatively */}

example/storybook/stories/components/composites/Transitions/Slide.tsx

@@ -13,7 +13,7 @@ export const Example = () => {
   return (
     <Box h="32" w="300">
       <Slide in={isOpenTop} placement="top">
-        <Alert justifyContent="center" status="error">
+        <Alert justifyContent="center" status="error" safeAreaTop={8}>
           <Alert.Icon />
           <Text color="error.600" fontWeight="medium">
             No Internet Connection

example/storybook/stories/components/composites/Transitions/SlideWrapped.tsx

@@ -56,6 +56,7 @@ export const Example = () => {
             _dark={{
               bg: 'emerald.200',
             }}
+            safeArea
           >
             <HStack space={2}>
               <CheckIcon

example/storybook/stories/components/primitives/Image/WithRef.tsx

@@ -6,14 +6,16 @@ export function Example() {
   const myRef = React.useRef(null);
 
   React.useEffect(() => {
-    const styleObj = {
-      borderWidth: 4,
-      borderRadius: 4,
-      borderColor: '#22D3EE',
-    };
-    myRef?.current?.setNativeProps({
-      style: styleObj,
-    });
+    if (myRef.current && myRef.current.setNativeProps) {
+      const styleObj = {
+        borderWidth: 4,
+        borderRadius: 4,
+        borderColor: '#22D3EE',
+      };
+      myRef?.current?.setNativeProps({
+        style: styleObj,
+      });
+    }
   }, [myRef]);
 
   return (

example/storybook/stories/components/primitives/List/ListWithIcon.tsx

@@ -1,23 +1,23 @@
 import React from 'react';
-import { List, SearchIcon } from 'native-base';
-
+import { List } from 'native-base';
+import { SimpleLineIcons, Ionicons } from '@expo/vector-icons';
 export const Example = () => {
   return (
-    <List mt={2} my={2}>
+    <List mt={2} my={2} width={80}>
       <List.Item>
         {/* <List.Icon as={<SearchIcon />} /> */}
         Inbox
       </List.Item>
       <List.Item>
-        <List.Icon as={<SearchIcon />} />
+        <List.Icon as={SimpleLineIcons} name="docs" />
         Drafts
       </List.Item>
       <List.Item>
-        <List.Icon as={<SearchIcon />} />
+        <List.Icon as={Ionicons} name="stats-chart-outline" />
         Graphs and stats
       </List.Item>
       <List.Item>
-        <List.Icon as={<SearchIcon />} />
+        <List.Icon as={Ionicons} name="attach" />
         Attachments
       </List.Item>
     </List>

example/storybook/stories/components/primitives/List/VirtualizedList.tsx

@@ -20,6 +20,7 @@ const Item = ({ title }: { title: String }) => (
     px={4}
     py={2}
     my={2}
+    width={32}
   >
     {title}
   </List.Item>

example/storybook/stories/components/primitives/Select/SelectLongList.tsx

@@ -58,7 +58,7 @@ export const Example = () => {
         <FormControl.Label>Select Color</FormControl.Label>
         <Select
           selectedValue={value}
-          minWidth="200"
+          minWidth="100"
           accessibilityLabel="Select a Color"
           placeholder="Select a Color"
           onValueChange={(itemValue) => {

example/storybook/stories/hooks/useColorMode/Basic.tsx

@@ -16,16 +16,20 @@ function UseColorMode() {
         p="4"
         flex="1"
         maxW="300"
+        mt={10}
         w="100%"
         bg={colorMode === 'dark' ? 'coolGray.800' : 'warmGray.50'}
+        safeArea
       >
         <Text fontSize="lg" display="flex" mb="20">
           The active color mode is{' '}
           <Text bold fontSize="lg">
             {colorMode}
           </Text>
         </Text>
-        <Button onPress={toggleColorMode}>Toggle</Button>
+        <Button onPress={toggleColorMode} h={10}>
+          Toggle
+        </Button>
       </Box>
     </Center>
   );

example/storybook/stories/hooks/useColorModeValue/Basic.tsx

@@ -19,14 +19,18 @@ function UseColorMode() {
         bg={useColorModeValue('warmGray.50', 'coolGray.800')}
         maxW="300"
         w="100%"
+        mt={10}
+        safeArea
       >
         <Text fontSize="lg" display="flex" mb={20}>
           The active color mode is{' '}
           <Text bold fontSize="18px">
             {useColorModeValue('Light', 'Dark')}
           </Text>
         </Text>
-        <Button onPress={toggleColorMode}>Toggle</Button>
+        <Button onPress={toggleColorMode} h={10}>
+          Toggle
+        </Button>
       </Box>
     </Center>
   );