Merge pull request #5458 from GeekyAnts/release/3.4.18

Release/3.4.18

Author: surajahmed

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

@@ -42,7 +42,7 @@ export const Example = () => {
       </Stack>
       <HStack mt="6" space="3">
         <Text>Toggle Accessible Colors</Text>
-        <Switch onToggle={toggleAccessibleColors} colorScheme="coolGray" />
+        <Switch onValueChange={toggleAccessibleColors} colorScheme="coolGray" />
       </HStack>
     </Center>
   );

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import { useSx } from 'native-base';
+import type { StyledProps } from 'native-base';
+import { View, Text } from 'react-native';
+
+const textStyle: StyledProps = {
+  color: ['orange.900', 'white', 'black'],
+  textAlign: 'center',
+  size: '12',
+};
+
+export const Example = () => {
+  const sx = useSx();
+  console.log('Size', sx(textStyle));
+  return (
+    <View
+      style={[
+        sx({
+          p: 2,
+          bg: ['blue.300', 'violet.400', 'red.400'],
+          width: 48,
+          height: 48,
+        }),
+        { justifyContent: 'center', alignItems: 'center' },
+      ]}
+    >
+      <Text style={sx(textStyle)}>New Feat useSx in NativeBase</Text>
+    </View>
+  );
+};

example/storybook/stories/hooks/useSx/index.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react-native';
+import { withKnobs } from '@storybook/addon-knobs';
+import Wrapper from '../../components/Wrapper';
+import { Example as Basic } from './Basic';
+
+storiesOf('useSx', module)
+  .addDecorator(withKnobs)
+  .addDecorator((getStory: any) => <Wrapper>{getStory()}</Wrapper>)
+  .add('Basic', () => <Basic />);

example/storybook/stories/index.ts

@@ -86,7 +86,7 @@ export * from './hooks/useMediaQuery';
 export * from './hooks/useSafeArea';
 export * from './hooks/useContrastText';
 export * from './hooks/useAccessibleColors';
-
+export * from './hooks/useSx';
 // // Theme
 export * from './theme/Custom';
 export * from './theme/Mode';

package.json

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

src/components/basic/ScrollView/types.ts

@@ -10,7 +10,7 @@ export interface InterfaceScrollViewProps
    * Renders components as Box children. Accepts a JSX.Element or an array of JSX.Element. */
   children?: JSX.Element | JSX.Element[] | string | any;
   /**
-   * pass props to contentContainerStyle, and this also resolved NB tokens.
+   * Pass props to contentContainerStyle, and this also resolves NB tokens.
    */
   _contentContainerStyle?: Partial<IScrollViewProps>;
 }

src/components/composites/Actionsheet/types.tsx

@@ -6,11 +6,11 @@ import type { CustomProps } from '../../../components/types';
 export interface InterfaceActionsheetProps
   extends InterfaceBoxProps<IActionsheetProps> {
   /**
-   * If true, the ActionSheet will open. Useful for controllable state behaviour
+   * If true, the ActionSheet will open. Useful for controllable state behavior.
    */
   isOpen?: boolean;
   /**
-   * Callback invoked when the modal is closed
+   * Callback invoked when the modal is closed.
    */
   onClose?: () => any;
   /**
@@ -36,15 +36,15 @@ export interface InterfaceActionsheetProps
 export interface IActionsheetContentProps
   extends InterfaceBoxProps<IActionsheetContentProps> {
   /**
-   * Props applied on area above actionsheet content
+   * Props applied on area above actionsheet content.
    */
   _dragIndicatorWrapperOffSet?: InterfaceBoxProps<IActionsheetContentProps>;
   /**
-   * Props applied on area around drag indicator
+   * Props applied on area around drag indicator.
    */
   _dragIndicatorWrapper?: InterfaceBoxProps<IActionsheetContentProps>;
   /**
-   * Props applied on drag indicator
+   * Props applied on drag indicator.
    */
   _dragIndicator?: InterfaceBoxProps<IActionsheetContentProps>;
 }

src/components/composites/Alert/types.tsx

@@ -13,7 +13,7 @@ export interface InterfaceAlertProps extends InterfaceBoxProps<IAlertProps> {
    */
   variant?: VariantType<'Alert'>;
 
-  /** The colorScheme of the Alert.
+  /** The color scheme of the Alert.
    */
   colorScheme?: ColorSchemeType;
 }

src/components/composites/Avatar/types.tsx

@@ -10,16 +10,16 @@ export interface InterfaceAvatarProps extends InterfaceBoxProps<IAvatarProps> {
    */
   source?: ImageSourcePropType;
   /**
-   * The size of the avatar
+   * The size of the avatar.
    * @default md
    */
   size?: ThemeComponentSizeType<'Avatar'>;
   /**
-   * For providing props to Image component inside Avatar
+   * For providing props to Image component inside the Avatar.
    */
   _image?: Partial<IImageProps>;
   /**
-   * ref to be attached to Avatar wrapper
+   * ref to be attached to the Avatar wrapper.
    */
   wrapperRef?: MutableRefObject<any>;
 }

src/components/composites/Fab/types.tsx

@@ -3,21 +3,21 @@ import type { InterfaceButtonProps } from '../../primitives/Button/types';
 
 export interface InterfaceFabProps extends InterfaceButtonProps {
   /**
-   * Placement of the Fab
+   * Placement of the Fab.
    * @default bottom-right
    */
   placement?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
   /**
-   * Text to be displayed in Fab
+   * Text to be displayed in Fab.
    */
   label?: JSX.Element | string;
   /**
-   * Icon to be displayed in Fab
+   * Icon to be displayed in Fab.
    */
   icon?: JSX.Element;
   /**
    * Determines whether the Fab should be rendered in a Portal.
-   * Refer this solution before using this prop
+   * Refer to this solution before using this prop-
    * https://github.com/GeekyAnts/NativeBase/issues/3817
    * @default true
    */