Images in React Native image component not showing

Question

don't know if i might have missed the answer somewhere, but i can not figure this out. I have followed this tutorial step by step

https://www.youtube.com/watch?v=0-S5a0eXPoc&list=PLpxKxrPa0P-tqFi2QfXRrYtIEB_YFpxwS&index=5&t=3441s&ab_channel=ProgrammingwithMosh

I have all the latest versions of everything installed as this video was posed on May 2020.

When he gets to adding images at about 56:43 my image does not show up.

Here is my code:

import { StatusBar } from "expo-status-bar";
import React from "react";
import { StyleSheet, Text, View, Image } from "react-native";

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <Image
        source={{
          width: 200,
          height: 300,
          uri: "https://picsum.photos/200/300",
        }}
      />
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

And the result is

I tried looking for different solutions but cant find any, any help would be great as i would love to learn react-native

Thanks

Answer 1

In your print screen you can see that the wifi icon on top has an 'x'.

It's probably the problem, your simulator cant connect to the internet to show the linked image.

Answer 2

Have you tried using other pictures? The code seems right.