Merge pull request #40 from GeekyAnts/development

Development
GeekyAnts · Feb 16, 2022 · 4871e31 · 4871e31
2 parents c24ba87 + 2040b9e
commit 4871e31
Show file tree

Hide file tree

Showing 15 changed files with 357 additions and 55 deletions.
diff --git a/babel.config.js b/babel.config.js
@@ -2,5 +2,15 @@ module.exports = function (api) {
   api.cache(true);
   return {
     presets: ['babel-preset-expo'],
+    plugins: [
+      [
+        "module-resolver",
+        {
+          alias: {
+            "@native-base/icons": "@native-base/icons/lib",
+          },
+        },
+      ],
+    ],
   };
 };
diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
 		"preset": "jest-expo"
 	},
 	"dependencies": {
+		"@native-base/icons": "^0.0.10",
 		"@react-native-community/masked-view": "0.1.10",
 		"@react-navigation/native": "^5.9.4",
 		"@react-navigation/stack": "^5.14.5",

diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
@@ -12,7 +12,7 @@ import {
 } from 'native-base';
 import { Floaters } from '../components/Floaters';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { EvilIcons } from '@expo/vector-icons';
+import { EvilIcons } from '@native-base/icons';
 
 export const Layout = ({
   children,

diff --git a/src/nb/NativeBase b/src/nb/NativeBase
diff --git a/src/nb/components/basic/SectionList/Basic.tsx b/src/nb/components/basic/SectionList/Basic.tsx
@@ -28,7 +28,7 @@ export const Example = () => {
     },
   ];
   return (
-    <Center h="80">
+    <Center h="80" w="100%">
       <SectionList
         maxW="300"
         w="100%"

diff --git a/src/nb/components/composites/Menu/Group.tsx b/src/nb/components/composites/Menu/Group.tsx
@@ -6,9 +6,6 @@ export function Example() {
     <Box h="80%" w="90%" alignItems="flex-start">
       <Menu
         w="190"
-        closeOnSelect={false}
-        onOpen={() => console.log('opened')}
-        onClose={() => console.log('closed')}
         trigger={(triggerProps) => {
           return (
             <Pressable {...triggerProps}>

diff --git a/src/nb/components/composites/Modal/ModalPlacement.tsx b/src/nb/components/composites/Modal/ModalPlacement.tsx
@@ -20,7 +20,7 @@ export const Example = () => {
         <Button onPress={() => openModal('left')}>Left</Button>
         <Button onPress={() => openModal('right')}>Right</Button>
       </Stack>
-      <Modal isOpen={open} onClose={() => setOpen(false)} mt={12}>
+      <Modal isOpen={open} onClose={() => setOpen(false)} safeAreaTop={true}>
         <Modal.Content maxWidth="350" {...styles[placement]}>
           <Modal.CloseButton />
           <Modal.Header>Contact Us</Modal.Header>

diff --git a/src/nb/components/composites/Popover/PopoverPositions.tsx b/src/nb/components/composites/Popover/PopoverPositions.tsx
@@ -3,6 +3,7 @@ import { Popover, Button, VStack, Select, CheckIcon, Box } from 'native-base';
 
 export function Example() {
   const [position, setPosition] = useState('auto');
+  const [isOpen, setIsOpen] = useState(false);
 
   return (
     <Box h="60%" w="100%" alignItems="center">
@@ -12,26 +13,39 @@ export function Example() {
           placement={position === 'auto' ? undefined : position}
           trigger={(triggerProps) => {
             return (
-              <Button colorScheme="danger" alignSelf="center" {...triggerProps}>
+              <Button
+                colorScheme="danger"
+                alignSelf="center"
+                {...triggerProps}
+                onPress={() => setIsOpen(true)}
+              >
                 Delete Customer
               </Button>
             );
           }}
+          isOpen={isOpen}
+          onClose={() => setIsOpen(!isOpen)}
         >
           <Popover.Content w="56">
             <Popover.Arrow />
-            <Popover.CloseButton />
+            <Popover.CloseButton onPress={() => setIsOpen(false)} />
             <Popover.Header>Delete Customer</Popover.Header>
             <Popover.Body>
               This will remove all data relating to Alex. This action cannot be
               reversed. Deleted data can not be recovered.
             </Popover.Body>
             <Popover.Footer justifyContent="flex-end">
               <Button.Group space={2}>
-                <Button colorScheme="coolGray" variant="ghost">
+                <Button
+                  colorScheme="coolGray"
+                  variant="ghost"
+                  onPress={() => setIsOpen(false)}
+                >
                   Cancel
                 </Button>
-                <Button colorScheme="danger">Delete</Button>
+                <Button colorScheme="danger" onPress={() => setIsOpen(false)}>
+                  Delete
+                </Button>
               </Button.Group>
             </Popover.Footer>
           </Popover.Content>

diff --git a/src/nb/components/composites/Progress/CustomBgColor.tsx b/src/nb/components/composites/Progress/CustomBgColor.tsx
@@ -5,7 +5,14 @@ export const Example = () => {
   return (
     <Center w="100%">
       <Box w="90%" maxW="400">
-        <Progress colorScheme="primary" bg="coolGray.300" value={75} mx="4" />
+        <Progress
+          bg="coolGray.100"
+          _filledTrack={{
+            bg: 'lime.500',
+          }}
+          value={75}
+          mx="4"
+        />
       </Box>
     </Center>
   );

diff --git a/src/nb/components/composites/Transitions/Slide.tsx b/src/nb/components/composites/Transitions/Slide.tsx
@@ -1,5 +1,12 @@
 import React from 'react';
-import { Slide, Button, Alert, Text, Box } from 'native-base';
+import {
+  Slide,
+  Button,
+  Alert,
+  Text,
+  Box,
+  useColorModeValue,
+} from 'native-base';
 export const Example = () => {
   const [isOpenTop, setIsOpenTop] = React.useState(false);
   const str = `${isOpenTop ? 'Hide' : 'Check Internet Connection'}`;
@@ -18,6 +25,7 @@ export const Example = () => {
         onPress={() => setIsOpenTop(!isOpenTop)}
         variant="unstyled"
         bg="coolGray.700:alpha.30"
+        _text={{ color: useColorModeValue('darkText', 'lightText') }}
       >
         {str}
       </Button>

diff --git a/src/nb/components/composites/Transitions/SlideComposition.tsx b/src/nb/components/composites/Transitions/SlideComposition.tsx
@@ -11,9 +11,13 @@ import {
   WarningIcon,
   Input,
   Center,
+  useSafeArea,
 } from 'native-base';
 export const Example = () => {
   const [isOpen, setIsOpen] = React.useState(false);
+  const safeAreaProps = useSafeArea({
+    safeAreaTop: true,
+  });
   return (
     <Center>
       <Box w="300">
@@ -55,6 +59,7 @@ export const Example = () => {
               color: 'orange.600',
             }}
             bg="orange.200"
+            {...safeAreaProps}
           >
             Due to government restrictions around COVID- 19, you may experience
             a delay in your delivery.

diff --git a/src/nb/components/primitives/Box/composition-card.tsx b/src/nb/components/primitives/Box/composition-card.tsx
@@ -1,18 +1,43 @@
 import React from 'react';
 import { Box, Stack, Heading, Icon, Text, HStack, Avatar } from 'native-base';
-import { MaterialCommunityIcons, SimpleLineIcons } from '@expo/vector-icons';
+import {
+  MaterialCommunityIcons,
+  SimpleLineIcons,
+  MaterialIcons,
+} from '@expo/vector-icons';
 export const Example = () => {
   return (
     <Box p={5} rounded="xl" shadow={4} w="100%">
       <Stack space={6}>
-        <Avatar
-          size={'sm'}
-          bg="teal.500"
-          source={{
-            uri:
-              'https://i.pinimg.com/originals/4d/72/97/4d7297dad94265c0acbc3b677d418935.jpg',
-          }}
-        />
+        <HStack justifyContent="space-between" alignItems="center">
+          <Avatar
+            size={'sm'}
+            bg="teal.500"
+            source={{
+              uri:
+                'https://i.pinimg.com/originals/4d/72/97/4d7297dad94265c0acbc3b677d418935.jpg',
+            }}
+          />
+          <HStack space={2} alignItems="center">
+            <Icon
+              name="star"
+              as={SimpleLineIcons}
+              size={4}
+              // color="blueGray.700"
+              _light={{ color: 'blueGray.700' }}
+              _dark={{ color: 'blueGray.400' }}
+            />
+            <Icon
+              size={4}
+              name="more-horiz"
+              // color="blueGray.700"
+              _light={{ color: 'blueGray.700' }}
+              _dark={{ color: 'blueGray.400' }}
+              as={MaterialIcons}
+            />
+          </HStack>
+        </HStack>
+
         <Stack space={3}>
           <Heading
             size="lg"
@@ -40,7 +65,9 @@ export const Example = () => {
               <Icon
                 name="grid"
                 as={MaterialCommunityIcons}
-                color="blueGray.700"
+                // color="blueGray.700"
+                _light={{ color: 'blueGray.700' }}
+                _dark={{ color: 'blueGray.400' }}
               />
               <Text
                 flexShrink={1}
@@ -55,7 +82,9 @@ export const Example = () => {
               <Icon
                 name="calendar"
                 as={MaterialCommunityIcons}
-                color="blueGray.700"
+                // color="blueGray.700"
+                _light={{ color: 'blueGray.700' }}
+                _dark={{ color: 'blueGray.400' }}
               />
               <Text
                 _light={{ color: 'blueGray.500' }}
@@ -92,16 +121,6 @@ export const Example = () => {
         */}
         </HStack>
       </Stack>
-      <HStack
-        position="absolute"
-        top={3}
-        right={3}
-        space={2}
-        alignItems="center"
-      >
-        <Icon name="star" as={SimpleLineIcons} size={4} color="blueGray.700" />
-        <Icon name="more-horiz" color="blueGray.700" />
-      </HStack>
     </Box>
   );
 };
diff --git a/src/nb/components/primitives/Image/Sizes.tsx b/src/nb/components/primitives/Image/Sizes.tsx
@@ -1,11 +1,23 @@
 import React from 'react';
 import { VStack, Image, ScrollView, Heading, Center } from 'native-base';
+
 export function Example() {
   return (
-    <ScrollView px="20">
-      <Center mt="3" h="80">
-        <Heading mb="10">Image Sizes</Heading>
-        <VStack space={2} alignItems="center" safeAreaTop my={6}>
+    <>
+      <Heading mb="10" textAlign="center" mt="3">
+        Image Sizes
+      </Heading>
+      <ScrollView px="20">
+        {/* <Center mt="3" h="80"> */}
+
+        <VStack
+          space={2}
+          justifyContent="center"
+          alignItems="center"
+          safeAreaTop
+          // my={6}
+          mb={6}
+        >
           {['xs', 'sm', 'md', 'lg', 'xl', '2xl'].map((size) => (
             <Image
               key={size}
@@ -18,7 +30,8 @@ export function Example() {
             />
           ))}
         </VStack>
-      </Center>
-    </ScrollView>
+        {/* </Center> */}
+      </ScrollView>
+    </>
   );
 }
diff --git a/src/nb/components/primitives/Radio/controlledRadio.tsx b/src/nb/components/primitives/Radio/controlledRadio.tsx
@@ -3,17 +3,6 @@ import { Radio } from 'native-base';
 
 export const Example = () => {
   const [value, setValue] = React.useState('one');
-  const ref = React.useRef(null);
-  React.useEffect(() => {
-    console.log('ref here', ref.current);
-    // ref.current.setNativeProps({
-    //   backgroundColor: 'red',
-    // });
-    // ref.current.setNativeProps({
-    //   backgroundColor: 'red',
-    // });
-    ref.current.focus();
-  }, []);
   return (
     <Radio.Group
       name="myRadioGroup"
@@ -23,10 +12,10 @@ export const Example = () => {
         setValue(nextValue);
       }}
     >
-      <Radio value="one" my={1} bg="blue.200">
+      <Radio value="one" my={1}>
         One
       </Radio>
-      <Radio value="two" my={1} bg="red.200" ref={ref}>
+      <Radio value="two" my={1}>
         Two
       </Radio>
     </Radio.Group>