react-native-snap-carousel: Can't get anything to render with 3.1.0

Hi there,

First off, thank you for building this component, it’s been very useful thus far!

I upgraded to the flat-list branch before you released 3.0.0 and it was working fine, but now that I’m using 3.1.0 I can’t get anything to render. I had it working just fine with the prerelease branch, so I’m not sure what changed.

Here’s an example that just shows a white screen on both iOS and Android:

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

import Carousel from 'react-native-snap-carousel';

export default class ExampleCarousel extends PureComponent {
    state = {
        data: [{}, {}, {}, {}, {}, {}],
    }

    renderItem = () => (
        <View style={styles.tile} />
    );

    render() {
        return (
            <View style={styles.container}>
                <Carousel
                    data={this.state.data}
                    renderItem={this.renderItem}
                    itemWidth={Dimensions.get('window').width * 0.85}
                    sliderWidth={Dimensions.get('window').width}
                    style={styles.carousel}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    carousel: {
        flex: 1,
        backgroundColor: 'red',
    },
    tile: {
        flexGrow: 1,
        backgroundColor: 'red',
    },
});

Can you let me know how to debug this further? I think I’m following the readme, and I did verify that the Container view is filling the entire screen by changing its background color to green, which made the screen green. So I know the carousel has enough space, it just doesn’t seem to render anything.

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 16 (7 by maintainers)

Most upvoted comments

Hey @blargity,

I had time to try your example and found out what was missing:

you were using style instead of containerCustomStyle (I will push a commit to make it interchangeable)
you forgot to transfer { flex: 1 } with slideStyle
your tile element was missing a width.

Here is the updated code:

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

import Carousel from 'react-native-snap-carousel';

export default class ExampleCarousel extends PureComponent {
    state = {
        data: [{}, {}, {}, {}, {}, {}]
    }

    renderItem = () => (
        <View style={styles.tile} />
    );

    render () {
        return (
            <View style={styles.container}>
                <Carousel
                  data={this.state.data}
                  renderItem={this.renderItem}
                  itemWidth={Dimensions.get('window').width * 0.85}
                  sliderWidth={Dimensions.get('window').width}
                  containerCustomStyle={styles.carousel}
                  slideStyle={{ flex: 1 }}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        height: 300
    },
    carousel: {
        flex: 1,
        backgroundColor: 'red'
    },
    tile: {
        flex: 1,
        width: Dimensions.get('window').width * 0.85,
        backgroundColor: 'yellow'
    }
});

bd-arc on Sep 5, 2017

@bd-arc It finally worked after doing this :

I uninstalled and reinstalled react-native-snap-carousel by doing this I could get the item name and index details in a console but still had some errors when I gave source={item} so then,
I replaced source={item} to source={item.item} and now the images are displayed

adarshTS on Sep 7, 2017