feat(*): initial commit

Author: craftzdog

App.tsx

@@ -1,21 +1,11 @@
-import { StatusBar } from 'expo-status-bar';
-import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import React from 'react'
+import AppContainer from './src/components/app-container'
+import Main from './src/screens/main'
 
 export default function App() {
   return (
-    <View style={styles.container}>
-      <Text>Open up App.tsx to start working on your app!</Text>
-      <StatusBar style="auto" />
-    </View>
-  );
+    <AppContainer>
+      <Main />
+    </AppContainer>
+  )
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});

package.json

@@ -10,17 +10,31 @@
     "eject": "expo eject"
   },
   "dependencies": {
+    "@react-navigation/drawer": "^6.1.8",
+    "@react-navigation/native": "^6.0.6",
+    "@types/shortid": "^0.0.29",
     "expo": "~43.0.2",
+    "expo-linking": "^2.4.2",
     "expo-status-bar": "~1.1.0",
+    "moti": "^0.16.1",
+    "native-base": "^3.2.1",
     "react": "17.0.1",
     "react-dom": "17.0.1",
     "react-native": "0.64.3",
-    "react-native-web": "0.17.1"
+    "react-native-reanimated": "^2.2.4",
+    "react-native-safe-area-context": "^3.3.2",
+    "react-native-screens": "^3.9.0",
+    "react-native-svg": "^12.1.1",
+    "react-native-web": "0.17.1",
+    "shortid": "^2.2.16",
+    "styled-components": "^5.3.3",
+    "styled-system": "^5.1.5"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",
     "@types/react": "~17.0.21",
     "@types/react-native": "~0.64.12",
+    "prettier": "^2.4.1",
     "typescript": "~4.3.5"
   },
   "private": true

prettier.config.js

@@ -0,0 +1,10 @@
+const options ={
+  arrowParens: 'avoid',
+  singleQuote: true,
+  backetSpacing: true,
+  endOfLine: 'lf',
+  semi: false,
+  tabWidth: 2,
+  trailingComma: 'none'
+}
+module.exports = options

src/components/app-container.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react'
+import { NavigationContainer } from '@react-navigation/native'
+import { NativeBaseProvider } from 'native-base'
+import theme from '../theme'
+
+type Props = {
+  children: React.ReactNode
+}
+
+export default function AppContainer(props: Props) {
+  return (
+    <NavigationContainer>
+      <NativeBaseProvider theme={theme}>{props.children}</NativeBaseProvider>
+    </NavigationContainer>
+  )
+}

src/components/theme-toggle.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { Text, HStack, Switch, useColorMode } from 'native-base'
+
+export default function ThemeToggle() {
+  const { colorMode, toggleColorMode } = useColorMode()
+  return (
+    <HStack space={2} alignItems="center">
+      <Text>Dark</Text>
+      <Switch
+        isChecked={colorMode === 'light'}
+        onToggle={toggleColorMode}
+      ></Switch>
+      <Text>Light</Text>
+    </HStack>
+  )
+}

src/screens/main.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react'
+import { Text, Box, Center, VStack, useColorModeValue } from 'native-base'
+import ThemeToggle from '../components/theme-toggle'
+
+export default function MainScreen() {
+  return (
+    <Center
+      _dark={{ bg: 'blueGray.900' }}
+      _light={{ bg: 'blueGray.50' }}
+      px={4}
+      flex={1}
+    >
+      <VStack space={5} alignItems="center">
+        <Box p={10} bg={useColorModeValue('red.500', 'yellow.500')}>
+          <Text>Hello</Text>
+        </Box>
+        <ThemeToggle />
+      </VStack>
+    </Center>
+  )
+}

src/theme.ts

@@ -0,0 +1,23 @@
+import { extendTheme } from 'native-base'
+
+const config = {
+  useSystemColorMode: false,
+  initialColorMode: 'light'
+}
+
+const colors = {
+  primary: {
+    50: '#EEF2F6',
+    100: '#CFD9E7',
+    200: '#B1C1D8',
+    300: '#92A9C9',
+    400: '#7491B9',
+    500: '#5578AA',
+    600: '#446088',
+    700: '#334866',
+    800: '#223044',
+    900: '#111822'
+  }
+}
+
+export default extendTheme({ config, colors })

tsconfig.json

@@ -1,6 +1,16 @@
 {
   "extends": "expo/tsconfig.base",
   "compilerOptions": {
-    "strict": true
+    "strict": true,
+    "allowSyntheticDefaultImports": true,
+    "jsx": "react-native",
+    "lib": [
+      "dom",
+      "esnext"
+    ],
+    "moduleResolution": "node",
+    "noEmit": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
   }
 }