Update example app for modern Expo Go versions

example/App.tsx

@@ -1,68 +1,43 @@
-import React from 'react';
+import 'react-native-gesture-handler';
+import React, { useMemo, useState } from 'react';
 import { Platform, StatusBar, StyleSheet, View } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
-import * as Font from 'expo-font';
-import AppNavigator from './navigation/AppNavigator';
+import { useFonts } from 'expo-font';
+import AppLoading from 'expo-app-loading';
+import MainTabNavigator from './navigation/MainTabNavigator';
 import DummyNetworkContext from './DummyNetworkContext';
 
 const onlineUrl = 'https://www.google.com/';
 const offlineUrl = 'https://www.weifhweopfhwioehfiwoephfpweoifhewifhpewoif.com';
-interface Props {
-  skipLoadingScreen?: boolean;
-}
-
-interface State {
-  isLoadingComplete: boolean;
-  network: {
-    pingUrl: string;
-    toggleConnection: () => void;
-  };
-}
-export default class App extends React.Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-    this.state = {
-      isLoadingComplete: false,
-      network: {
-        pingUrl: onlineUrl,
-        toggleConnection: this.toggleConnection,
-      },
-    };
-  }
 
-  async componentDidMount() {
-    await Font.loadAsync({
-      ...Ionicons.font,
-      'space-mono': require('./assets/fonts/SpaceMono-Regular.ttf'),
-    });
-    this.setState({ isLoadingComplete: true });
-  }
+export default function App() {
+  const [pingUrl, setPingUrl] = useState(onlineUrl);
+  const [fontsLoaded] = useFonts({
+    ...Ionicons.font,
+    'space-mono': require('./assets/fonts/SpaceMono-Regular.ttf'),
+  });
 
-  toggleConnection = () => {
-    this.setState(prevState => ({
-      network: {
-        ...prevState.network,
-        pingUrl:
-          prevState.network.pingUrl === onlineUrl ? offlineUrl : onlineUrl,
-      },
-    }));
-  };
+  const network = useMemo(
+    () => ({
+      pingUrl,
+      toggleConnection: () =>
+        setPingUrl(current => (current === onlineUrl ? offlineUrl : onlineUrl)),
+    }),
+    [pingUrl],
+  );
 
-  render() {
-    const { isLoadingComplete, network } = this.state;
-    const { skipLoadingScreen } = this.props;
-    if (!isLoadingComplete && !skipLoadingScreen) {
-      return null;
-    }
-    return (
-      <DummyNetworkContext.Provider value={network}>
-        <View style={styles.container}>
-          {Platform.OS === 'ios' && <StatusBar barStyle="default" />}
-          <AppNavigator />
-        </View>
-      </DummyNetworkContext.Provider>
-    );
+  if (!fontsLoaded) {
+    return <AppLoading />;
   }
+
+  return (
+    <DummyNetworkContext.Provider value={network}>
+      <View style={styles.container}>
+        {Platform.OS === 'ios' && <StatusBar barStyle="default" />}
+        <MainTabNavigator />
+      </View>
+    </DummyNetworkContext.Provider>
+  );
 }
 
 const styles = StyleSheet.create({

example/README.md

@@ -7,8 +7,8 @@ You need to have `expo-cli` installed.
 
 ```bash
 cd example
-yarn install
-expo start
+npm ci
+npm run start
 ```
 
 ### Snapshots

example/app.json

@@ -4,7 +4,6 @@
     "slug": "react-native-offline-example",
     "description": "Example application that showcases all the different modules that react-native-offline has to offer",
     "privacy": "public",
-    "sdkVersion": "36.0.0",
     "platforms": [
       "ios",
       "android"

example/navigation/MainTabNavigator.tsx

@@ -1,67 +1,42 @@
 import React from 'react';
 import { Platform } from 'react-native';
-import {
-  createStackNavigator,
-  createBottomTabNavigator,
-} from 'react-navigation';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { NavigationContainer } from '@react-navigation/native';
 
 import TabBarIcon from '../components/TabBarIcon';
 import ComponentsScreen from '../screens/ComponentsScreen';
 import ReduxScreen from '../screens/ReduxScreen';
 import SagasScreen from '../screens/SagasScreen';
 
-const ComponentsStack = createStackNavigator({
-  Components: ComponentsScreen,
-});
-
-type TabBarIconArgs = {
-  focused: boolean;
-};
-
-ComponentsStack.navigationOptions = {
-  tabBarLabel: 'Components',
-  tabBarIcon: ({ focused }: TabBarIconArgs) => (
-    <TabBarIcon
-      focused={focused}
-      name={
-        Platform.OS === 'ios'
-          ? `ios-information-circle${focused ? '' : '-outline'}`
-          : 'md-information-circle'
-      }
-    />
-  ),
-};
-
-const ReduxStack = createStackNavigator({
-  Redux: ReduxScreen,
-});
-
-ReduxStack.navigationOptions = {
-  tabBarLabel: 'Redux',
-  tabBarIcon: ({ focused }: TabBarIconArgs) => (
-    <TabBarIcon
-      focused={focused}
-      name={Platform.OS === 'ios' ? 'ios-link' : 'md-link'}
-    />
-  ),
-};
-
-const SagasStack = createStackNavigator({
-  Sagas: SagasScreen,
-});
-
-SagasStack.navigationOptions = {
-  tabBarLabel: 'Sagas',
-  tabBarIcon: ({ focused }: TabBarIconArgs) => (
-    <TabBarIcon
-      focused={focused}
-      name={Platform.OS === 'ios' ? 'ios-options' : 'md-options'}
-    />
-  ),
-};
-
-export default createBottomTabNavigator({
-  ComponentsStack,
-  ReduxStack,
-  SagasStack,
-});
+const Tab = createBottomTabNavigator();
+
+export default function MainTabNavigator() {
+  return (
+    <NavigationContainer>
+      <Tab.Navigator
+        screenOptions={({ route }) => ({
+          tabBarIcon: ({ focused }) => {
+            let iconName: string;
+            if (route.name === 'Components') {
+              iconName =
+                Platform.OS === 'ios'
+                  ? `ios-information-circle${focused ? '' : '-outline'}`
+                  : 'md-information-circle';
+            } else if (route.name === 'Redux') {
+              iconName = Platform.OS === 'ios' ? 'ios-link' : 'md-link';
+            } else {
+              iconName = Platform.OS === 'ios' ? 'ios-options' : 'md-options';
+            }
+            return <TabBarIcon focused={focused} name={iconName} />;
+          },
+          tabBarActiveTintColor: 'tomato',
+          tabBarInactiveTintColor: 'gray',
+        })}
+      >
+        <Tab.Screen name="Components" component={ComponentsScreen} />
+        <Tab.Screen name="Redux" component={ReduxScreen} />
+        <Tab.Screen name="Sagas" component={SagasScreen} />
+      </Tab.Navigator>
+    </NavigationContainer>
+  );
+}

example/package.json

@@ -12,22 +12,33 @@
   },
   "dependencies": {
     "@expo/samples": "^3.0.3",
-    "@expo/vector-icons": "^10.0.6",
-    "expo": "^36.0.0",
-    "expo-font": "^8.0.0",
-    "react": "16.9.0",
-    "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.1.tar.gz",
-    "react-native-gesture-handler": "^1.5.6",
+    "@expo/vector-icons": "^12.0.0",
+    "@react-navigation/bottom-tabs": "^6.0.9",
+    "@react-navigation/drawer": "^6.1.8",
+    "@react-navigation/native": "^6.0.6",
+    "@react-navigation/stack": "^6.0.11",
+    "expo": "^43.0.0",
+    "expo-app-loading": "~1.2.1",
+    "expo-font": "~10.0.3",
+    "react": "17.0.1",
+    "react-native": "0.64.3",
+    "react-native-gesture-handler": "~1.10.2",
     "react-native-offline": "5.4.0",
-    "react-native-screens": "^2.0.0-beta.2",
-    "react-navigation": "^3.0.9",
+    "react-native-safe-area-context": "3.3.2",
+    "react-native-screens": "~3.8.0",
+    "react-navigation-drawer": "^2.7.1",
+    "react-navigation-stack": "^2.10.4",
+    "react-navigation-tabs": "^2.11.1",
     "redux": "^4.0.5",
     "redux-saga": "^1.1.3"
   },
   "devDependencies": {
     "@types/react-navigation": "3.4.0",
-    "babel-preset-expo": "^8.0.0",
-    "jest-expo": "^36.0.0"
+    "@types/react": "~17.0.21",
+    "@types/react-native": "~0.64.12",
+    "babel-preset-expo": "8.5.1",
+    "jest-expo": "^43.0.0",
+    "typescript": "~4.3.5"
   },
   "private": true
 }

example/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "jsx": "react-native",
+    "target": "esnext",
+    "lib": ["esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "moduleResolution": "node"
+  }
+}