Image styling not showing properly in react native-CodePudding

I'm really confused as to what i'm doing wrong here.. Anytime I call for the stylesheet to handle styling for this particular image nested in View, i have to declare its dimensions within the actual jsx. Sorry If i'm using any terminology wrong I'm new to react native.

Here's my code that's NOT displaying the image:

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

export default function App() {
  return (
    <View style={styles.container}>

      <View style={styles.restaurantContainer}>

        <Image 
        source = {{ uri:"http://pngimg.com/uploads/google/google_PNG19632.png" }} 
        style = { styles.image }/> 

      </View>
<StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',

    image: {
        width: 100,
        height: 100,

    }, 

    restaurantContainer: {
        width: "100%",


    },
  },
});

here's the code that displays the image fine

    <View style={styles.container}>

      <View style={styles.restaurantContainer}>

        <Image 
        source = {{ uri:"http://pngimg.com/uploads/google/google_PNG19632.png" }} 
        style = {{ height:100, width:100 }}/> 

      </View>

CodePudding user response：

The image style is nested within the container style, which is why it is not found when calling styles.image. The image and restaurantContainer style should be defined at the same level as container like this:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  image: {
    width: 100,
    height: 100,
  },
  restaurantContainer: {
    width: "100%",
  },
});