React-native-snap-carousel: Android only: Image not displayed for the first time or alternatively

[meetajhu]

Is this a bug report or a feature request?

Bug Report

Have you read the guidelines regarding bug report?

Yes

Have you read the documentation in its entirety?

Yes

Have you made sure that your issue hasn't already been reported/solved?

Reported before but not what i'm experiencing.

Is the bug specific to iOS or Android? Or can it be reproduced on both platforms?

Android

Is the bug reproducible in a production environment (not a debug one)?

Yes it happens on both debug as well as production release build

Have you been able to reproduce the bug in the provided example?

Yes

Environment

Environment:
React: 16.0.0
React native: 0.51.0
react-native-snap-carousel: 3.4.0

Target Platform:
Android (7.1.1)
iOS (11.2)

Steps to Reproduce

(Write your steps here:)

1. Using Parallax example1 from react-native-snap-carousel/example/src/index.js
2. When i launch the app it loads snap-carousel but does not render the image.
3. But when i minimize the app by pressing the back button and opening the app again from task switcher or app drawer on android it reloads the app and snap-carousel renders the image properly
4. Doing 3rd step again it does not render again. So it happens alternatively.
   

   Expected Behavior

Should render image on the first load

Actual Behavior

When i launch the app it should render or show the images set in entries.js.

Reproducible Demo

https://github.com/archriss/react-native-snap-carousel/tree/master/example

[meetajhu]

Any way i can share a video demo on github?

[Artem-Klyuev]

Have the same issue on android. Both production and debug builds.

[bd-arc]

Hi @meetajhu,

Unfortunately, I think it has to do with how the FlatList component works. I'm currently implementing an option that would let users choose between FlatList and ScrollView (way less bugs, but not usable with huge numbers of items).

I'll let you know when it's done and then we will be able to run some tests together.

[Artem-Klyuev]

as i can see this is a tmp solution https://stackoverflow.com/questions/45736887/react-native-images-are-not-getting-rendered/45751391#45751391. Also you can add this prop to flatlist component "removeClippedSubviews={true}".

[bd-arc]

@Artem-Klyuev Have you tried the SO solution and does it solves the issue? Because I'm pretty sure that this a FlatList rendering issue rather than an image issue.

I guess removeClippedSubviews will do the trick, but I do not recommend using it if you have more than a few slides as this would go against the main purpose of the FlatList component.

[meetajhu]

tried "removeClippedSubviews={true}" on ScrollView component. Still no difference. Facing the same issue

[bd-arc]

@meetajhu It should work if you set it to false.

[bd-arc]

This issue is really driving me mad!

I've tried using a ScrollView component instead of a FlatList one, and it works... but only if the initialization is delayed with a 0 timeout. Moreover, when using a FlatList, it works only if apparitionDelay is set to 0. This makes absolutely no sense at all and is just the result and the miscellaneous ScrollView/FlatList bugs.

Anyway, I'm currently hacking my way around it...

[bd-arc]

Ok, you can now try branch 3.5.0. See this note about using a commit not already published on npm.

A new prop useScrollView has been implemented. As the name suggests, it will make the carousel render a ScrollView instead of the default FlatList (less overall bugs, but no optimizations whatsoever; do not activate this when displaying many items).

You shouldn't have to set useScrollView to true to see the issue go away, but I would appreciate if you could try both cases anyway ;-)

[meetajhu]

@bd-arc

Tried branch 3.5.0 works properly!

[bd-arc]

@meetajhu Thanks for letting me know. They are a few more things I want to implement before publishing version 3.5.0. I'll let you know as soon as it's done!

[meetajhu]

@bd-arc Thanks!

[bd-arc]

Version 3.5.0 has been published ;-)

[buchereli]

I can't get my images to load using ParallaxImage even if I set useScrollView to true

     _renderItem({ item, index }, parallaxProps) {
        return (
            <View style={styles.slide}>
                <ParallaxImage
                    source={require('../../images/logo.png')}
                    parallaxFactor={0.4}
                    {...parallaxProps}
                />
            </View>
        );
    }

    render() {
        return (
            <Carousel
                renderItem={this._renderItem}
                data={this.props.data}
                sliderWidth={sliderWidth}
                itemWidth={itemWidth}
                hasParallaxImages={true}
                useScrollView={true}
            />
        );
    }

[meetajhu]

@buchereli Go through the example properly.

https://github.com/archriss/react-native-snap-carousel/tree/master/example

[bd-arc]

@buchereli Please refer to the issue template to know which information you should provide to help us help you.

In particular:

• Is the bug specific to iOS or Android? Or can it be reproduced on both platforms?
• Have you been able to reproduce the bug in the provided example?
• Provide information about your current environment (RN version, plugin version...).
• Please share a project that reproduces the issue: create a new app using https://snack.expo.io/ and try to reproduce the issue in it.

[miladehghani]

i have got this problem in android and non of these solution works, the problem only goes away when i enable "Debug JS Remotly"

[thanh90]

renderItem for ParallaxImage is little different _renderItemWithParallax ({item, index}, parallaxProps) . you must add parallaxProps