Question 167289 in React native Question posted in
The official React Native documentation can be found here.

image is not loading in react native expo

please consider this code

export default function App({navigation}) {
const {height, width} = Dimensions.get('window');
const entry = ({navigation})
return (  
<View>
  <Image href={require('./assets/bg_login.jpg')}
  style = {[styles.image]}
    />
</View>
);

}

css:

image: {
    width: 100,
    height: 100
  },

I am trying to load the image with this code but for some reason it doesnt work and neither does it throw any error or any thing.

what have I already tried

  1. I have already checked the image and it’s fine
  2. I have tried replacing the image and that doesnt work either
  3. I have tried giving height and width in percentage
  4. I have checked the path and image name everything is fine
    screenshot of my code
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    so for some reason the above code shows no output and doesnt throw an error either. I have figured out and alternative way to make it work and I will post it down here just in case someone encounters the same error again:

    Please ignore the additional dependencies i have imported, you probably wont be needing them, I have imported these because I plan to use them ahead in my code

    import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, Dimensions,TextInput, Pressable, 
BackHandler, ImageBackground } from 'react-native';
import styles from './styles';
import Svg, { Image, Ellipse, ClipPath } from 'react-native-svg';
import  Animated, {useSharedValue, useAnimatedStyle, interpolate, 
withTiming, withDelay, color, Value}  from 'react-native-reanimated';


export default function App({navigation}) {
const {height, width} = Dimensions.get('window');
const entry = ({navigation})
return (  
<View>
<Svg>
<Image href={require('./assets/background.jpg')}
width = {width} 
height = {height + 100}
preserveAspectRatio = "xMidYMid slice"
/>
</Svg>
</View>
);
}

  2. 0

    you using href instead of source

          <Image source={require('./assets/snack-icon.png')} style={[styles.image]} />

    updated, with full sample code that working
    and you can remove the [] on style of image {styles.image}

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

export default function App({ navigation }) {
  const { height, width } = Dimensions.get('window');
  const entry = { navigation };

  return (
    <View>
      <Image source={require('./assets/snack-icon.png')} style={styles.image} />
    </View>
  );
}

const styles = StyleSheet.create({
  image: {
    width: 100,
    height: 100,
  },
});

    sample link https://snack.expo.dev/@rudiahmad/bossy-tortillas

    maybe you have issue with the styling, are you sure put the correct style?

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search