Files
workspace/code/app/app-rn3/components/ui/gluestack-ui-provider/index.tsx
T
2026-04-08 17:32:07 +08:00

41 lines
1021 B
TypeScript

import type { ViewProps } from 'react-native'
import { OverlayProvider } from '@gluestack-ui/core/overlay/creator'
import { ToastProvider } from '@gluestack-ui/core/toast/creator'
import { useColorScheme } from 'nativewind'
import * as React from 'react'
import { useEffect } from 'react'
import { View } from 'react-native'
import { config } from './config'
export type ModeType = 'light' | 'dark' | 'system'
export function GluestackUIProvider({
mode = 'light',
...props
}: {
mode?: ModeType
children?: React.ReactNode
style?: ViewProps['style']
}) {
const { colorScheme, setColorScheme } = useColorScheme()
useEffect(() => {
setColorScheme(mode)
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [mode])
return (
<View
style={[
config[colorScheme!],
{ flex: 1, height: '100%', width: '100%' },
props.style,
]}
>
<OverlayProvider>
<ToastProvider>{props.children}</ToastProvider>
</OverlayProvider>
</View>
)
}