Error in React 18

[SantanaDeveloper]

Description

App not starts, because bug in NativeBaseProvider

CodeSandbox/Snack link

https://codesandbox.io/s/native-base-v3-template-mq6ox?file=/src/App.tsx

Steps to reproduce

1. yarn install
2. expo start
3. See error in device

NativeBase Version

3.4.28

Platform

• [ ] Android
• [ ] CRA
• [X] Expo
• [ ] iOS
• [ ] Next

Other Platform

No response

Additional Information

fixed version

import React from 'react'; import { SafeAreaProvider, Metrics, initialWindowMetrics as defaultInitialWindowMetrics, } from 'react-native-safe-area-context'; import { SSRProvider } from '@react-native-aria/utils'; import { theme as defaultTheme, ITheme } from './../theme'; import type { IColorModeProviderProps } from './color-mode'; import HybridProvider from './hybrid-overlay/HybridProvider'; import { OverlayProvider } from '@react-native-aria/overlays'; import { ToastProvider, ToastRef } from '../components/composites/Toast'; import { defaultConfig, INativebaseConfig, NativeBaseConfigProvider, } from './NativeBaseContext'; import { useToast } from '../components/composites/Toast'; import { Platform, useWindowDimensions } from 'react-native'; import { getClosestBreakpoint, platformSpecificSpaceUnits, } from '../theme/tools/utils'; import { ResponsiveQueryProvider } from '../utils/useResponsiveQuery';

// For SSR to work, we need to pass initial insets as 0 values on web.

// https://github.com/th3rdwave/react-native-safe-area-context/issues/132 const defaultInitialWindowMetricsBasedOnPlatform: Metrics | null = Platform.select( { web: { frame: { x: 0, y: 0, width: 0, height: 0 }, insets: { top: 0, left: 0, right: 0, bottom: 0 }, }, default: defaultInitialWindowMetrics, } );

export interface NativeBaseProviderProps { theme?: ITheme; colorModeManager?: IColorModeProviderProps['colorModeManager']; children?: React.ReactNode; initialWindowMetrics?: any; config?: INativebaseConfig; isSSR?: boolean; disableContrastText?: boolean; // Refer https://github.com/th3rdwave/react-native-safe-area-context#testing }

const NativeBaseProvider = (props: NativeBaseProviderProps) => { const { colorModeManager, config = defaultConfig, children, theme: propsTheme = defaultTheme, initialWindowMetrics, isSSR, disableContrastText, } = props; const theme = config.theme ?? propsTheme;

const newTheme = React.useMemo(() => { if (config.enableRem) { return platformSpecificSpaceUnits(theme); } return theme; }, [config.enableRem, theme]);

const windowWidth = useWindowDimensions()?.width;

const currentBreakpoint = React.useMemo( () => getClosestBreakpoint(newTheme.breakpoints, windowWidth), [windowWidth, newTheme.breakpoints] );

return ( <NativeBaseConfigProvider theme={newTheme} config={config} currentBreakpoint={currentBreakpoint} isSSR={isSSR} disableContrastText={disableContrastText} > <SafeAreaProvider initialMetrics={ initialWindowMetrics ?? defaultInitialWindowMetricsBasedOnPlatform } > <ResponsiveQueryProvider disableCSSMediaQueries={!isSSR}> <HybridProvider colorModeManager={colorModeManager} options={theme.config} > <OverlayProvider isSSR> <ToastProvider> <InitializeToastRef /> {React.version >= '18' ? children : <SSRProvider>{children}</SSRProvider>} </ToastProvider> </OverlayProvider> </HybridProvider> </ResponsiveQueryProvider> </SafeAreaProvider> </NativeBaseConfigProvider> ); };

const InitializeToastRef = () => { const toast = useToast(); ToastRef.current = toast; return null; };

export { NativeBaseProvider };