Merge pull request #5131 from GeekyAnts/release/3.4.8

Release/3.4.8

CONTRIBUTING.md

@@ -24,7 +24,7 @@ If you are eager to start contributing code right away, you can go through [Nati
 There are other ways you can contribute without writing a single line of code. Here are a few things you can do to help out:
 
 1. **Replying and handling open issues.** We get a lot of issues every day, and some of them may lack necessary information. You can help out by guiding people through the process of filling out the issue template, asking for clarifying information, or pointing them to existing issues that match their description of the problem.
-2. **Reviewing pull requests for the docs.** Reviewing [documentation updates](https://github.com/nativebase/website/pulls) can be as simple as checking for spelling and grammar. If you encounter situations that can be explained better in the docs, click **Edit** at the bottom left of most docs pages to get started with your own contribution.
+2. **Reviewing pull requests for the docs.** Reviewing [documentation updates](https://github.com/GeekyAnts/nativebase-docs/pulls) can be as simple as checking for spelling and grammar. If you encounter situations that can be explained better in the docs, click **Edit** at the bottom left of most docs pages to get started with your own contribution.
 3. **Help people write test plans.** Some pull requests sent to the main repository may lack a proper test plan. These help reviewers understand how the change was tested, and can speed up the time it takes for a contribution to be accepted.
 
 Each of these tasks is highly impactful, and maintainers will greatly appreciate your help.

example/storybook/stories/components/Allcomponents.tsx

@@ -0,0 +1,139 @@
+//@ts-nocheck
+//uncomment above line to test typing of components
+import {
+  Badge,
+  IconButton,
+  Alert,
+  AspectRatio,
+  Avatar,
+  Breadcrumb,
+  Card,
+  Container,
+  Divider,
+  Kbd,
+  Progress,
+  Accordion,
+  FormControl,
+  Center,
+  Square,
+  Circle,
+  Fade,
+  ScaleFade,
+  PresenceTransition,
+  Slide,
+  SlideFade,
+  Popover,
+  AlertDialog,
+  Menu,
+  SimpleGrid,
+  Actionsheet,
+  Fab,
+  Modal,
+  Backdrop,
+  Tooltip,
+} from 'native-base';
+
+import {
+  Text,
+  Checkbox,
+  Radio,
+  Hidden,
+  Button,
+  Column,
+  Row,
+  Box,
+  Stack,
+  VStack,
+  HStack,
+  ZStack,
+  Slider,
+  Icon,
+  Input,
+  InputGroup,
+  InputLeftAddon,
+  InputRightAddon,
+  Image,
+  Spinner,
+  Heading,
+  Flex,
+  Switch,
+  TextArea,
+  Link,
+  Select,
+  Pressable,
+  Overlay,
+  Skeleton,
+} from 'native-base';
+
+export const Example = () => {
+  return (
+    <>
+      <Input aaa></Input>
+      <Badge sss="1"></Badge>
+      <IconButton sss="1"></IconButton>
+      <Alert sss="1"></Alert>
+      <AspectRatio sss="1"></AspectRatio>
+      <Avatar sss="1"></Avatar>
+      <Breadcrumb sss="1"></Breadcrumb>
+      <Card sss="1"></Card>
+      <Container sss="1"></Container>
+      <Divider sss="1"></Divider>
+      <Kbd sss="1"></Kbd>
+      <Progress sss="1"></Progress>
+      <Accordion sss="1"></Accordion>
+      <Skeleton sss="1"></Skeleton>
+      <FormControl sss="1"></FormControl>
+      <Center sss="1"></Center>
+      <Square sss="1"></Square>
+      <Circle sss="1"></Circle>
+      <Fade sss="1"></Fade>
+      <ScaleFade sss="1"></ScaleFade>
+      <PresenceTransition sss="1"></PresenceTransition>
+      <Slide sss="1"></Slide>
+      <SlideFade sss="1"></SlideFade>
+      <Popover sss="1" trigger={() => <Box sss="1"></Box>}>
+        <Box sss="1"></Box>
+      </Popover>
+      <AlertDialog sss="1"></AlertDialog>
+      <Menu sss="1" trigger={() => <Box></Box>}></Menu>
+      <SimpleGrid sss="1"></SimpleGrid>
+      <Actionsheet sss="1"></Actionsheet>
+      <Fab sss="1"></Fab>
+      <Modal sss="1"></Modal>
+      <Backdrop sss="1"></Backdrop>
+      <Tooltip label="hell" sss="1">
+        Hello
+      </Tooltip>
+      <Text sss="1"></Text>
+      <Checkbox sss="1" value="1"></Checkbox>
+      <Radio sss="1" value="1"></Radio>
+      <Hidden sss="1">
+        <Box sss="1"></Box>
+      </Hidden>
+      <Button sss="1"></Button>
+      <Column sss="1"></Column>
+      <Row sss="1"></Row>
+      <Box sss="1"></Box>
+      <Stack sss="1"></Stack>
+      <VStack sss="1"></VStack>
+      <HStack sss="1"></HStack>
+      <ZStack sss="1"></ZStack>
+      <Slider sss="1"></Slider>
+      <Icon sss="1"></Icon>
+      <Input sss="1"></Input>
+      <InputGroup sss="1"></InputGroup>
+      <InputLeftAddon sss="1"></InputLeftAddon>
+      <InputRightAddon sss="1"></InputRightAddon>
+      <Image sss="1"></Image>
+      <Spinner sss="1"></Spinner>
+      <Heading sss="1"></Heading>
+      <Flex sss="1"></Flex>
+      <Switch sss="1"></Switch>
+      <TextArea sss="1"></TextArea>
+      <Link sss="1"></Link>
+      <Select sss="1"></Select>
+      <Pressable sss="1"></Pressable>
+      <Overlay sss="1"></Overlay>
+    </>
+  );
+};

example/storybook/stories/components/Wrapper.tsx

@@ -45,11 +45,11 @@ const myTheme = extendTheme({
           };
         },
 
-        myNewButton1: (props: any) => {
-          return {
-            padding: props.padding,
-          };
-        },
+        // myNewButton1: (props: any) => {
+        //   return {
+        //     padding: props.padding,
+        //   };
+        // },
       },
       sizes: {
         newsize: ({ mySize }: { mySize: number }) => {

example/storybook/stories/components/composites/Toast/StatusRecipies.tsx

@@ -52,7 +52,7 @@ export const Example = () => {
       maxWidth="100%"
       alignSelf="center"
       flexDirection="row"
-      status={status ?? 'info'}
+      status={status ? status : 'info'}
       variant={variant as any}
       {...rest}
     >
@@ -91,8 +91,9 @@ export const Example = () => {
   return (
     <Center>
       <VStack space={2}>
-        {ToastDetails.map((item) => (
+        {ToastDetails.map((item, index) => (
           <Button
+            key={index}
             colorScheme={item.status}
             onPress={() =>
               toast.show({

package.json

@@ -36,7 +36,7 @@
       "prettier --write"
     ]
   },
-  "version": "3.4.7",
+  "version": "3.4.8",
   "license": "MIT",
   "private": false,
   "main": "lib/commonjs/index",

src/components/composites/Actionsheet/Actionsheet.tsx

@@ -4,6 +4,7 @@ import type { IActionsheetProps } from './types';
 import { usePropsResolution } from '../../../hooks';
 import { ActionSheetContext } from './ActionSheetContext';
 import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+import { Platform } from 'react-native';
 
 const Actionsheet = (
   { children, hideDragIndicator = false, ...props }: IActionsheetProps,
@@ -20,6 +21,9 @@ const Actionsheet = (
   if (useHasResponsiveProps(props)) {
     return null;
   }
+  //Fixing overlay position for Web due to scrollView issue
+  let overlayStyle = Platform.OS === 'web' ? { position: 'fixed' } : {};
+
   return (
     <Modal
       isOpen={isOpen}
@@ -28,6 +32,7 @@ const Actionsheet = (
       overlayVisible={disableOverlay ? false : true}
       closeOnOverlayClick={disableOverlay ? false : true}
       ref={ref}
+      _overlay={{ style: overlayStyle }}
     >
       <ActionSheetContext.Provider value={{ hideDragIndicator }}>
         {children}

src/components/composites/Avatar/Avatar.tsx

@@ -21,7 +21,13 @@ const Avatar = ({ children, ...props }: IAvatarProps, ref: any) => {
       typeof child?.type === 'object' &&
       child?.type.displayName === 'AvatarBadge'
     ) {
-      Badge = React.cloneElement(child, { size: _badgeSize[0] });
+      Badge = React.cloneElement(child, {
+        size: child?.props?.size
+          ? child?.props?.size
+          : _badgeSize
+          ? _badgeSize[0]
+          : undefined,
+      });
     } else {
       remainingChildren.push(child);
     }

src/components/composites/Modal/Modal.tsx

@@ -37,6 +37,7 @@ const Modal = (
     _backdropFade,
     _fade,
     _slide,
+    _overlay,
     ...resolvedProps
   } = usePropsResolution('Modal', rest);
 
@@ -83,6 +84,7 @@ const Modal = (
       isKeyboardDismissable={isKeyboardDismissable}
       animationPreset={animationPreset}
       useRNModalOnAndroid
+      {..._overlay}
     >
       <ModalContext.Provider value={contextValue}>
         <Fade in={visible} style={StyleSheet.absoluteFill} {..._backdropFade}>

src/components/composites/Modal/types.ts

@@ -5,6 +5,7 @@ import type { CustomProps } from '../../../components/types';
 import type { IScrollViewProps } from '../../basic/ScrollView';
 import type { IFadeProps, ISlideProps } from '../Transitions';
 import type { ThemeComponentSizeType } from '../../../components/types/utils';
+import type { IOverlayProps } from '../../primitives/Overlay';
 export interface InterfaceModalProps extends InterfaceBoxProps<IModalProps> {
   /**
    * If true, the modal will open. Useful for controllable state behaviour
@@ -76,6 +77,10 @@ export interface InterfaceModalProps extends InterfaceBoxProps<IModalProps> {
    * Props applied on Child Slide Animation.
    */
   _slide?: Partial<ISlideProps>;
+  /**
+   * Props to be passed to the Overlay used inside of Modal.
+   */
+  _overlay?: IOverlayProps;
 }
 
 export type IModalComponentType = ((

src/components/composites/Toast/Toast.tsx

@@ -11,7 +11,7 @@ import { AccessibilityInfo, Platform, SafeAreaView } from 'react-native';
 import Box from '../../primitives/Box';
 import { usePropsResolution } from '../../../hooks';
 import type { IToastContext, IToastInfo, IToast, IToastProps } from './types';
-
+import { useKeyboardBottomInset } from '../../../utils';
 const INSET = 50;
 
 const POSITIONS = {
@@ -71,6 +71,7 @@ const CustomToast = ({ _overlay, _stack, _presenceTransition }: any) => {
     ToastContext
   );
 
+  const bottomInset = useKeyboardBottomInset() * 2;
   const getPositions = () => {
     return Object.keys(toastInfo);
   };
@@ -110,7 +111,19 @@ const CustomToast = ({ _overlay, _stack, _presenceTransition }: any) => {
                       translateY: transitionConfig[position],
                     }}
                   >
-                    <SafeAreaView>{toast.component}</SafeAreaView>
+                    <SafeAreaView>
+                      <Box
+                        bottom={
+                          ['bottom', 'bottom-left', 'bottom-right'].includes(
+                            position
+                          )
+                            ? bottomInset + 'px'
+                            : undefined
+                        }
+                      >
+                        {toast.component}
+                      </Box>
+                    </SafeAreaView>
                   </PresenceTransition>
                 ))
               }

src/components/composites/Transitions/Fade.tsx

@@ -5,16 +5,26 @@ import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
 import { usePropsResolution } from '../../../hooks/';
 
 const Fade = ({ children, ...props }: IFadeProps, ref?: any) => {
-  const { in: animationState, ...resolvedProps } = usePropsResolution(
-    'Fade',
-    props
-  );
+  const {
+    in: animationState,
+    entryDuration,
+    exitDuration,
+    ...resolvedProps
+  } = usePropsResolution('Fade', props);
   //TODO: refactor for responsive prop
   if (useHasResponsiveProps(props)) {
     return null;
   }
+
+  if (entryDuration) {
+    resolvedProps.animate.transition.duration = entryDuration;
+  }
+  if (exitDuration) {
+    resolvedProps.exit.transition.duration = exitDuration;
+  }
+
   return (
-    <PresenceTransition visible={animationState} {...resolvedProps} ref={ref}>
+    <PresenceTransition visible={animationState} ref={ref} {...resolvedProps}>
       {children}
     </PresenceTransition>
   );

src/components/composites/Transitions/ScaleFade.tsx

@@ -5,14 +5,24 @@ import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
 import { usePropsResolution } from '../../../hooks/';
 
 const ScaleFade = ({ children, ...props }: IScaleFadeProps, ref?: any) => {
-  const { in: animationState, ...resolvedProps } = usePropsResolution(
-    'ScaleFade',
-    props
-  );
+  const {
+    in: animationState,
+    duration,
+    initialScale,
+    ...resolvedProps
+  } = usePropsResolution('ScaleFade', props);
   //TODO: refactor for responsive prop
   if (useHasResponsiveProps(props)) {
     return null;
   }
+  if (duration) {
+    resolvedProps.animate.transition.duration = duration;
+    resolvedProps.exit.transition.duration = duration;
+  }
+  if (initialScale) {
+    resolvedProps.animate.initial.scale = initialScale;
+    resolvedProps.exit.initial.scale = initialScale;
+  }
 
   return (
     <PresenceTransition visible={animationState} {...resolvedProps} ref={ref}>