fix: drop usage of __expo

example/metro.config.js

@@ -7,7 +7,11 @@ const pak = require('../package.json');
 
 const root = path.resolve(__dirname, '..');
 
-const modules = ['@expo/vector-icons', ...Object.keys(pak.peerDependencies)];
+const modules = [
+  '@expo/vector-icons',
+  'expo-constants',
+  ...Object.keys(pak.peerDependencies),
+];
 
 module.exports = {
   projectRoot: __dirname,

package.json

@@ -78,6 +78,7 @@
     "eslint-config-callstack-io": "^1.1.1",
     "eslint-plugin-prettier": "^3.0.0",
     "eslint-plugin-react-native": "^3.5.0",
+    "expo-constants": "^9.3.5",
     "flow-bin": "0.92.0",
     "glob": "^7.1.3",
     "husky": "^1.3.1",

src/components/MaterialCommunityIcon.tsx

@@ -16,54 +16,40 @@ try {
   MaterialCommunityIcons = require('react-native-vector-icons/MaterialCommunityIcons')
     .default;
 } catch (e) {
-  if (
-    // @ts-ignore
-    global.__expo &&
-    // @ts-ignore
-    global.__expo.Icon &&
-    // @ts-ignore
-    global.__expo.Icon.MaterialCommunityIcons
-  ) {
-    // Snack doesn't properly bundle vector icons from subpath
-    // Use icons from the __expo global if available
-    // @ts-ignore
-    MaterialCommunityIcons = global.__expo.Icon.MaterialCommunityIcons;
-  } else {
-    let isErrorLogged = false;
+  let isErrorLogged = false;
 
-    // Fallback component for icons
-    // @ts-ignore
-    MaterialCommunityIcons = ({ name, color, size, ...rest }) => {
-      /* eslint-disable no-console */
-      if (!isErrorLogged) {
-        if (
-          !/(Cannot find module|Module not found|Cannot resolve module)/.test(
-            e.message
-          )
-        ) {
-          console.error(e);
-        }
-
-        console.warn(
-          `Tried to use the icon '${name}' in a component from 'react-native-paper', but 'react-native-vector-icons' could not be loaded.`,
-          `To remove this warning, try installing 'react-native-vector-icons' or use another method to specify icon: https://callstack.github.io/react-native-paper/icons.html.`
-        );
-
-        isErrorLogged = true;
+  // Fallback component for icons
+  // @ts-ignore
+  MaterialCommunityIcons = ({ name, color, size, ...rest }) => {
+    /* eslint-disable no-console */
+    if (!isErrorLogged) {
+      if (
+        !/(Cannot find module|Module not found|Cannot resolve module)/.test(
+          e.message
+        )
+      ) {
+        console.error(e);
       }
 
-      return (
-        <Text
-          {...rest}
-          style={[styles.icon, { color, fontSize: size }]}
-          // @ts-ignore
-          pointerEvents="none"
-        >
-          □
-        </Text>
+      console.warn(
+        `Tried to use the icon '${name}' in a component from 'react-native-paper', but 'react-native-vector-icons/MaterialCommunityIcons' could not be loaded.`,
+        `To remove this warning, try installing 'react-native-vector-icons' or use another method to specify icon: https://callstack.github.io/react-native-paper/icons.html.`
       );
-    };
-  }
+
+      isErrorLogged = true;
+    }
+
+    return (
+      <Text
+        {...rest}
+        style={[styles.icon, { color, fontSize: size }]}
+        // @ts-ignore
+        pointerEvents="none"
+      >
+        □
+      </Text>
+    );
+  };
 }
 
 export const accessibilityProps =

src/constants.expo.tsx

@@ -0,0 +1,7 @@
+import { Platform } from 'react-native';
+import Constants from 'expo-constants';
+
+export const APPROX_STATUSBAR_HEIGHT = Platform.select({
+  android: Constants.statusBarHeight,
+  ios: Platform.Version < 11 ? Constants.statusBarHeight : 0,
+});

src/constants.tsx

@@ -0,0 +1 @@
+export const APPROX_STATUSBAR_HEIGHT = 0;