base core

.gitignore

@@ -14,3 +14,6 @@ web-build/
 
 # macOS
 .DS_Store
+
+# lock
+*.lock

App.tsx

@@ -1,20 +1,40 @@
-import { StatusBar } from 'expo-status-bar';
-import { StyleSheet, Text, View } from 'react-native';
+import 'react-native-gesture-handler';
+import { DripsyProvider } from 'dripsy';
+import AppLoading from 'expo-app-loading';
+import { useFonts } from 'expo-font';
+import { StatusBar } from 'expo-status-bar'; 
+import React from 'react';
+import { useColorScheme } from 'react-native';
+import { AppProvider } from './src/ctx';
+import { DarkTheme, LightTheme } from './src/theme';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { HomeScreen } from './src/screens';
+
+const Stack = createNativeStackNavigator();
 
 export default function App() {
+  const theme = useColorScheme() === "light" ? LightTheme : DarkTheme
+
+  let [fontsLoaded] = useFonts({
+    "OpenSans": require("./assets/fonts/OpenSans-Regular.ttf")
+  });
+
+  if (!fontsLoaded) {
+    return <AppLoading />
+  }
+
   return (
-    <View style={styles.container}>
-      <Text>Open up App.tsx to start working on your app!</Text>
-      <StatusBar style="auto" />
-    </View>
-  );
+    <DripsyProvider theme={theme}>
+      <StatusBar style='auto'/>
+      <AppProvider value={{}}>
+        <NavigationContainer>
+          <Stack.Navigator screenOptions={{headerShown: false}}>
+            <Stack.Screen name="Home" component={HomeScreen} />
+          </Stack.Navigator>
+        </NavigationContainer>
+      </AppProvider>
+    </DripsyProvider>
+  )
 }
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});

babel.config.js

@@ -2,5 +2,8 @@ module.exports = function(api) {
   api.cache(true);
   return {
     presets: ['babel-preset-expo'],
+    plugins: [
+      'react-native-reanimated/plugin',
+  ],
   };
 };

package.json

@@ -10,11 +10,20 @@
     "eject": "expo eject"
   },
   "dependencies": {
+    "@react-navigation/native": "^6.0.8",
+    "@react-navigation/native-stack": "^6.5.0",
+    "dripsy": "^3.6.0",
     "expo": "~44.0.0",
+    "expo-app-loading": "~1.3.0",
+    "expo-font": "~10.0.4",
     "expo-status-bar": "~1.2.0",
     "react": "17.0.1",
     "react-dom": "17.0.1",
     "react-native": "0.64.3",
+    "react-native-gesture-handler": "~2.1.0",
+    "react-native-reanimated": "~2.3.1",
+    "react-native-safe-area-context": "3.3.2",
+    "react-native-screens": "~3.10.1",
     "react-native-web": "0.17.1"
   },
   "devDependencies": {

src/ctx/AppCtx.tsx

@@ -0,0 +1,10 @@
+import React, { createContext } from "react";
+import { ProviderProps } from "react";
+
+interface IAppContext {}
+
+export const AppContext = createContext<IAppContext>({});
+
+export const AppProvider = ({ children }: ProviderProps<IAppContext>) => {
+  return <AppContext.Provider value={{}}>{children}</AppContext.Provider>;
+};

src/ctx/index.ts

@@ -0,0 +1 @@
+export { AppContext, AppProvider } from "./AppCtx";

src/screens/HomeScreen.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+import { View, Text } from "dripsy";
+
+const HomeScreen = () => {
+  return <View sx={{ flex: 1, backgroundColor: "background" }}></View>;
+};
+
+export default HomeScreen;

src/screens/index.ts

@@ -0,0 +1 @@
+export {default as HomeScreen} from "./HomeScreen"

src/theme/index.ts

@@ -0,0 +1,67 @@
+import { makeTheme } from "dripsy";
+import { Platform } from "react-native";
+
+const webFont = (font: string) =>
+  Platform.select({
+    web: `${font}, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif`,
+    default: font,
+  });
+
+const Colors = {
+  White: "#ffffff",
+  Button: "#5766f2",
+  BackgroundLight: "#fff",
+  BackgroundDark: "#36393f",
+};
+
+const LightTheme = makeTheme({
+  customFonts: {
+    "OpenSans": {
+      default: webFont("OpenSans"),
+      bold: webFont("OpenSans"),
+      normal: webFont("OpenSans"),
+      400: "OpenSans",
+      500: "OpenSans",
+      600: "OpenSans",
+      700: "OpenSans",
+      800: "OpenSans",
+      900: "OpenSans",
+    },
+  },
+  colors: {
+    text: "#2e3338",
+    heading: "#060607",
+    button: Colors.Button,
+    buttontext: "#ffffff",
+    background: "#fff",
+    backgroundalt: "#f2f3f5",
+  },
+  fonts: { root: "Whitney-Regular" },
+});
+
+const DarkTheme = makeTheme({
+  customFonts: {
+    "OpenSans": {
+      default: webFont("OpenSans"),
+      bold: webFont("OpenSans"),
+      normal: webFont("OpenSans"),
+      400: "OpenSans",
+      500: "OpenSans",
+      600: "OpenSans",
+      700: "OpenSans",
+      800: "OpenSans",
+      900: "OpenSans",
+    },
+  },
+  colors: {
+    text: "#dcddde",
+    heading: "#ffffff",
+    button: Colors.Button,
+    buttontext: "#ffffff",
+    background: Colors.BackgroundDark,
+    backgroundalt: "#2f3136",
+  },
+  fonts: { root: "Whitney-Regular" },
+});
+
+export { Colors, DarkTheme, LightTheme };