Section 3 Video 12

React Native
1

I’m working on the ViewImageScreen and it works fine with just the Image tag until I try to wrap it in a View tag. I’ve tried to update a few things. I’m using TypeScript in the Tabs template and SDK 41… but still confused why the image disappears.

Repo

These shots were taken in the Web Version, but my Android Emulator is doing the same thing. The Image tag shows fine until I try to wrap it in a View tag.

Screenshot_2021-05-07 TabTwoScreen
Screenshot_2021-05-07 TabTwoScreen472×538 112 KB

ViewImageScreen.tsx 

import React from 'react'
import { Image, StyleSheet, Text, View } from 'react-native'

export default function ViewImageScreen(props) {
  return (
    <View style={styles.container}>
      <Image
        resizeMode="contain"
        source={require("../assets/Supplementary/chair.jpg")}
        style={styles.image}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: "#000",
    flex: 1,
  },
  image: {
    width: '100%',
    height: '100%',
  },
});