0

My local images don't display when using react-native-image-slider

import React, { Component } from "react";
import {
    View,
    Text,
    StyleSheet,
    Button,
    Image,
    TouchableHighlight
} from "react-native";
import ImageSlider from 'react-native-image-slider';

class HomeScreen extends Component {

    render() {          
        return (
            <View style={styles.container}>         
        <View style={{alignItems: 'center'}}>                   
            <ImageSlider
                    loopBothSides
                autoPlayWithInterval={3000}
                images={[
                    '../assets/img/art_1.png',
                    '../assets/img/art_2.png',
                    '../assets/img/art_3.png',          
                ]}  
                style={{width:200, height: 200}}
            />              
        </View>
            </View>
        );
    }
}
export default HomeScreen;

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column',
    justifyContent: 'center'
    }
});

The only things that appears on the screen are the circle icons that tell you what image it's currently displaying. The images themselves are not displayed.

Nompumelelo
  • 929
  • 3
  • 17
  • 28
Brad
  • 19
  • 4

4 Answers4

2

For local image, use require;

images={[
  require('../assets/img/art_1.png'),
  require('../assets/img/art_2.png'),
  require('../assets/img/art_3.png'),          
]}
roel
  • 1,640
  • 14
  • 13
  • Thanks for helping out. I'm still getting the same error, unfortunately. Do you think it could be a dependency issue? I only installed the package with "yarn add react-native-image-slider" – Brad Jun 01 '19 at 04:01
  • This is where I referenced it from: https://www.npmjs.com/package/react-native-image-slider – Brad Jun 01 '19 at 04:14
  • If you check the source code (line 193), the accepted images are either uri string or image's `require`. Make sure that the path to the images is correct (relative to the executing script's path). – roel Jun 01 '19 at 05:37
  • I managed to get it to work with a different package, react-native-image-slider-show. dataSource: [ { title: 'Title 1', caption: 'Caption 1', url: require("../assets/img/art_1.png"), }, ], I couldn't get the old package to work properly. I was wondering though, which file were you referring to about the URI string on line 193? – Brad Jun 05 '19 at 15:30
0

Try this:

<Image source={item} style={styles.customImage} resizeMode={'contain'} />

- instead of -

<Image source={{ uri: item }} style={styles.customImage} />

const profileSlider = [
    // 'https://placeimg.com/640/640/nature',
    // 'https://placeimg.com/640/640/people',
    // 'https://placeimg.com/640/640/animals',
    // 'https://placeimg.com/640/640/beer',
    require('../images/slider/animals.png'),
    require('../images/slider/beer.png'),
    require('../images/slider/nature.png'),
    require('../images/slider/people.png'),
];
dan
  • 1
0

Try this one

dataSource = {
  [{
      url: require('../assets/img/RPImages/RP111_1.jpg')
    },
    {
      url: require('../assets/img/RPImages/RP111_2.jpg')
    },
  ]
}
Vivek Rathod
  • 1
  • 1
    Welcome Vivek, You need to explain more your answer to help better who need your help ok? explain your code and what are you thinking to post a answer like this, thanks! – Matheus Barem Jan 28 '20 at 23:32
0

I had the same problem. I understand that the question was a very long time ago, it will help someone.

According to the documentation, the easiest way to use a slider is like this:

<ImageSlider 
data={[
    {img: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ5a5uCP-n4teeW2SApcIqUrcQApev8ZVCJkA&usqp=CAU'},
    {img: 'https://thumbs.dreamstime.com/b/environment-earth-day-hands-trees-growing-seedlings-bokeh-green-background-female-hand-holding-tree-nature-field-gra-130247647.jpg'},
    {img: 'https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510__340.jpg'}
]}
autoPlay={false}
onItemChanged={(item) => console.log("item", item)}
closeIconColor="#fff"/>

But if you want to use local images you have to use 'require' and property localimg in slider, like this:

<ImageSlider 
data={[
    {img: require('./img/someImg1.jpg')},
    {img: require('./img/someImg2.jpg')},
    {img: require('./img/someImg3.jpg')}
]}
autoPlay={false}
localImg
onItemChanged={(item) => console.log("item", item)}
closeIconColor="#fff"/>
Gleb
  • 1