fix issue : Navigation

navigation/BottomTabNavigator.tsx

@@ -0,0 +1,101 @@
+
+import * as React from 'react';
+import { Ionicons, MaterialCommunityIcons } from '@expo/vector-icons';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { createStackNavigator } from '@react-navigation/stack';
+
+
+import { BottomTabParamList, HomeNavigatorParamList, TabTwoParamList } from './ParamList';
+import ProfilePicture from '../ui/screens/home/components/ProfilePicture';
+// import HomeScreen from './HomeScreen';
+// import TabTwoScreen from './TabTwoScreen';
+
+
+const BottomTab = createBottomTabNavigator<BottomTabParamList>();
+
+
+export default function BottomTabNavigator() {
+
+
+  return (
+    <BottomTab.Navigator
+      initialRouteName="Home"
+      tabBarOptions={{
+        activeTintColor: '#e81031', 
+        showLabel: false,
+      }}>
+      <BottomTab.Screen
+        name="Home"
+        component={HomeNavigator}
+        options={{
+          tabBarIcon: () => <TabBarIcon name="md-home" color={"#e81031"} />,
+        }}
+      />
+      <BottomTab.Screen
+        name="Profile"
+        component={TabTwoNavigator}
+        options={{
+          tabBarIcon: () => <TabBarIcon name="ios-card" color={"#e81031"} />,
+        }}
+      />
+    </BottomTab.Navigator>
+  );
+}
+
+
+function TabBarIcon(props: { name: string; color: string }) {
+  return <Ionicons size={30} style={{ marginBottom: -3 }} {...props} />;
+}
+
+
+const TabOneStack = createStackNavigator<HomeNavigatorParamList>();
+
+
+function HomeNavigator() {
+  return (
+    <TabOneStack.Navigator>
+      <TabOneStack.Screen
+        name="HomeScreen"
+        component={HomeScreen}
+        options={{
+          headerRightContainerStyle: {
+            marginRight: 15,
+          },
+          headerLeftContainerStyle: {
+            marginLeft: 15,
+          },
+          headerTitle: 'Campus Discuss - Home',
+          headerLeft: () => (
+            <ProfilePicture size={40} image={'https://icons-for-free.com/iconfiles/png/512/Android-1320568265274623818.png'} />
+          )
+        }}
+      />
+    </TabOneStack.Navigator>
+  );
+}
+
+
+const TabTwoStack = createStackNavigator<TabTwoParamList>();
+
+
+function TabTwoNavigator() {
+  return (
+    <TabTwoStack.Navigator>
+      <TabTwoStack.Screen
+        name="TabTwoScreen"
+        component={TabTwoScreen}
+        options={{ 
+        headerRightContainerStyle: {
+            marginRight: 15,
+          },
+          headerLeftContainerStyle: {
+            marginLeft: 15,
+          },
+        headerTitle: 'Campus Discuss - Profile', 
+        headerLeft: () => (
+            <ProfilePicture size={40} image={'https://icons-for-free.com/iconfiles/png/512/Android-1320568265274623818.png'} />
+          ) }}
+      />
+    </TabTwoStack.Navigator>
+  );
+}

navigation/LinkingConfiguration.ts

@@ -0,0 +1,25 @@
+
+import * as Linking from 'expo-linking';
+
+export default {
+  prefixes: [Linking.makeUrl('/')],
+  config: {
+    screens: {
+      Root: {
+        screens: {
+          TabOne: {
+            screens: {
+              TabOneScreen: 'one',
+            },
+          },
+          TabTwo: {
+            screens: {
+              TabTwoScreen: 'two',
+            },
+          },
+        },
+      },
+      NotFound: '*',
+    },
+  },
+};

navigation/ParamList.tsx

@@ -0,0 +1,20 @@
+export type RootStackParamList = {
+  Root: undefined;
+  NewPost: undefined;
+  NotFound: undefined;
+};
+
+export type BottomTabParamList = {
+  Home: undefined;
+  Profile: undefined;
+  Stream: undefined;
+};
+
+export type HomeNavigatorParamList = {
+  HomeScreen: undefined;
+};
+
+export type TabTwoParamList = {
+  TabTwoScreen: undefined;
+};
+

navigation/Readme.md

@@ -0,0 +1,34 @@
+# Navigation
+
+To establish navigation between components using Stack Navigator(BottomTab).
+
+### How to use it in your code: 
+
+Just add following 2 lines in your code 
+1. `import Navigation from './navigation';` 
+2. ` <Navigation />`
+
+---
+### Here is a bit more detailed code for `App.tsx` which establishes `Navigation` between different tabs:
+``` 
+import { StatusBar } from 'expo-status-bar';
+import React from 'react';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+
+import Navigation from './navigation';
+
+export default function App() {
+  const isLoadingComplete = useCachedResources();
+
+  if (!isLoadingComplete) {
+    return null;
+  } else {
+    return (
+      <SafeAreaProvider>
+        <Navigation />
+        <StatusBar />
+      </SafeAreaProvider>
+    );
+  }
+}
+```

navigation/index.tsx

@@ -0,0 +1,43 @@
+/**
+ * If you are not familiar with React Navigation, check out the "Fundamentals" guide:
+ * https://reactnavigation.org/docs/getting-started
+ * Read more here: https://reactnavigation.org/docs/modal
+ */
+
+
+import * as React from 'react'; 
+import { NavigationContainer, DefaultTheme, DarkTheme } from '@react-navigation/native';
+import { createStackNavigator } from '@react-navigation/stack';
+import { ColorSchemeName } from 'react-native';
+
+
+import BottomTabNavigator from './BottomTabNavigator';
+import LinkingConfiguration from './LinkingConfiguration';
+import { RootStackParamList } from './ParamList';
+// import NewPostScreen from "./NewPostScreen";
+// import NotFoundScreen from './NotFoundScreen';
+
+
+export default function Navigation({ colorScheme }: { colorScheme: ColorSchemeName }) {
+  return (
+    <NavigationContainer
+      linking={LinkingConfiguration}
+      theme={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
+      <RootNavigator />
+    </NavigationContainer>
+  );
+}
+
+
+const Stack = createStackNavigator<RootStackParamList>();
+
+
+function RootNavigator() {
+  return (
+    <Stack.Navigator screenOptions={{ headerShown: false }}>
+      <Stack.Screen name="Root" component={BottomTabNavigator} />
+      <Stack.Screen name="NewPost" component={NewPostScreen} />
+      <Stack.Screen name="NotFound" component={NotFoundScreen} options={{ title: 'Oops!' }} />
+    </Stack.Navigator>
+  );
+}