How to use system images in image slider instead of links in React Native

Question

I am using an image slider in my react native app, currently I am using web links of images to show the slider, but I want to use a custom image like my own images that I have in my assets folder. how can I use these images please help here is my code.

<ImageSlider
  showsHorizontalScrollIndicator={false}
  style={styles.imageOpacity}
  images={[
    "https://placeimg.com/640/640/nature",
    "https://placeimg.com/640/640/people",
    "https://placeimg.com/640/640/animals",
    "https://placeimg.com/640/640/beer"
  ]}
/>

I want to use my custom images instead of this.

Possible duplicate of https://stackoverflow.com/questions/40351857 — Abraham, Jul 23 '19 at 11:57

score 2 · Answer 1 · answered Jul 23 '19 at 11:38

You need to import images from assets and then pass it to component.

import Img01 from 'path-to-img1.png'
import Img02 from 'path-to-img2.png'

[...]

const images = [Img01, Img02]

[...]

<ImageSlider
  showsHorizontalScrollIndicator={false}
  style={styles.imageOpacity}
  images={images}
/>

score 1 · Accepted Answer · answered Jul 23 '19 at 11:38

React Native provides a unified way of managing images and other media assets in your iOS and Android apps. To add a static image to your app, place it somewhere in your source code tree and reference it like this:

<Image source={require('./my-icon.png')} />

A complete guide present here

Or you can do this:

<ImageSlider
                    showsHorizontalScrollIndicator={false}
                    style={styles.imageOpacity}
                    images={[
                     require('../assets/img/art_1.png'),
                     require('../assets/img/art_2.png'),
                     require('../assets/img/art_3.png'),          
                   ]} 
                  />

Let me know if it worked.

Source

How to use system images in image slider instead of links in React Native

2 Answers2