CODEWITHSUNDEEP
react-native
Kokab Shakil
Kokab Shakil

Reputation: 117

Image Uri is not working as a props in react native

hello i am new to react native i use a library for slider react-native-flatlist-slider problem is for local image path its not working, its work when I give https://images.unsplash.com/photo-1567226475328-9d6ba here is picture how its work fine enter image description here

but when I change this path to local require(''../assests/Phone-call.png'') its start to through an error here is the picture enter image description here here is my code

const images = [
    {
      image: require('../../assests/Phone-call.png'),
      heading: 'Order any where',
      desc:
        '"Praesent tellus mauris, tincidunt nec ipsum id, faucibus pellentesque leo. Nunc congue ac tellus quis porttitor. "',
    },
    {
      image: require('../../assests/Phone-call.png'),
      heading: 'Order any where',
      desc:
        'Praesent tellus mauris, tincidunt nec ipsum id, faucibus pellentesque leo. Nunc congue ac tellus quis porttitor. ',
    },
  ];

  return (
    <View>
      <FlatListSlider
        data={images}
        height={240}
        timer={5000}
        onPress={item => alert(JSON.stringify(item))}
        component={<Preview />}
        contentContainerStyle={{paddingHorizontal: 0}}
        indicatorContainerStyle={{marginRight: 'auto'}}
        indicatorActiveWidth={30}
        animation
      />
    </View>
  );

preview component code

const Preview: React.FC<{}> = ({
  style,
  item,
  imageKey,
  onPress,
  index,
  active,
  local,
}) => {
  return (
    <View>
      <TouchableOpacity
        style={[styles.videoContainer]}
        onPress={() => onPress(item)}>
        <View style={[styles.imageContainer]}>
          <Image style={[styles.videoPreview]} source={{uri: item[imageKey]}} />
        </View>
        <View>
          <Title title="Order anywhere" />
          <SubTitle amount color="#06B2BC" title={item.desc} />
        </View>
      </TouchableOpacity>
    </View>
  );
};

Upvotes: 1

Views: 950

Answers (1)

Kartikey
Kartikey

Reputation: 5002

Change this line

<Image style={[styles.videoPreview]} source={{uri: item[imageKey]}} />

to this

<Image style={[styles.videoPreview]} source={item[imageKey]} />

The catch here is that...the <Image /> component has a prop source which takes location of image as value..

So if the image is a url for example - https://something_exmaple.com/test.png Then the source property will be written like this

source={{uri: URI_LINK}}

And if its a static file you want to load then you would have to write something like this

source={require(./paht.to/image)}

Check this Snack that I made...It will help you.

Upvotes: 1

Related Questions