u

code/app/app-rn/components/ui/gluestack-ui-provider/index.tsx

@@ -0,0 +1,40 @@
+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>
+  )
+}