GeekyAnts / GeekyAnts/NativeBase

Error in React 18

Open
#5,791 0 comments 0 reactions 0 assignees View on GitHub
bug triage v3
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.