Initial commit

App.js

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

app.json

@@ -2,6 +2,7 @@
   "expo": {
     "name": "CityExplorer",
     "slug": "CityExplorer",
+    "scheme": "CityExplorer",
     "version": "1.0.0",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
@@ -22,7 +23,11 @@
       }
     },
     "web": {
-      "favicon": "./assets/favicon.png"
-    }
+      "favicon": "./assets/favicon.png",
+       "bundler": "metro"
+    },
+    "plugins": [
+      "expo-router"
+    ]
   }
 }

app/(tabs)/_layout.tsx

@@ -0,0 +1,34 @@
+import { Tabs } from 'expo-router';
+import Ionicons from '@expo/vector-icons/Ionicons';
+import { useTheme } from 'react-native-paper';
+
+
+export default function TabLayout() {
+  const theme = useTheme();
+  console.log(theme.colors);
+  return (
+    <Tabs  screenOptions ={{ 
+      tabBarInactiveTintColor: theme.colors.primary,
+      tabBarActiveTintColor:theme.colors.onPrimary, 
+      tabBarStyle: {
+        backgroundColor: theme.colors.primaryContainer,
+        borderTopWidth: 0,
+      },
+      headerStyle: {
+        backgroundColor: theme.colors.primaryContainer,
+        borderBottomWidth:0
+      },
+      headerTintColor: theme.colors.primary,
+      }}>
+      <Tabs.Screen name="index" options={{ title: 'Home',tabBarIcon: ({ color, focused }) => (
+            <Ionicons name={focused ? 'home-sharp' : 'home-outline'} color={color} size={24} />
+          ), }} />
+      <Tabs.Screen name="location" options={{ title: 'Location' ,tabBarIcon: ({ color, focused }) => (
+            <Ionicons name={focused ? 'location-sharp' : 'location-outline'} color={color} size={24} />
+          ),}} />
+      <Tabs.Screen name="formScreen" options={{title: 'Create/Edit'  ,tabBarIcon: ({ color, focused }) => (
+            <Ionicons name={focused ? 'add-circle-sharp' : 'add-circle-outline'} color={color} size={24} />
+          ),}} />
+    </Tabs>
+  );
+}

app/(tabs)/formScreen.tsx

@@ -0,0 +1,21 @@
+import { Text, View, StyleSheet } from 'react-native';
+
+export default function FormScreen() {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.text}>Form</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#25292e',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  text: {
+    color: '#fff',
+  },
+});

app/(tabs)/index.tsx

@@ -0,0 +1,23 @@
+import { Text, View, StyleSheet } from 'react-native';
+import { useTheme } from 'react-native-paper';
+
+export default function Index() {
+const theme = useTheme();
+  return (
+    <View style={[styles.container, {backgroundColor: theme.colors.background}]}>
+
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#25292e',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  text: {
+    color: '#fff',
+  },
+});

app/(tabs)/location.tsx

@@ -0,0 +1,21 @@
+import { Text, View, StyleSheet } from 'react-native';
+
+export default function Location() {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.text}>Location View</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#25292e',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  text: {
+    color: '#fff',
+  },
+});

app/_layout.tsx

@@ -0,0 +1,19 @@
+import { Stack } from 'expo-router';
+import { useColorScheme } from 'react-native';
+import { PaperProvider} from 'react-native-paper';
+import { MD3LightTheme, MD3DarkTheme } from 'react-native-paper';
+
+const colorScheme = useColorScheme();
+const theme = colorScheme === 'dark' ? MD3DarkTheme :
+MD3LightTheme;
+
+console.log(colorScheme)
+export default function RootLayout() {
+  return (
+    <PaperProvider theme={theme} >
+        <Stack>
+          <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+        </Stack>
+    </PaperProvider>
+  );
+}

constants/Theme.js

@@ -0,0 +1,93 @@
+import { MD3LightTheme, MD3DarkTheme } from 'react-native-paper';
+
+export const Theme = {
+  light: {
+    colors:{
+    "primary": "rgb(140, 51, 179)",
+    "onPrimary": "rgb(255, 255, 255)",
+    "primaryContainer": "rgb(248, 216, 255)",
+    "onPrimaryContainer": "rgb(50, 0, 71)",
+    "secondary": "rgb(105, 89, 109)",
+    "onSecondary": "rgb(255, 255, 255)",
+    "secondaryContainer": "rgb(241, 220, 244)",
+    "onSecondaryContainer": "rgb(35, 23, 40)",
+    "tertiary": "rgb(129, 82, 80)",
+    "onTertiary": "rgb(255, 255, 255)",
+    "tertiaryContainer": "rgb(255, 218, 216)",
+    "onTertiaryContainer": "rgb(51, 17, 17)",
+    "error": "rgb(186, 26, 26)",
+    "onError": "rgb(255, 255, 255)",
+    "errorContainer": "rgb(255, 218, 214)",
+    "onErrorContainer": "rgb(65, 0, 2)",
+    "background": "rgb(255, 251, 255)",
+    "onBackground": "rgb(30, 27, 30)",
+    "surface": "rgb(255, 251, 255)",
+    "onSurface": "rgb(30, 27, 30)",
+    "surfaceVariant": "rgb(235, 223, 233)",
+    "onSurfaceVariant": "rgb(76, 68, 77)",
+    "outline": "rgb(125, 116, 125)",
+    "outlineVariant": "rgb(206, 195, 205)",
+    "shadow": "rgb(0, 0, 0)",
+    "scrim": "rgb(0, 0, 0)",
+    "inverseSurface": "rgb(51, 47, 51)",
+    "inverseOnSurface": "rgb(246, 239, 243)",
+    "inversePrimary": "rgb(235, 178, 255)",
+    "elevation": {
+      "level0": "transparent",
+      "level1": "rgb(249, 241, 251)",
+      "level2": "rgb(246, 235, 249)",
+      "level3": "rgb(242, 229, 247)",
+      "level4": "rgb(241, 227, 246)",
+      "level5": "rgb(239, 223, 244)"
+    },
+    "surfaceDisabled": "rgba(30, 27, 30, 0.12)",
+    "onSurfaceDisabled": "rgba(30, 27, 30, 0.38)",
+    "backdrop": "rgba(53, 46, 54, 0.4)"
+  }
+  },
+  dark: {
+    "background" : "rgb(235, 178, 255)",
+    colors:{
+    "primary": "rgb(235, 178, 255)",
+    "onPrimary": "rgb(82, 0, 113)",
+    "primaryContainer": "rgb(114, 17, 153)",
+    "onPrimaryContainer": "rgb(248, 216, 255)",
+    "secondary": "rgb(212, 192, 215)",
+    "onSecondary": "rgb(57, 44, 61)",
+    "secondaryContainer": "rgb(80, 66, 85)",
+    "onSecondaryContainer": "rgb(241, 220, 244)",
+    "tertiary": "rgb(245, 183, 181)",
+    "onTertiary": "rgb(76, 37, 36)",
+    "tertiaryContainer": "rgb(102, 59, 57)",
+    "onTertiaryContainer": "rgb(255, 218, 216)",
+    "error": "rgb(255, 180, 171)",
+    "onError": "rgb(105, 0, 5)",
+    "errorContainer": "rgb(147, 0, 10)",
+    "onErrorContainer": "rgb(255, 180, 171)",
+    "background": "rgb(30, 27, 30)",
+    "onBackground": "rgb(232, 224, 229)",
+    "surface": "rgb(30, 27, 30)",
+    "onSurface": "rgb(232, 224, 229)",
+    "surfaceVariant": "rgb(76, 68, 77)",
+    "onSurfaceVariant": "rgb(206, 195, 205)",
+    "outline": "rgb(151, 142, 151)",
+    "outlineVariant": "rgb(76, 68, 77)",
+    "shadow": "rgb(0, 0, 0)",
+    "scrim": "rgb(0, 0, 0)",
+    "inverseSurface": "rgb(232, 224, 229)",
+    "inverseOnSurface": "rgb(51, 47, 51)",
+    "inversePrimary": "rgb(140, 51, 179)",
+    "elevation": {
+      "level0": "transparent",
+      "level1": "rgb(40, 35, 41)",
+      "level2": "rgb(46, 39, 48)",
+      "level3": "rgb(53, 44, 55)",
+      "level4": "rgb(55, 45, 57)",
+      "level5": "rgb(59, 48, 62)"
+    },
+    "surfaceDisabled": "rgba(232, 224, 229, 0.12)",
+    "onSurfaceDisabled": "rgba(232, 224, 229, 0.38)",
+    "backdrop": "rgba(53, 46, 54, 0.4)"
+  }
+  },
+};

package.json

@@ -1,7 +1,7 @@
 {
   "name": "cityexplorer",
   "version": "1.0.0",
-  "main": "index.js",
+  "main": "expo-router/entry",
   "scripts": {
     "start": "expo start",
     "android": "expo start --android",
@@ -9,13 +9,24 @@
     "web": "expo start --web"
   },
   "dependencies": {
+    "@expo/metro-runtime": "~4.0.1",
     "expo": "~52.0.43",
+    "expo-constants": "~17.0.8",
+    "expo-linking": "~7.0.5",
+    "expo-router": "~4.0.20",
     "expo-status-bar": "~2.0.1",
     "react": "18.3.1",
-    "react-native": "0.76.9"
+    "react-dom": "18.3.1",
+    "react-native": "0.76.9",
+    "react-native-paper": "^5.13.1",
+    "react-native-safe-area-context": "4.12.0",
+    "react-native-screens": "~4.4.0",
+    "react-native-web": "~0.19.13"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.0"
+    "@babel/core": "^7.20.0",
+    "@types/react": "~18.3.12",
+    "typescript": "^5.3.3"
   },
   "private": true
 }

tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "paths": {
+      "@/*": [
+        "./*"
+      ],
+      "tailwind.config": [
+        "./tailwind.config.js"
+      ]
+    }
+  },
+  "extends": "expo/tsconfig.base",
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    "**/*.jsx"
+  ]
+}