sync

src/App.tsx

@@ -1,9 +1,21 @@
 import React, {useState} from 'react';
 
-import {NativeBaseProvider, Box, Input, Text} from 'native-base';
-import {StatusBar} from 'native-base';
+import {StyleSheet, Appearance} from 'react-native';
+import {
+  NativeBaseProvider,
+  Box,
+  Input,
+  Text,
+  Button,
+  useColorMode,
+  useColorModeValue,
+  StatusBar,
+  VStack,
+  Center,
+  Avatar,
+} from 'native-base';
 import {NavigationContainer} from '@react-navigation/native';
-import {SafeAreaProvider} from 'react-native-safe-area-context';
+import {SafeAreaProvider, SafeAreaView} from 'react-native-safe-area-context';
 
 import {theme} from '@caj/configs/colors';
 
@@ -19,25 +31,99 @@ const user: User = {
   id: 0,
 };
 
+function TestContent() {
+  const {colorMode, toggleColorMode, setColorMode} = useColorMode();
+
+  //var bg = useColorModeValue('dark', 'coolGray.800');
+
+  const [curTheme, setTheme] = useState(1);
+  var bg = '#222';
+
+  if (curTheme !== 1) bg = curTheme === 0 ? '#000' : '#fff';
+
+  console.log(colorMode);
+  const toggleSwitch = () => {
+    console.log('switch');
+    toggleColorMode();
+  };
+
+  return (
+    <SafeAreaView style={[styles.container, {backgroundColor: bg}]}>
+      <VStack space={4} alignItems="center">
+        <Center w="64" h="20" bg="indigo.300" rounded="md" shadow={3} />
+        <Center w="64" h="20" bg="indigo.500" rounded="md" shadow={3} />
+        <Center w="64" h="20" bg="indigo.700" rounded="md" shadow={3} />
+        <Box>
+          <Text style={{}}>ma boyy :--)))</Text>
+        </Box>
+        <Avatar bg="green.500" size="xl" source={imgSrc}>
+          EM
+        </Avatar>
+        <Box>
+          <Input w="90%" shadow={10} placeholder="Enter your name" />
+        </Box>
+        <Button
+          w="64"
+          onPress={() => {
+            let theme = curTheme + 1;
+            if (theme > 2) theme = 0;
+            setTheme(theme);
+
+            setColorMode(theme === 0 || theme === 1 ? 'dark' : 'light');
+          }}
+          h={10}>
+          Change theme
+        </Button>
+
+        <Center w="64" h="20" bg="indigo.300" rounded="md" shadow={3} />
+        <Center w="64" h="20" bg="indigo.500" rounded="md" shadow={3} />
+        <Center w="64" h="20" bg="indigo.700" rounded="md" shadow={3} />
+
+        <Center w="64" h="20" bg="indigo.300" rounded="md" shadow={3} />
+        <Center w="64" h="20" bg="indigo.500" rounded="md" shadow={3} />
+        <Center w="64" h="20" bg="indigo.700" rounded="md" shadow={3} />
+
+        <Center w="64" h="20" bg="indigo.300" rounded="md" shadow={3} />
+        <Center w="64" h="20" bg="indigo.500" rounded="md" shadow={3} />
+        <Center w="64" h="20" bg="indigo.700" rounded="md" shadow={3} />
+      </VStack>
+    </SafeAreaView>
+  );
+}
+
+const Bar = () => {
+  const {colorMode, toggleColorMode} = useColorMode();
+
+  return (
+    <StatusBar
+      barStyle={colorMode === 'dark' ? 'light-content' : 'dark-content'}
+      backgroundColor="transparent"
+      translucent={true}
+    />
+  );
+};
+
 const App = () => {
+  useEffect(() => {
+    // this code will run once
+  }, [])
+
   return (
     <NavigationContainer>
-      {
-        <NativeBaseProvider theme={theme}>
-          <StatusBar backgroundColor="transparent" translucent={true} />
-          <Box safeArea>
-            <Text style={{fontFamily: 'Outfit-Bold', color: '#f00'}}>
-              ma boyy :--)))
-            </Text>
-          </Box>
-          <Box alignItems="center">
-            <Input shadow={2} placeholder="Enter your name" />
-          </Box>
-        </NativeBaseProvider>
-      }
+      <NativeBaseProvider theme={theme}>
+        <Bar />
+        <TestContent />
+      </NativeBaseProvider>
     </NavigationContainer>
   );
 };
+
+const styles = StyleSheet.create({
+  container: {
+    height: '100%',
+    flex: 1,
+  },
+});
 /*
 const styles = StyleSheet.create({
   baseText: {

src/caj/configs/appData.ts

@@ -0,0 +1,5 @@
+
+
+export function initAppData() {
+    
+}

src/caj/configs/colors.ts

@@ -1,11 +1,15 @@
 import { extendTheme } from 'native-base';
 
 export const theme = extendTheme({
+  config: {
+    // Changing initialColorMode to 'dark'
+    initialColorMode: 'dark',
+  },
   fonts: {
-    header: 'Outfit-Bold',
-    medium: 'Outfit-Bold',
-    regular: 'Outfit-Bold',
-    semibold: 'Outfit-Bold',
+    header: 'Outfit-Regular',
+    medium: 'Outfit-Regular',
+    regular: 'Outfit-Regular',
+    semibold: 'Outfit-Regular',
   },
   colors: {
     black: {
@@ -41,26 +45,11 @@ export const theme = extendTheme({
         };
       },
     },
-    Heading: {
-      baseStyle: ({colorMode}) => {
-        return {
-          color: colorMode === 'dark' ? 'black.100' : 'primary.500',
-        };
-      },
-      defaultProps: {
-        size: 'xl',
-        fontFamily: 'MontSemibold',
-      },
-    },
     Text: {
-      baseStyle: ({colorMode}) => {
-        return {
-          color: colorMode === 'dark' ? 'black.100' : 'black.300',
-        };
-      },
       defaultProps: {
         size: 'md',
-        fontFamily: 'MontRegular',
+        fontFamily: 'Outfit-Regular',
+        colorScheme: 'red',
       },
       sizes: {
         xl: {
@@ -76,6 +65,15 @@ export const theme = extendTheme({
           fontSize: '12px',
         },
       },
+      Button: {
+        // Can simply pass default props to change default behaviour of components.
+        baseStyle: {
+          rounded: 'md',
+        },
+        defaultProps: {
+          colorScheme: 'red',
+        },
+      },
     },
   },
 });