Created Navigator

App.tsx

@@ -1,100 +1,10 @@
-import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
-import { NavigationContainer } from '@react-navigation/native';
-import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import React from 'react';
-import Icon from 'react-native-vector-icons/AntDesign';
 import './src/assets/languages/i18n';
-import HomeScreen from './src/screens/HomeScreen';
-
-const Tab = createBottomTabNavigator();
-
-const HomeStack = createNativeStackNavigator()
-const HomeStackScreen = () => {
-    return (
-        <HomeStack.Navigator screenOptions={{ headerShown: false }}>
-            <HomeStack.Screen name='Home' component={HomeScreen} />
-        </HomeStack.Navigator>
-    )
-}
-
-const ProfileStack = createNativeStackNavigator()
-const ProfileStackScreen = () => {
-    return (
-        <ProfileStack.Navigator screenOptions={{ headerShown: false }}>
-            <ProfileStack.Screen name='Profile' component={HomeScreen} />
-        </ProfileStack.Navigator>
-    )
-}
-
-const DiscoverStack = createNativeStackNavigator()
-const DiscoverStackScreen = () => {
-    return (
-        <DiscoverStack.Navigator screenOptions={{ headerShown: false }}>
-            <DiscoverStack.Screen name='Discover' component={HomeScreen} />
-        </DiscoverStack.Navigator>
-    )
-}
-
-const NetworkStack = createNativeStackNavigator()
-const NetworkStackScreen = () => {
-    return (
-        <NetworkStack.Navigator screenOptions={{ headerShown: false }}>
-            <NetworkStack.Screen name='Network' component={HomeScreen} />
-        </NetworkStack.Navigator>
-    )
-}
+import Navigator from './src/navigations/Navigator';
 
 const App: React.FC<any> = () => {
     return (
-        <NavigationContainer>
-            <Tab.Navigator screenOptions={{ headerShown: false, tabBarActiveTintColor: "#895DB0" }}>
-                <Tab.Screen
-                    name="Keşfet"
-                    component={HomeStackScreen}
-                    options={{
-                        tabBarIcon: (props) => (
-                            <Icon name="home" {...props} />
-                        ),
-                    }}
-                />
-                <Tab.Screen
-                    name="Ara"
-                    component={DiscoverStackScreen}
-                    options={{
-                        tabBarIcon: (props) => (
-                            <Icon name="search1" {...props} />
-                        ),
-                    }}
-                />
-                <Tab.Screen
-                    name="Ağ"
-                    component={NetworkStackScreen}
-                    options={{
-                        tabBarIcon: (props) => (
-                            <Icon name="pluscircleo" {...props} />
-                        ),
-                    }}
-                />
-                <Tab.Screen
-                    name="Planla"
-                    component={HomeStackScreen}
-                    options={{
-                        tabBarIcon: (props) => (
-                            <Icon name="hearto" {...props} />
-                        ),
-                    }}
-                />
-                <Tab.Screen
-                    name="Profil"
-                    component={ProfileStackScreen}
-                    options={{
-                        tabBarIcon: (props) => (
-                            <Icon name="user" {...props} />
-                        ),
-                    }}
-                />
-            </Tab.Navigator>
-        </NavigationContainer>
+       <Navigator />
     );
 };
 

babel.config.js

@@ -1,3 +1,15 @@
 module.exports = {
   presets: ['module:metro-react-native-babel-preset'],
+  // plugins: [
+  //   [
+  //     "module-resolver",
+  //     {
+  //       root: ["./src"],
+  //       alias: [
+  //         {"@screens": './src/screens'},
+  //       ],
+  //       extensions: [".js", ".jsx", ".ts", ".tsx", ".json"]
+  //     }
+  //   ]
+  // ]
 };

src/components/CommentListItem.tsx

@@ -0,0 +1,86 @@
+import { Block, Text } from 'galio-framework'
+import React from 'react'
+import { Dimensions, Image, StyleSheet, TouchableOpacity, View } from 'react-native'
+
+const { width, height } = Dimensions.get("screen")
+
+function makeid(length: number) {
+    var result           = '';
+    var characters       = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+    var charactersLength = characters.length;
+    for ( var i = 0; i < length; i++ ) {
+      result += characters.charAt(Math.floor(Math.random() * 
+ charactersLength));
+   }
+   return result;
+}
+
+const photos = [
+    "https://randomuser.me/api/portraits/women/90.jpg",
+    "https://randomuser.me/api/portraits/women/88.jpg",
+    "https://randomuser.me/api/portraits/women/87.jpg",
+    "https://randomuser.me/api/portraits/women/86.jpg",
+    "https://randomuser.me/api/portraits/men/52.jpg",
+    "https://randomuser.me/api/portraits/men/50.jpg",
+    "https://randomuser.me/api/portraits/men/51.jpg",
+    "https://randomuser.me/api/portraits/women/84.jpg",
+    "https://randomuser.me/api/portraits/women/81.jpg",
+]
+
+const names = [
+    "Bennie K. Quinn",
+    "Shane G. Burks",
+    "Donald G. Meyer",
+    "Walter L. Weiss",
+    "Jamie R. Peeler",
+]
+
+const CommentListItem = () => {
+    return (
+        <TouchableOpacity activeOpacity={0.5}>
+            <View style={styles.body}>
+                <Image source={{ uri: photos[Math.floor(Math.random() * photos.length)] }} style={styles.pp} borderRadius={100} />
+                <View style={styles.data}>
+                    <View style={styles.title}>
+                        <Text bold>{names[Math.floor(Math.random() * names.length)]}</Text>
+                        <Text size={10} muted>{Math.floor(Math.random() * 60 + 1)} dakika önce</Text>
+                    </View>
+                    <View>
+                        <Text>
+                            {makeid(Math.floor(Math.random()*100 + 50))}
+                        </Text>
+                    </View>
+                </View>
+            </View>
+            <View style={styles.hr} />
+        </TouchableOpacity>
+    )
+}
+
+const styles = StyleSheet.create({
+    body: {
+        flexDirection: "row",
+        marginVertical: 20,
+        maxWidth: width * 0.9,
+        overflow: "visible"
+    },
+    pp: {
+        width: 50,
+        height: 50,
+    },
+    data: {
+        marginLeft: 10,
+    },
+    title: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+    },
+    hr: {
+        borderBottomColor: "#bdbdbd",
+        borderBottomWidth: 1,
+        marginTop: 10,
+    }
+})
+
+export default CommentListItem

src/components/LocationCard.tsx

@@ -0,0 +1,62 @@
+import { Block, Text } from 'galio-framework';
+import React from 'react';
+import { ImageBackground, StyleSheet, TouchableOpacity, View } from 'react-native';
+import Icon from 'react-native-vector-icons/AntDesign';
+import Location from '../types/Location';
+
+export type LocationCardProps = {
+    card: Location,
+    navigation: any,
+}
+
+const LocationCard:React.FC<LocationCardProps> = ({card, navigation}) => {
+
+    return (
+    <Block style={{margin: 10}}>
+      <TouchableOpacity activeOpacity={0.75} style={{borderRadius: 10}} onPress={() => navigation.navigate("LocationDetail", {...card})}>
+        <ImageBackground
+          source={{uri: card?.image}}
+          style={styles.image}
+          borderRadius={10}
+        >
+          <View style={{flexDirection: "row", justifyContent: "space-between"}}>
+            <Block flex row>
+                <Text style={styles.star}>  
+                  <Icon size={15} name='staro' />
+                  {" "}{card?.rate ?? 5.0}
+                </Text>
+            </Block>
+            <Block>
+              <Text style={styles.star}>
+                <Icon size={15} name='hearto' />
+              </Text>
+            </Block>
+          </View>
+        </ImageBackground>
+
+        <View>
+            <Text bold>{card?.title ?? ""}</Text>
+            <Text muted>{card?.subTitle ?? ""}</Text>
+          </View>
+      </TouchableOpacity>
+    </Block>
+  )
+}
+
+const styles = StyleSheet.create({
+  image: {
+    width: 220,
+    height: 140,
+    borderRadius: 20,
+  },
+  star: {
+    backgroundColor: "rgba(89, 89, 89, 0.6)",
+    borderRadius: 10,
+    color: "white",
+    paddingVertical: 5,
+    paddingHorizontal: 10,
+    margin: 2
+  },
+})
+
+export default LocationCard

src/navigations/DiscoverStack.tsx

@@ -0,0 +1,20 @@
+import { createNativeStackNavigator } from "@react-navigation/native-stack"
+import React from "react"
+import DiscoverScreen from "../screens/DiscoverScreen"
+import LocationCommentListScreen from "../screens/location/LocationCommentListScreen"
+import LocationDetailScreen from "../screens/location/LocationDetailScreen"
+import NavigationRoute from "./NavigationRoutes"
+
+const Stack = createNativeStackNavigator()
+
+const DiscoverStack:React.FC<any> = () => {
+    return (
+        <Stack.Navigator screenOptions={{ headerShown: false }}>
+            <Stack.Screen name={NavigationRoute.Discover} component={DiscoverScreen} />
+            <Stack.Screen name={NavigationRoute.LocationDetail} component={LocationDetailScreen} />
+            <Stack.Screen name={NavigationRoute.LocationComments} component={LocationCommentListScreen} />
+        </Stack.Navigator>
+    )
+}
+
+export default DiscoverStack

src/navigations/HomeStack.tsx

@@ -0,0 +1,15 @@
+import { createNativeStackNavigator } from "@react-navigation/native-stack"
+import React from "react"
+import HomeScreen from '../screens/HomeScreen'
+
+const Stack = createNativeStackNavigator()
+
+const HomeStack:React.FC<any> = () => {
+    return (
+        <Stack.Navigator screenOptions={{ headerShown: false }}>
+            <Stack.Screen name='Home' component={HomeScreen} />
+        </Stack.Navigator>
+    )
+}
+
+export default HomeStack

src/navigations/NavigationRoutes.ts

@@ -0,0 +1,31 @@
+enum NavigationRoute {
+    Landing = 'Landing',
+    Home = 'Home',
+    Discover = 'Discover',
+    Profile = 'Profile',
+    Settings = 'Settings',
+    Network = 'Network',
+    LocationDetail = 'LocationDetail',
+    LocationList = 'LocationList',
+    LocationCreate = 'LocationCreate',
+    LocationEdit = 'LocationEdit',
+    LocationDelete = 'LocationDelete',
+    LocationSearch = 'LocationSearch',
+    LocationSearchResults = 'LocationSearchResults',
+    LocationComments = 'LocationComments',
+    LocationCommentsCreate = 'LocationCommentsCreate',
+    Notifications = 'Notifications',
+    Messages = 'Messages',
+    Search = 'Search',
+    Post = 'Post',
+    PostDetail = 'PostDetail',
+    PostEdit = 'PostEdit',
+    PostCreate = 'PostCreate',
+    Login = 'Login',
+    Register = 'Register',
+    ForgotPassword = 'ForgotPassword',
+    ResetPassword = 'ResetPassword',
+    VerifyEmail = 'VerifyEmail',
+}
+
+export default NavigationRoute;