CODEWITHSUNDEEP
react-nativecarousel
mshikher
mshikher

Reputation: 164

json value '2' of type nsnumber cannot be converted to nsstring

I am working on a imageSlider using Carousel imported from library: "react-native-banner-carousel"

I am trying to fetch the images which are stored locally inside a folder components. I am creating an array if images and then trying to render them through Carousel.

I am certainly getting an error like: "json value '2' of type nsnumber cannot be converted to nsstring"

ImageSlider code: 

const BannerWidth = Dimensions.get('window').width;
const BannerHeight = 260;

const images = [
    require("./abc.jpg"),
    require("./xyz.jpg")
];

export default class ImageSlider extends React.Component {
    renderPage(image, index) {
        return (
            <View key={index}>
                <Image style={{ width: BannerWidth, height: BannerHeight }} source={{uri:image}} /> 
            </View>
        ); 
    }

render() {
    return (
        <View style={styles.container}>
            <Carousel
                autoplay
                autoplayTimeout={5000}
                loop
                index={0}
                pageSize={BannerWidth}
            >
                {images.map((image, index) => this.renderPage(image, index))}
            </Carousel>
        </View>
    );
}
}

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

As a result I should be able to render all the images displayed inside the images array. But I am getting this error. Where am I getting wrong here?

Upvotes: 4

Views: 5666

Answers (1)

sebastianf182
sebastianf182

Reputation: 9978

Your issue is here:

const images = [
    require("./abc.jpg"),
    require("./xyz.jpg")
];

The require does not return the URL of the image but the internal index of the media. Which in your case I assume is 2, and the interface for the image is expecting a string.

Try this:

<Image style={{ width: BannerWidth, height: BannerHeight }} source={image} />

Upvotes: 10

Related Questions