Upgrade the example app

- Upgrade to expo 40
- removed "flow" type checking, since we are not planning to support it in future
- Upgrade to react-navigation@5.x
- Upgrade expo-activity-feed package

.env.example

@@ -1,3 +1,3 @@
 STREAM_API_KEY=
-STREAM_API_SECRET=
-STREAM_APP_ID=
+STREAM_API_TOKEN=
+STREAM_APP_ID=

.expo-shared/assets.json

@@ -1,62 +1,4 @@
 {
-  "5fa24aca61ab8658b8916a3f204a9cc341a97e48b67134f45a6910c76852455b": true,
-  "7f0c89b104ada966637db271f86160a4a5338fcc56aa889936cda1aee0f159d4": true,
-  "b7d23e0dbd06e3555630bc108e09d9b6c14f82022bb58a47bed0c55e91259632": true,
-  "e4232b8720413db7b5186667b6cd1757ebc980fa63dc1fd4107789125e336f99": true,
-  "fcd9fc90dce6c67ba42d4830a3c19b6e7d86d62e060dcd264e4ea753db40cf2a": true,
-  "45e5426727bdb421500ef9ab77740674fcff5fd3a44dc28730c1166426861459": true,
-  "9b88cda86a2a544943c998bf8e52895fa609dfee2f3a8a373e23aac4d20d84a4": true,
-  "17e35f82f25ba63a960c1b58d44a437b7213f1097cfe96cf7c9328a79d74b49f": true,
-  "835d0830b954797c04b8ae5e49ebddf1a94fa970afbf89a39a054a577093441e": true,
-  "d2ee56acc671767e7b7629e76a9e4680b927fc505c0647beaeb39d4597fa44c1": true,
-  "236f523178d898e6d4a16d8e88cf1df7c19177cc33c59698d398690b09128c28": true,
-  "939cc74bd4d4cc3b5a294569e2f805ed3d1a0385a9915cc0918e7fe2fbc5bcd0": true,
-  "a4422494b0639cf095f324216995564b5752da00710f2e97399997a4d87d7452": true,
-  "f9dfa7dbb1d613626feae1411617b189965bfc0b16287dc7f20c88a4c5b972bf": true,
-  "8d0e1da9007e97109dabef30d122210f635bf4f907fbbd6fd0d428a81b2c0331": true,
-  "ba428bd747131726603af089b50e9a31a586acb216c5ebe292f66c2ab7688b85": true,
-  "563239454ad44f2298ab7f9cfb4a199814a296b09b2a5a9f92411c40ebbe4d50": true,
-  "70cb5cdd210b776632793408fe2750166e88b23eab1fc9944d94c79b28f94c1f": true,
-  "a108cf5419e928427cbaf39c13210a7b677bd44624d05e87a0c5b2607f9ad7a3": true,
-  "60671716c63bc7f10df6d4b5eda220555fc4702cae3d7ef03be6f991a9f38c25": true,
-  "c75a70c604ddc6bf2300f02cc775f3c93568e765b61383413d1f775457d251f8": true,
-  "428fc3dbb7186c18912ac4fc2c8af1458da5ca51ba9bdbcb91895894745c2381": true,
-  "09e9ef3e1988404ce17b477d7073173b438a9335c2f5a2b1678f6536b5f41e06": true,
-  "34c045768ef130aa1acb381511b4cdb91b6a5ab1d0a5bb1768ed41ed19718308": true,
-  "412fcd36771de9e1b2dcf678088d49a5c43a55f37a33ef823d375c95c2944628": true,
-  "5a1283fe5badeff8089b54bfcc9c0dac9a5c4dcc7b8b911fd958cd606c401a03": true,
-  "a5b92ea702f0b4089528315beabddf3844c9a200a1d4a9bbe583300b4005f968": true,
-  "e42fc5fd533a3194ab48ffb781e24dc4772c41c0e9cdc3ba858eeba0c87c8594": true,
-  "5dd44aface3cb6a4a251df9d217c6848f347c0c936650644e3bb9669b2f0ee18": true,
-  "b467ccdffd60e496143195bc57943657bc3437994ae65da81f07a0ef25f96a16": true,
-  "d7574a5ff4ee9a6ffb91c384bbaaaf8e47ad26464c28a1eb1a5253939e2df326": true,
-  "68f95475cc49427cafedc26fed8ad79c8aec89ca0d9d14df8c95b9e17bf8258f": true,
-  "8f8d428bfd70b82aa10eefa2736c7003c7d754c6daaa9b3c1fd8014cdfa6d6ac": true,
-  "dc1a7f9094b58f7df33433805f81a8792d110370b1adda776160eee8656ce197": true,
-  "16f3423812b09b2e990ea6833d867f5007cd6dfd59505f59eb996961c5d17771": true,
-  "3520e87326576262af5da3fd599582f8f7ab3c2f70fa0b9778651eb455fecf19": true,
-  "92e63967c4bd4559a2b62b60466190bb9014a3411d90511885eab74293c69a47": true,
-  "baba239f3849ce507e12e66507addfd7dc7d0f4ad846f2d46207d52b3a7acc59": true,
-  "67c53975394eadd5571ad8ea50111fc575b1f5ff84f058f77926ce7b41453f40": true,
-  "4c010360b8b142167cb7380d03a94ab59f620376dd813a4abb7f8512f458c28a": true,
-  "94d9ce90c0c4bea02f57353d104ab56d4df07f6ca80f51439b998fa38a321625": true,
-  "f2ea637887ba30e1b57f91a62101987431f4ba5bf885f8cbccc300dea894e6db": true,
-  "cffc514bf7676e4984e7a7aebd700ee9e2566719410c3226418ea50b23364142": true,
-  "3130e59b2fceec9b2138b2e8cabb867ff400028df93ab9bfa7aeba8f37761c3c": true,
-  "0cbe51b3374c8c3228cebb2304665390ea77a1f0bd6377b0e8d44c49fea95fc3": true,
-  "91bda4e8a8a117ee7c68399faafa96558d0fca7f57c8f19d03927a7f227628ac": true,
-  "fc73c08c608cda30b6df6eac71849016d3a3dcbbf0037eaf70f6eb14b2a75a8f": true,
-  "0c29f8772a06ac3346a65bd92d0de96265167d6fae7852fecbd67ddd6dbe153f": true,
-  "e5a9d333b0067b65b1cef7661909fd2c06479b5b4f91f0f11c102ca01f8281ee": true,
-  "3625f2b962a4c7377214ca8c1917f1dbfe8658842cd8c659bf236d757417a02b": true,
-  "92f4e04d297cc0a4dddc3f6f93555a1fc0e68ded6d0ad899a289bc484f65681e": true,
-  "327a37d89cfadd1fe85efe9b64cfd22841ffad5e12e363c3a8530b52f1c93a25": true,
-  "6671c6a005ad1af1089ca47dcc8c5664590f998bfa5164c85fe50c3c66ea5135": true,
-  "3486852a967e65b309208051472b2a0990551a8d45c52091b04016296fa2378e": true,
-  "48ece34a3a0b2ab94d44d86750dac7630eda48e34cddf49d1fe943a4ff69323d": true,
-  "318f58f27efb42ab666cf753c362089a77a511a7bd93be1f7dcb2e6b3a9eff53": true,
-  "cb5e38c153bcd699a555cf3b5de44782bb9e2494cf5653b5cc37014ff86dd96d": true,
-  "5e9a62da20c427f12e18af64db2f52c3d1224cdbdb4968fc74cc43173ec393a7": true,
-  "e4cc580043120707d18b740c57b8a6362d718e12b2f644c0ea8061c8f70c1ce3": true,
-  "93848dc5ebd2c928d5b20869d3e16e90c52e2cab33935fe45a6f130ff0dd02d8": true
-}
+  "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true,
+  "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true
+}

.gitignore

@@ -1,24 +1,13 @@
-**/.DS_Store
-
-# expo
-.expo/
-
-# dependencies
-/node_modules
-
-# misc
-.env
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-secrets*.*sh
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-#ide
-.idea
-**/.tern-port
-
+node_modules/**/*
+.expo/*
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+
+# macOS
+.DS_Store

App.js

@@ -1,123 +1,70 @@
-//@flow
-import React from 'react';
-import {
-  createStackNavigator,
-  createBottomTabNavigator,
-} from 'react-navigation';
+/* eslint-disable react/display-name */
+import React from "react";
+import { NavigationContainer } from "@react-navigation/native";
+import { createStackNavigator } from "@react-navigation/stack";
+import { SafeAreaProvider } from "react-native-safe-area-view";
 
-import {
-  STREAM_API_KEY,
-  STREAM_API_TOKEN,
-  STREAM_APP_ID,
-} from 'babel-dotenv';
+import { STREAM_API_KEY, STREAM_API_TOKEN, STREAM_APP_ID } from "@env";
 
-import Icon from './components/Icon';
-import HomeScreen from './screens/HomeScreen';
-import SearchScreen from './screens/SearchScreen';
-import NotificationsScreen from './screens/NotificationsScreen';
-import ProfileScreen from './screens/ProfileScreen';
-import EditProfileScreen from './screens/EditProfileScreen';
-import SinglePostScreen from './screens/SinglePostScreen';
-import StatusUpdateScreen from './screens/StatusUpdateScreen';
+import EditProfileScreen, { navigationOptions as editProfileNavigationOptions } from "./screens/EditProfileScreen";
+import SinglePostScreen, { navigationOptions as singlePostNavigationOptions } from "./screens/SinglePostScreen";
+import StatusUpdateScreen, { navigationOptions as statusUpdateNavigationOptions } from "./screens/StatusUpdateScreen";
 
-import {
-  Avatar,
-  StreamApp,
-  IconBadge,
-} from 'expo-activity-feed';
-import type { UserResponse } from './types';
+import { StreamApp } from "expo-activity-feed";
+import { BottomTabNavigator } from "./components/BottomTabNavigator";
 
-// $FlowFixMe
-const NotificationsStack = createStackNavigator({
-  Notifications: { screen: NotificationsScreen },
-});
-
-const ProfileStack = createStackNavigator({
-  Profile: { screen: ProfileScreen },
-});
-
-const SearchStack = createStackNavigator({
-  Search: { screen: SearchScreen },
-});
-
-const HomeStack = createStackNavigator({
-  Home: { screen: HomeScreen },
-});
-
-const TabNavigator = createBottomTabNavigator(
-  {
-    Home: HomeStack,
-    Search: SearchStack,
-    Notifications: NotificationsStack,
-    Profile: ProfileStack,
-  },
-  {
-    navigationOptions: ({ navigation }) => ({
-      tabBarIcon: () => {
-        const { routeName } = navigation.state;
-        if (routeName === 'Home') {
-          return <Icon name="home" />;
-        } else if (routeName === 'Search') {
-          return <Icon name="search" />;
-        } else if (routeName === 'Notifications') {
-          return (
-            <IconBadge showNumber>
-              <Icon name="notifications" />
-            </IconBadge>
-          );
-        } else if (routeName === 'Profile') {
-          return (
-            <Avatar
-              source={(userData: UserResponse) => userData.data.profileImage}
-              size={25}
-              noShadow
-            />
-          );
-        }
-      },
-    }),
-    initialRouteName: 'Home',
-  },
-);
-
-const doNotShowHeaderOption = {
-  navigationOptions: {
-    header: null,
-  },
-};
-
-const Navigation = createStackNavigator({
-  Tabs: {
-    screen: TabNavigator,
-    ...doNotShowHeaderOption,
-  },
-  SinglePost: { screen: SinglePostScreen },
-  NewPost: { screen: StatusUpdateScreen },
-  EditProfile: { screen: EditProfileScreen },
-});
+const Stack = createStackNavigator();
 
 const App = () => {
-  let apiKey = STREAM_API_KEY;
-  let appId = STREAM_APP_ID;
-  let token = STREAM_API_TOKEN;
+  const apiKey = STREAM_API_KEY;
+  const appId = STREAM_APP_ID;
+  const token = STREAM_API_TOKEN;
+
+  // IMPORTANT: This token is should normally be generated server side, so the
+  // client doesn't have access to the master secret.
 
   return (
-    <StreamApp
-      apiKey={apiKey}
-      appId={appId}
-      token={token}
-      defaultUserData={{
-        name: 'Batman',
-        url: 'batsignal.com',
-        desc: 'Smart, violent and brutally tough solutions to crime.',
-        profileImage:
-          'https://i.kinja-img.com/gawker-media/image/upload/s--PUQWGzrn--/c_scale,f_auto,fl_progressive,q_80,w_800/yktaqmkm7ninzswgkirs.jpg',
-        coverImage:
-          'https://i0.wp.com/photos.smugmug.com/Portfolio/Full/i-mwrhZK2/0/ea7f1268/X2/GothamCity-X2.jpg?resize=1280%2C743&ssl=1',
-      }}
-    >
-      <Navigation />
-    </StreamApp>
+    <SafeAreaProvider>
+      <StreamApp
+        apiKey={apiKey}
+        appId={appId}
+        token={token}
+        defaultUserData={{
+          name: "Batman",
+          url: "batsignal.com",
+          desc: "Smart, violent and brutally tough solutions to crime.",
+          profileImage:
+            "https://i.kinja-img.com/gawker-media/image/upload/s--PUQWGzrn--/c_scale,f_auto,fl_progressive,q_80,w_800/yktaqmkm7ninzswgkirs.jpg",
+          coverImage:
+            "https://i0.wp.com/photos.smugmug.com/Portfolio/Full/i-mwrhZK2/0/ea7f1268/X2/GothamCity-X2.jpg?resize=1280%2C743&ssl=1"
+        }}
+      >
+        <NavigationContainer>
+          <Stack.Navigator initialRouteName={BottomTabNavigator}>
+            <Stack.Screen
+              component={BottomTabNavigator}
+              name="BottomTabNavigator"
+              options={{ headerShown: false }}
+            />
+            <Stack.Screen
+              component={SinglePostScreen}
+              name="SinglePost"
+              options={singlePostNavigationOptions}
+            />
+            <Stack.Screen
+              component={StatusUpdateScreen}
+              name="NewPost"
+              options={statusUpdateNavigationOptions}
+            />
+            <Stack.Screen
+              component={EditProfileScreen}
+              name="EditProfile"
+              options={editProfileNavigationOptions}
+            />
+          </Stack.Navigator>
+        </NavigationContainer>
+      </StreamApp>
+    </SafeAreaProvider>
   );
 };
 

app.json

@@ -1,13 +1,32 @@
 {
   "expo": {
-    "sdkVersion": "33.0.0",
-    "name": "ActivityFeedShowcase",
+    "name": "react-native-activity-feed-showcase",
     "slug": "react-native-activity-feed-showcase",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
     "splash": {
-      "image": "./images/splash.png",
+      "image": "./assets/splash.png",
       "resizeMode": "contain",
       "backgroundColor": "#ffffff"
     },
-    "icon": "https://cdn.dribbble.com/users/5912/screenshots/1300524/attachments/181387/io7-isome-icon-P.png"
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#FFFFFF"
+      }
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
   }
 }