Initialize and setup lecture starter

Author: revenets

App.tsx

@@ -1,20 +1,25 @@
-import { StatusBar } from 'expo-status-bar';
-import { StyleSheet, Text, View } from 'react-native';
+import { StatusBar } from "expo-status-bar";
+import { StyleSheet } from "react-native";
+import { SafeAreaProvider } from "react-native-safe-area-context";
+
+import { RootNavigator } from "./navigation";
+import { COLORS_LIGHT } from "./constants";
+import { ThemeProvider } from "./contexts";
 
 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>
-  );
+	return (
+		<SafeAreaProvider style={styles.container}>
+			<ThemeProvider>
+				<RootNavigator />
+			</ThemeProvider>
+		</SafeAreaProvider>
+	);
 }
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
+	container: {
+		flex: 1,
+		alignItems: "center",
+		justifyContent: "center",
+	},
 });

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Dmytro Revenets
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1 @@
+# bsa-rn-base-starter

app.json

@@ -22,6 +22,7 @@
     },
     "web": {
       "favicon": "./assets/favicon.png"
-    }
+    },
+    "plugins": ["expo-font"]
   }
 }

babel.config.js

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

constants/api.ts

@@ -0,0 +1,6 @@
+const API = {
+    QUOTE_URL: 'http://api.forismatic.com/api/1.0',
+    IMAGE_URL: 'https://picsum.photos'
+}
+
+export { API };

constants/colors.ts

@@ -0,0 +1,27 @@
+const COLORS_LIGHT = {
+	appBackground: "#EEECEC",
+	primary900: "#00146D",
+	primary300: "#6d78bd",
+	primary200: "#969ecf",
+	primary100: "#B0B7E5",
+	secondary800: "#6d0014",
+	grey600: "#757575",
+	grey300: "#BDBDBD",
+	fontMain: "#000000",
+	fontInverse: "#FFFFFF",
+} as const;
+
+const COLORS_DARK = {
+	appBackground: "#262626",
+	primary900: "#BA68C8",
+	primary300: "#e1bee7",
+	primary200: "#514951",
+	primary100: "#351401",
+	secondary800: "#c86876",
+	grey300: "#757575",
+	grey600: "#BDBDBD",
+	fontInverse: "#000000",
+	fontMain: "#FFFFFF",
+} as const;
+
+export { COLORS_DARK, COLORS_LIGHT };

constants/index.ts

@@ -0,0 +1,2 @@
+export { API } from './api';
+export { COLORS_DARK, COLORS_LIGHT } from './colors';

contexts/index.ts

@@ -0,0 +1 @@
+export { ThemeProvider, ThemeContext } from './theme-context';

contexts/theme-context.tsx

@@ -0,0 +1,31 @@
+import React, { createContext, useState, useEffect, ReactNode } from 'react';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+import { COLORS_LIGHT, COLORS_DARK } from '../constants';
+
+type ThemeType = typeof COLORS_LIGHT | typeof COLORS_DARK;
+
+interface ThemeContextProps {
+  theme: ThemeType;
+  toggleTheme: () => void;
+}
+
+const ThemeContext = createContext<ThemeContextProps | undefined>(undefined);
+
+const ThemeProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+  const [theme, setTheme] = useState<ThemeType>(COLORS_LIGHT);
+
+  // Add logic to retrieve theme from AsyncStorage here
+
+  const toggleTheme = async () => {
+   // Add logic to toggle theme here
+  };
+
+  return (
+    <ThemeContext.Provider value={{ theme, toggleTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+
+export { ThemeProvider, ThemeContext };

helpers/get-random-number.helper.ts

@@ -0,0 +1,9 @@
+const getRandomNumber = (min?: number, max?: number): number => {
+    if (min && max) {
+        return Math.floor(Math.random() * (max - min + 1)) + min;
+    }
+
+    return Math.floor(Math.random() * 100);
+}
+
+export { getRandomNumber };

helpers/index.ts

@@ -0,0 +1 @@
+export { getRandomNumber } from './get-random-number.helper';

hooks/index.ts

@@ -0,0 +1 @@
+export { useTheme } from './use-theme';

hooks/use-theme.ts

@@ -0,0 +1,11 @@
+import { useContext } from 'react';
+
+import { ThemeContext } from '../contexts';
+
+const useTheme = () => {
+  const context = useContext(ThemeContext);
+
+  return context;
+};
+
+export { useTheme };

navigation/drawer-navigator.tsx

@@ -0,0 +1,15 @@
+import { createDrawerNavigator } from "@react-navigation/drawer";
+
+import { Dashboard, Settings } from '../screens';
+import { Text } from "react-native";
+
+const Drawer = createDrawerNavigator();
+
+const DrawerNavigator = () => {
+    return (
+        // Add Drawer.Navigator here
+        <Text>Hello world!!!</Text>
+    )
+}
+
+export { DrawerNavigator };

navigation/index.ts

@@ -0,0 +1 @@
+export { RootNavigator } from './root-navigator';

navigation/root-navigator.tsx

@@ -0,0 +1,22 @@
+import { NavigationContainer } from "@react-navigation/native";
+import { StatusBar } from "expo-status-bar";
+import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
+
+import { DrawerNavigator } from "./drawer-navigator";
+
+const RootNavigator = () => {
+    const insets = useSafeAreaInsets();
+
+	return (
+		<SafeAreaView style={{ paddingTop: insets.top, paddingBottom: insets.bottom }}>
+			<StatusBar />
+			<NavigationContainer>
+				<>
+					{/* Replace with navigator */}
+				</>
+			</NavigationContainer>
+		</SafeAreaView>
+	);
+};
+
+export { RootNavigator };