mfe

expo-project/App.tsx

@@ -1,20 +1,24 @@
 import { StatusBar } from 'expo-status-bar';
-import { StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 
 import { GluestackUIProvider } from '@/components/ui/gluestack-ui-provider';
 import '@/global.css';
-import { SafeAreaView } from 'react-native-safe-area-context';
+import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
 import { CounterProvider } from './states/ConterProvider';
 import IndexPage from './screens/IndexPage';
+import { HStack } from './components/ui/hstack';
+import { Text } from './components/ui/text';
 
 export default function App() {
   return (
     <CounterProvider>
       <GluestackUIProvider mode="light">
-        <SafeAreaView style={{ flex: 1 }} className="m-2">
-          <StatusBar style="auto" />
-          <IndexPage />
-        </SafeAreaView>
+        <SafeAreaProvider>
+          <SafeAreaView style={{ flex: 1 }} className="m-2">
+            <StatusBar style="auto" />
+            <IndexPage />
+          </SafeAreaView>
+        </SafeAreaProvider>
       </GluestackUIProvider>
     </CounterProvider>
   );

expo-project/screens/IndexPage.tsx

@@ -5,24 +5,31 @@ import { HStack } from '@/components/ui/hstack';
 import { Text } from '@/components/ui/text';
 import { VStack } from '@/components/ui/vstack';
 import { useCounterDispatch, useCounterState } from '@/states/ConterProvider';
+import { View } from 'react-native';
 
 export default function IndexPage() {
   const state = useCounterState();
   const dispatch = useCounterDispatch();
 
   return (
-    <Box className="flex-1 justify-center">
-      <Center className="p-3 bg-secondary-500 h-1/2 w-1/2">
-        <Text className="text-lg font-semibold">Count: {state.count}</Text>
-        <HStack className="gap-2">
-          <Button className="w-[250px]" onPress={() => dispatch({ type: 'INCREMENT' })}>
+    <Box className="flex-1 justify-center items-center">
+      <Box className="w-64 h-64 border-secondary-600 border rounded-md p-3">
+        <Center>
+          <Text className="text-lg font-semibold">Count: {state.count}</Text>
+        </Center>
+        <HStack className="flex-1 flex-row gap-2 justify-between">
+          <Button onPress={() => dispatch({ type: 'INCREMENT' })}>
             <ButtonText>+</ButtonText>
           </Button>
-          <Button className="w-[150px]" onPress={() => dispatch({ type: 'DECREMENT' })}>
+          <Button onPress={() => dispatch({ type: 'DECREMENT' })}>
             <ButtonText>-</ButtonText>
           </Button>
         </HStack>
-      </Center>
+        <HStack className="flex-row justify-between">
+          <Text className="text-red-600">Text1</Text>
+          <Text className="text-blue-600">Text2</Text>
+        </HStack>
+      </Box>
     </Box>
   );
 }