GeekyAnts / GeekyAnts/NativeBase
Error in React 18
- Dominant language
- TypeScript
- Stars
- 20.4k
- Forks
- 2.4k
- PR merge metrics
- No merged PRs in 30d
Description
### 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
4. 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 (
{React.version >= '18' ? children : {children}}
);
};
const InitializeToastRef = () => {
const toast = useToast();
ToastRef.current = toast;
return null;
};
export { NativeBaseProvider };
Contributor guide
Assessment
This issue has not been assessed yet.