Merge pull request #5517 from GeekyAnts/canary-patch

Canary patch

example/storybook/stories/components/primitives/Flex/basic.tsx

@@ -13,7 +13,7 @@ export function Example() {
   return (
     <Box flex="1" safeAreaTop>
       <ScrollView>
-        <VStack space={2.5} w="100%" px="3">
+        <VStack alignItems="start" space={2.5} w="100%" px="3">
           {/* flexDirection -> row */}
           <Heading size="md">row</Heading>
           <Flex direction="row" mb="2.5" mt="1.5">

example/storybook/stories/components/primitives/Icon/CreateIcon.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
 import { createIcon } from 'native-base';
-import { Circle } from 'react-native-svg';
+import { Circle as CircleSvg } from 'react-native-svg';
 export const Example = () => {
   const CustomIcon = createIcon({
     viewBox: '0 0 36 36',
     // d: 'M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0',
     path: [
-      <Circle cx="18" cy="18" r="17.5" fill="#06B6D4" stroke="#0E7490" />,
-      <Circle cx="18" cy="18" r="13.5" fill="white" stroke="#0E7490" />,
-      <Circle cx="18" cy="18" r="9.5" fill="#06B6D4" stroke="#0E7490" />,
-      <Circle cx="18" cy="18" r="5.5" fill="white" stroke="#0E7490" />,
+      <CircleSvg cx="18" cy="18" r="17.5" fill="#06B6D4" stroke="#0E7490" />,
+      <CircleSvg cx="18" cy="18" r="13.5" fill="white" stroke="#0E7490" />,
+      <CircleSvg cx="18" cy="18" r="9.5" fill="#06B6D4" stroke="#0E7490" />,
+      <CircleSvg cx="18" cy="18" r="5.5" fill="white" stroke="#0E7490" />,
     ],
   });
   return <CustomIcon size={12} />;

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Button, Center, VStack, useContrastText } from 'native-base';
 export const Example = () => {
-  const bgDark = 'gray.900';
-  const bgLight = 'gray.50';
+  const bgDark = 'coolGray.900';
+  const bgLight = 'coolGray.100';
   const colorContrastDark = useContrastText(bgDark);
   const colorContrastLight = useContrastText(bgLight);
   return (

example/storybook/stories/theme/Custom/CustomizingVariant.tsx

@@ -15,6 +15,9 @@ export const Example = () => {
           rounded: ({ colorScheme }: any) => {
             return {
               bg: `${colorScheme}.500`,
+              _hover: { bg: `${colorScheme}.600` },
+              _pressed: { bg: `${colorScheme}.700` },
+              _text: { color: `${colorScheme}.50` },
               rounded: 'full',
             };
           },

package.json

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

src/components/composites/AlertDialog/types.ts

@@ -38,7 +38,7 @@ export interface InterfaceAlertDialogProps
    */
   finalFocusRef?: React.RefObject<any> | any;
   /**
-   * If true and the keyboard is opened, the AlertDialog will move up equvivalent to the keyboard height.
+   * If true and the keyboard is opened, the AlertDialog will move up equivalent to the keyboard height.
    * @default false
    */
   avoidKeyboard?: boolean;

src/components/composites/Modal/types.ts

@@ -32,7 +32,7 @@ export interface InterfaceModalProps extends InterfaceBoxProps<IModalProps> {
    */
   finalFocusRef?: React.RefObject<any>;
   /**
-   * If true and the keyboard is opened, the modal will move up equvivalent to the keyboard height.
+   * If true and the keyboard is opened, the modal will move up equivalent to the keyboard height.
    * @default false
    */
   avoidKeyboard?: boolean;

src/components/composites/Toast/types.ts

@@ -57,7 +57,7 @@ export interface InterfaceToastProps extends InterfaceBoxProps<IToastProps> {
    */
   accessibilityLiveRegion?: 'none' | 'polite' | 'assertive';
   /**
-   * If true and the keyboard is opened, the Toast will move up equvivalent to the keyboard height.
+   * If true and the keyboard is opened, the Toast will move up equivalent to the keyboard height.
    * @default false
    */
   avoidKeyboard?: boolean;

src/core/color-mode/hooks.tsx

@@ -32,8 +32,17 @@ export const useAppState = () => {
     () => ({
       getCurrentValue: () => AppState.currentState,
       subscribe: (callback: () => void) => {
-        AppState.addEventListener('change', callback);
-        return () => AppState.removeEventListener('change', callback);
+        const subsription = AppState.addEventListener('change', callback);
+        return () => {
+          if (AppState.removeEventListener) {
+            // React Native < 0.65
+            AppState.removeEventListener('change', callback);
+          } else {
+            // React Native >= 0.65
+            // @ts-ignore:next-line ignoring ts error as devDependency contains "@types/react-native" < 0.65
+            subsription.remove();
+          }
+        };
       },
     }),
     []