expo39 update

app.json

@@ -3,7 +3,7 @@
     "name": "twitterClone",
     "slug": "twitterClone",
     "privacy": "public",
-    "sdkVersion": "36.0.0",
+    "sdkVersion": "39.0.0",
     "platforms": [
       "ios",
       "android",

package.json

@@ -1,46 +1,46 @@
 {
   "main": "node_modules/expo/AppEntry.js",
   "scripts": {
-    "start": "expo start",
+    "start": "expo r -c --offline",
     "android": "expo start --android",
     "ios": "expo start --ios",
     "web": "expo start --web",
     "eject": "expo eject",
     "lint": "yarn eslint --ext '.js,.ts' ./src"
   },
   "dependencies": {
-    "@expo/vector-icons": "^10.0.6",
+    "@expo/vector-icons": "^10.0.0",
     "@react-native-community/masked-view": "^0.1.7",
-    "@react-navigation/drawer": "^5.3.4",
-    "@react-navigation/material-bottom-tabs": "^5.1.6",
-    "@react-navigation/native": "^5.1.3",
-    "@react-navigation/stack": "^5.2.7",
-    "color": "^3.1.2",
-    "expo": "~36.0.0",
+    "@react-navigation/drawer": "^5.11.4",
+    "@react-navigation/material-bottom-tabs": "^5.3.10",
+    "@react-navigation/native": "^5.8.10",
+    "@react-navigation/stack": "^5.12.8",
+    "color": "^3.1.3",
+    "expo": "~39.0.0",
     "react": "~16.13.1",
     "react-dom": "~16.13.1",
-    "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
-    "react-native-appearance": "~0.3.3",
-    "react-native-gesture-handler": "~1.6.1",
-    "react-native-paper": "^3.6.0",
-    "react-native-reanimated": "~1.4.0",
-    "react-native-safe-area-context": "0.7.3",
-    "react-native-screens": "2.4.0",
-    "react-native-tab-view": "^2.13.0",
-    "react-native-vector-icons": "^6.6.0",
-    "react-native-web": "~0.11.7"
+    "react-native": "https://github.com/expo/react-native/archive/sdk-39.0.4.tar.gz",
+    "react-native-appearance": "~0.3.4",
+    "react-native-gesture-handler": "~1.7.0",
+    "react-native-paper": "^4.4.1",
+    "react-native-reanimated": "~1.13.2",
+    "react-native-safe-area-context": "3.1.4",
+    "react-native-screens": "2.10.1",
+    "react-native-tab-view": "^2.15.2",
+    "react-native-vector-icons": "^7.1.0",
+    "react-native-web": "~0.13.7"
   },
   "devDependencies": {
     "@babel/core": "^7.9.0",
     "@callstack/eslint-config": "^9.1.0",
     "@types/color": "^3.0.1",
     "@types/react": "~16.9.26",
-    "@types/react-native": "~0.61.23",
+    "@types/react-native": "~0.63.37",
     "@typescript-eslint/eslint-plugin": "^2.25.0",
     "@typescript-eslint/parser": "^2.25.0",
     "babel-preset-expo": "~8.1.0",
     "eslint": "^6.8.0",
-    "typescript": "~3.8.3"
+    "typescript": "~4.1.2"
   },
   "private": true
 }

src/bottomTabs.tsx

@@ -10,17 +10,24 @@ import { Feed } from './feed';
 import { Message } from './message';
 import { Notifications } from './notifications';
 import { StackNavigatorParamlist } from './types';
+import type { StackNavigationProp } from '@react-navigation/stack';
+
+import { getFocusedRouteNameFromRoute } from '@react-navigation/native';
 
 const Tab = createMaterialBottomTabNavigator();
 
 type Props = {
   route: RouteProp<StackNavigatorParamlist, 'FeedList'>;
+  navigation: StackNavigationProp<{}>;
 };
 
 export const BottomTabs = (props: Props) => {
-  const routeName = props.route.state
-    ? props.route.state.routes[props.route.state.index].name
-    : 'Feed';
+  const {route, navigation} = props;
+  const routeName = getFocusedRouteNameFromRoute(route);
+  //console.log(routeName)
+  React.useLayoutEffect(() => {
+    navigation.setOptions({ headerTitle: routeName });
+  }, [navigation, route]);
 
   const theme = useTheme();
   const safeArea = useSafeArea();

src/drawerContent.tsx

@@ -1,9 +1,12 @@
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import {
-  DrawerContentComponentProps,
-  DrawerContentOptions,
+  createDrawerNavigator,
   DrawerContentScrollView,
+  DrawerItemList,
   DrawerItem,
+  DrawerContentComponentProps,
+  DrawerContentOptions,
+  DrawerNavigationProp,
 } from '@react-navigation/drawer';
 import React from 'react';
 import { StyleSheet, TouchableOpacity, View } from 'react-native';
@@ -25,6 +28,8 @@ import { PreferencesContext } from './context/preferencesContext';
 type Props = DrawerContentComponentProps<DrawerNavigationProp>;
 
 export function DrawerContent(props: Props) {
+  const { navigation } = props
+  //console.log(navigation)
   const paperTheme = useTheme();
   const { rtl, theme, toggleRTL, toggleTheme } = React.useContext(
     PreferencesContext
@@ -35,6 +40,11 @@ export function DrawerContent(props: Props) {
     outputRange: [-100, -85, -70, -45, 0],
   });
 
+  const goTo = (screen: string) => {
+    console.log("drawer navigation works");
+    navigation.navigate(screen);
+  }
+
   return (
     <DrawerContentScrollView {...props}>
       <Animated.View
@@ -88,15 +98,15 @@ export function DrawerContent(props: Props) {
                 size={size}
               />
             )}
-            label="Profile"
-            onPress={() => {}}
+            label="Feed"
+            onPress={() => {goTo("Feed")}}
           />
           <DrawerItem
             icon={({ color, size }) => (
               <MaterialCommunityIcons name="tune" color={color} size={size} />
             )}
-            label="Preferences"
-            onPress={() => {}}
+            label="Notifications"
+            onPress={() => {goTo("Notifications")}}
           />
           <DrawerItem
             icon={({ color, size }) => (
@@ -106,8 +116,8 @@ export function DrawerContent(props: Props) {
                 size={size}
               />
             )}
-            label="Bookmarks"
-            onPress={() => {}}
+            label="Messages"
+            onPress={() => {goTo("Messages")}}
           />
         </Drawer.Section>
         <Drawer.Section title="Preferences">

src/stack.tsx

@@ -9,6 +9,7 @@ import { BottomTabs } from './bottomTabs';
 import { Details } from './details';
 import { StackNavigatorParamlist } from './types';
 
+
 const Stack = createStackNavigator<StackNavigatorParamlist>();
 
 export const StackNavigator = () => {
@@ -21,7 +22,7 @@ export const StackNavigator = () => {
       screenOptions={{
         header: ({ scene, previous, navigation }) => {
           const { options } = scene.descriptor;
-          const title =
+          const title = 
             options.headerTitle !== undefined
               ? options.headerTitle
               : options.title !== undefined
@@ -80,13 +81,6 @@ export const StackNavigator = () => {
       <Stack.Screen
         name="FeedList"
         component={BottomTabs}
-        options={({ route }) => {
-          console.log('!@# options', { route });
-          const routeName = route.state
-            ? route.state.routes[route.state.index].name
-            : 'Feed';
-          return { headerTitle: routeName };
-        }}
       />
       <Stack.Screen
         name="Details"