Help Xcode 11 simulator doesn't show expo App

I just recently switch to SDK v35 for expo and upgraded my Xcode to v11.
But now when I attempt to build by app via the Xcode simulator, the simulator opens up by my expo app does not have a project inside. Does anyone know what’s going on?

You might need to update your Expo CLI too.

Thanks for the help. Would you happen to know how to update my Expo-Cli? I’m doing npm I expo-cli. But it doesn’t seem to be able to update. Its stuck on v3.0.9

npm install -g expo-cli

This is what spits out of my terminal when I run the command. It doesn’t seem to actually update the expo-cli.

Kevins-MacBook:react-native-weather kevinlin$ npm install -g expo-cli
npm WARN deprecated joi@14.0.4: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm WARN deprecated joi@11.4.0: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm WARN deprecated topo@3.0.3: This module has moved and is now available at @hapi/topo. Please update your dependencies as this version is no longer maintained an may contain bugs and security issues.
npm WARN deprecated hoek@6.1.3: This module has moved and is now available at @hapi/hoek. Please update your dependencies as this version is no longer maintained an may contain bugs and security issues.
/usr/local/Cellar/node/10.10.0/bin/expo → /usr/local/Cellar/node/10.10.0/lib/node_modules/expo-cli/bin/expo.js
/usr/local/Cellar/node/10.10.0/bin/expo-cli → /usr/local/Cellar/node/10.10.0/lib/node_modules/expo-cli/bin/expo.js
npm WARN ts-pnp@1.1.4 requires a peer of typescript@* but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @expo/ngrok-bin-darwin-ia32@2.2.8 (node_modules/expo-cli/node_modules/@expo/ngrok-bin-darwin-ia32):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @expo/ngrok-bin-darwin-ia32@2.2.8: wanted {“os”:“darwin”,“arch”:“ia32”} (current: {“os”:“darwin”,“arch”:“x64”})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @expo/ngrok-bin-linux-arm@2.2.8 (node_modules/expo-cli/node_modules/@expo/ngrok-bin-linux-arm):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @expo/ngrok-bin-linux-arm@2.2.8: wanted {“os”:“linux”,“arch”:“arm”} (current: {“os”:“darwin”,“arch”:“x64”})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @expo/ngrok-bin-freebsd-x64@2.2.8 (node_modules/expo-cli/node_modules/@expo/ngrok-bin-freebsd-x64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @expo/ngrok-bin-freebsd-x64@2.2.8: wanted {“os”:“freebsd”,“arch”:“x64”} (current: {“os”:“darwin”,“arch”:“x64”})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @expo/ngrok-bin-freebsd-ia32@2.2.8 (node_modules/expo-cli/node_modules/@expo/ngrok-bin-freebsd-ia32):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @expo/ngrok-bin-freebsd-ia32@2.2.8: wanted {“os”:“freebsd”,“arch”:“ia32”} (current: {“os”:“darwin”,“arch”:“x64”})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @expo/ngrok-bin-linux-arm64@2.2.8 (node_modules/expo-cli/node_modules/@expo/ngrok-bin-linux-arm64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @expo/ngrok-bin-linux-arm64@2.2.8: wanted {“os”:“linux”,“arch”:“arm64”} (current: {“os”:“darwin”,“arch”:“x64”})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @expo/ngrok-bin-sunos-x64@2.2.8 (node_modules/expo-cli/node_modules/@expo/ngrok-bin-sunos-x64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @expo/ngrok-bin-sunos-x64@2.2.8: wanted {“os”:“sunos”,“arch”:“x64”} (current: {“os”:“darwin”,“arch”:“x64”})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @expo/ngrok-bin-win32-ia32@2.2.8-beta.1 (node_modules/expo-cli/node_modules/@expo/ngrok-bin-win32-ia32):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @expo/ngrok-bin-win32-ia32@2.2.8-beta.1: wanted {“os”:“win32”,“arch”:“ia32”} (current: {“os”:“darwin”,“arch”:“x64”})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @expo/ngrok-bin-win32-x64@2.2.8-beta.1 (node_modules/expo-cli/node_modules/@expo/ngrok-bin-win32-x64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @expo/ngrok-bin-win32-x64@2.2.8-beta.1: wanted {“os”:“win32”,“arch”:“x64”} (current: {“os”:“darwin”,“arch”:“x64”})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @expo/ngrok-bin-linux-ia32@2.2.8 (node_modules/expo-cli/node_modules/@expo/ngrok-bin-linux-ia32):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @expo/ngrok-bin-linux-ia32@2.2.8: wanted {“os”:“linux”,“arch”:“ia32”} (current: {“os”:“darwin”,“arch”:“x64”})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @expo/ngrok-bin-linux-x64@2.2.8 (node_modules/expo-cli/node_modules/@expo/ngrok-bin-linux-x64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @expo/ngrok-bin-linux-x64@2.2.8: wanted {“os”:“linux”,“arch”:“x64”} (current: {“os”:“darwin”,“arch”:“x64”})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @expo/traveling-fastlane-linux@1.9.11 (node_modules/expo-cli/node_modules/@expo/traveling-fastlane-linux):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @expo/traveling-fastlane-linux@1.9.11: wanted {“os”:“win32,linux”,“arch”:“any”} (current: {“os”:“darwin”,“arch”:“x64”})

  • expo-cli@3.1.1
    updated 1 package in 78.271s
    Kevins-MacBook:react-native-weather kevinlin$ expo-cli -V
    3.0.9
    Kevins-MacBook:react-native-weather kevinlin$

What do you get if you run expo --version (instead of expo**-cli**).

Also, is it possible you installed expo-cli 3.0.9 with yarn?

What does the following give you?

type -a expo

e.g. I get the following, showing I only have one version of expo in my $PATH.

$ type -a expo
expo is /usr/local/node/bin/expo
1 Like

I’m 100% sure I did not install expo-cli with yarn. I don’t have yarn installed on my computer.

type -a expo
expo is /usr/local/bin/expo
I’m missing the node file (does that make a difference?)

No, the slightly different path is just because I installed node manually. I imagine you used the normal macOS installer which would install it to /usr/local/bin.

What do you get if you run expo --version?

v3.0.9

I have the same problem too. And when I run expo on my Iphone. The icons from expo vector are not showing up either. It only shows square boxes with question mark inside. My expo version is 3.1.1, xcode version is 11.0. When I check the vector-icons dir in the node modules. There’s nothing in the dir vendor/react-native-vector-icons.

hmmm… then it seems that expo-cli is being installed somewhere that is not in your path and you have an additional, old version of expo installed.

I’ve just noticed this from your installation log:

Please post the output of ls -ld /usr/local/{Cellar/node/10.10.0/,}bin/{node,npm,expo,expo-cli}

Post it like this:

```
output here
```

1 Like

Hi @jerus, what version of the SDK are you using? And what does this command give you?

$ grep version.: node_modules/expo{,-font}/package.json 
node_modules/expo/package.json:  "version": "34.0.4",
node_modules/expo-font/package.json:  "version": "6.0.1",

Hi @wodin, my sdk version is 35.0.0 and the command gives me this: node_modules/expo/package.json: "version": "35.0.0" node_modules/expo-font/package.json: "version": "7.0.0"

OK, then it’s not the problem I thought it might be. Sorry.

Here’s my package.json

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "amazon-cognito-identity-js": "^3.0.15",
    "expo": "^35.0.0",
    "expo-font": "^7.0.0",
    "react": "16.8.3",
    "react-dom": "^16.8.6",
    "react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz",
    "react-native-gesture-handler": "^1.3.0",
    "react-native-reanimated": "^1.1.0",
    "react-native-web": "^0.11.4",
    "react-navigation": "^3.12.1",
    "react-redux": "^7.1.1",
    "redux": "^4.0.4",
    "redux-thunk": "^2.3.0"
  },
  "devDependencies": {
    "babel-preset-expo": "^6.0.0",
    "reactotron-react-native": "^3.6.5",
    "reactotron-redux": "^3.1.1",
    "redux-devtools-extension": "^2.13.8"
  },
  "private": true
}

and app.json

{
  "expo": {
    "name": "My Service App",
    "slug": "my-service-app",
    "privacy": "public",
    "sdkVersion": "35.0.0",
    "platforms": ["ios", "android", "web"],
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": ["**/*"],
    "ios": {
      "supportsTablet": true
    }
  }
}

and in the node-module, when I inspected the expo-vector dir, there’s nothing in the react-native-vector-icons folder. I wonder if that’s the problem gives me question mark icons. If so, how come I resolve this?

What does the code look like? The example from the docs works for me. Does it work for you? I modified it slightly to include a MaterialIcon and that works for me too:

import * as React from 'react';
import { View } from 'react-native';
import { Ionicons, MaterialIcons } from '@expo/vector-icons';

export default class IconExample extends React.Component {
  render() {
    return (
      <View style={{margin: 100}}>
        <MaterialIcons name='insert-emoticon' size={32} color='green' />
        <Ionicons name='md-checkmark-circle' size={32} color='green' />
      </View>
    );
  }
}

Here’s what the code looks like

import { Ionicons } from "@expo/vector-icons";
 {
    defaultNavigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, tintColor }) => {
        const { routeName } = navigation.state;
        let IconComponent = Ionicons;
        let iconName;
        if (routeName === "Home") {
          iconName = `ios-home`;
        } else if (routeName === "Inbox") {
          iconName = `ios-chatboxes`;
        } else if (routeName === "Post") {
          iconName = `md-add-circle`;
        } else if (routeName === "History") {
          iconName = `ios-time`;
        } else if (routeName === "Profile") {
          iconName = `md-person`;
        }
        return <IconComponent name={iconName} size={32} color={tintColor} />;
      }
    }),
    tabBarOptions: {
      activeTintColor: "tomato",
      inactiveTintColor: "gray",
      showLabel: false
    }
  }

This works for me. Does it work for you? (Although we’ve gone off the topic of Xcode 11 and the simulator.)

import * as React from "react";
import { View } from "react-native";
import { Ionicons } from "@expo/vector-icons";

const TabBarIcon = props => {
  const { routeName, focused, tintColor } = props;
  let IconComponent = Ionicons;
  let iconName;
  if (routeName === "Home") {
    iconName = `ios-home`;
  } else if (routeName === "Inbox") {
    iconName = `ios-chatboxes`;
  } else if (routeName === "Post") {
    iconName = `md-add-circle`;
  } else if (routeName === "History") {
    iconName = `ios-time`;
  } else if (routeName === "Profile") {
    iconName = `md-person`;
  }
  return <IconComponent name={iconName} size={32} color={tintColor} />;
};

export default class IconExample extends React.Component {
  render() {
    let IconComponent = Ionicons;
    return (
      <View style={style}>
        <TabBarIcon routeName="Home" focused={false} tintColor="tomato" />
        <TabBarIcon routeName="Inbox" focused={false} tintColor="gray" />
        <TabBarIcon routeName="Post" focused={false} tintColor="gray" />
        <TabBarIcon routeName="History" focused={false} tintColor="gray" />
        <TabBarIcon routeName="Profile" focused={false} tintColor="gray" />
      </View>
    );
  }
}

const style = {
  flex: 1,
  flexDirection: "row",
  justifyContent: "space-around",
  alignItems: "center"
};

No it’s not working for me. And yes I do have the same problem for the xcode 11 and the simulator as well.