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

[thekevinbrown]

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.

[bd-arc]

Hi @blargity,

Well, you shouldn't be having any difference from when you were using the FlatList branch; that's surprising. Can you tell me the latest commit of that branch you were previously using?

Also, did you try the example and is it working for you?

[thekevinbrown]

I'm not sure what it was at this stage. The example I'm trying is the code above. I don't see a more complete example to try, is there one I'm missing?

[bd-arc]

My mistake, I haven't been clear enough. I was talking about this one ;-)

[adarshTS]

Can anyone here help with this : https://stackoverflow.com/questions/45992749/how-to-get-and-pass-the-details-of-the-active-slide-in-react-native-using-react

[adarshTS]

even I am having the same issue nothing is displayed : https://stackoverflow.com/questions/46049871/why-is-the-data-not-getting-displayed-using-react-native-snap-carousel

[bd-arc]

@adarshTS Can you try to build the provided example and see if the images are properly displayed?

Have you tried on both Android and iOS? What is your React Native version?

[adarshTS]

I have done this in the same way, I am running this in android presently RN version is : 0.47.1
this is my code have a look : https://jsfiddle.net/tnxpLj8c/2/

[bd-arc]

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]

@adarshTS You did not pass any source to your <Image />...

Here is your example, updated:

import React, { Component } from 'react';
import { Dimensions, View, Image } from 'react-native';
import Carousel from 'react-native-snap-carousel';

const { height, width } = Dimensions.get('window');

class TeamScroll extends Component {

    state = {
        images: [
            'https://unsplash.it/300/?random',
            'https://unsplash.it/350/?random',
            'https://unsplash.it/400/?random',
            'https://unsplash.it/450/?random',
            'https://unsplash.it/500/?random',
            'https://unsplash.it/550/?random',
            'https://unsplash.it/600/?random'
        ]
    };

    renderItem = ({item, index}) => {
        return (
            <Image style={styles.logoStyle} source={{ uri: item }} />
        );
    }

    render () {
        return (
            <View>
                <View style={{
                    transform: [{
                        rotate: '-14deg'
                    }]
                }}>
                    <Carousel
                      inactiveSlideOpacity={0.6}
                      inactiveSlideScale={0.65}
                      firstItem={1}
                      sliderWidth={width}
                      itemWidth={width / 3}
                      data={this.state.images}
                      renderItem={this.renderItem}
                    />
                </View>
            </View>
        );
    }
}

const styles = {
    logoStyle: {
        transform: [{
            rotate: '14deg'
        }],
        width: width / 3,
        height: width / 3
    }
};

export default TeamScroll;

And here is the result:

[adarshTS]

@bd-arc But this is not working for local images the images that I use
I have tried in two ways : https://jsfiddle.net/hc8hx4dn/ & https://jsfiddle.net/u95ukjmg/

I even copy pasted the same code that you have shown above but its not working for me
how did it work for you is it the same code as you have shown here

[bd-arc]

As already answered on Stack Overflow: this has nothing to do with the plugin but, most probably, with your images' path.

To prevent such issues, you should define a name for your app in your package.json file:

{
    "name": "app"
}

Then, you'll be able to require your local images this way:

require('app/path/to/your/image.jpg');

Note that I won't debug your app for issues that have nothing to do with the plugin (which is what I've already done until now). I recommend that you create a simple view with just the TeamScroll component I provided you with and to build up from there. This will allow you to understand what prevents your carousel from being displayed.

[thekevinbrown]

@bd-arc, thank you so much!

[adarshTS]

@bd-arc I don't think its the problem with the image path

• I have tried replacing carousel with an Image component it then showed the image

• I also tried putting a few Image components explicitly inside carousel which also worked

This is where I put the images: Project -> src -> components -> Images ->

@blargity can u pls try with local images

[bd-arc]

@adarshTS I've just tried the refactored example with local images and didn't have any issue. This is clearly something on your end.

You should really try the tip I gave you and define an app name...

[adarshTS]

@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

[seajean]

why react-native-snap-carousel do not show local image path, and I can not find any answer, only find one question on stackoverflow and no answer.
https://stackoverflow.com/questions/56654060/how-to-write-local-image-file-path-as-a-uri-path