React-native-snap-carousel: Rendering items multiple times

[sridhard]

Is this a bug report or a feature request?

Bug

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?

Yes

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

I tested in android only

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

Yes

Have you made sure that it wasn't a React Native bug?

Yes

Have you been able to reproduce the bug in [the provided example]

Yes

Environment

Environment:
React: 16.4.1
React native: 0.56.0
react-native-snap-carousel: 3.7.2

Target Platform:
Android (6.0)

Steps to Reproduce

1. I have 2 items supplied to React-native-snap-carousel. When we run the app in android each item render() method is called twice

2. Register for orientation change as in https://github.com/archriss/react-native-snap-carousel/blob/master/doc/TIPS_AND_TRICKS.md#handling-device-rotation
   When orientation change, 2 items are rendered and the render() method of each item called once.
   Again after that the render() method of these 2 items are called 2 times. Means during orientation change each items render is called 3 times.

Expected Behavior

1. During initial rendering and also on the reRendering on orientation change the render method of each item should be called only once.

Actual Behavior

Render method is called mutiple times

Reproducible Demo

Try demo in https://github.com/archriss/react-native-snap-carousel/blob/master/doc/TIPS_AND_TRICKS.md#handling-device-rotation

[bd-arc]

Hi @sridhard,

I'm afraid this has to do with the inner logic of the FlatList component.

Can you try swapping your Carousel component for a regular FlatList one (data and renderItem props are the same) and tell me if, when onLayout is called, you're faced with the same issue?

[bd-arc]

@sridhard Any news regarding the issue? Have you been able to reproduce the matter with a regular FlatList component?

[bd-arc]

Closing as no further feedback has been provided.

[sridhard]

@bd-arc Flatlist dont have this issue...

[sridhard]

I think this is similar to #329 ..please check

[bd-arc]

@sridhard Glad you're finally gracing us with some "feedback"...

What would really help understanding and therefore fixing the issue would be:

• to stop spamming other threads;
• to test on iOS and determine if the issue is specific to Android;
• to explain what makes you so positive that FlatList has nothing to do with the issue since other users have apparently found otherwise;
• to create a Snack example that reproduces the issue and that includes both a Carousel and a FlatList with the exact same data and renderItem props.

If you can do all of the above, we'll be on our way to finding the root of the issue.

[UdaraJay]

I had the same issue and at-least in my case it turned out to be the case the issue was the content in the carousel component - the items were re-rendering continuously... which slowed down the carousel and made it look very glitchy.

So I'd suggest taking a second look at the content you put in the carousel. Also debug around setting widths or using absolute positioning in there. (You'd know if that's the case right away if you try removing the contents from the items you're attaching and it starts working fine).

[c100k]

I had the same issue as well and disabling loop renders items only once. Don't know if it helps.

[kdrich]

Even with a static array, the carousel renders the first 6 items ~ 3 times, then renders them all 1-2 times before the app crashes without an error message.

Upgrading from

  "react": "^16.3.1",
    "react-native": "^0.55.4",

to

    "react": "16.6.1",
    "react-native": "0.58.0-rc.0"

seems to have introduced the issue.

const FAKE_PERSON_OBJECT = {
  name: 'Komodo Brown',
  position: 'Chief Scientist',
  joinedDate: 'Joined today',
  imageSource: 'https://picsum.photos/200/210?image=974',
  formattedLocation: 'Tau Alpha C, M-cluster'
};

  const testData = [...new Array(10)].map(e => FAKE_PERSON_OBJECT)



                  <Carousel
                    ref={(c) => { this._carousel = c; }}
                    data={testData}
                    loop={false}
                    renderItem={this.renderItem}
                    itemWidth={202}
                    itemHeight={327}
                    sliderWidth={300}
                    inactiveSlideOpacity={1}
                    inactiveSlideScale={1}
                    activeSlideAlignment={'start'}
                    slideStyle={{marginLeft: 14}}
                />

[bd-arc]

@kdrich I'm surprised because we've updated some of our apps to RN 0.58 without any issue with the carousel.

Can you please provide a Snack example in which the issue can be reproduced?

[kdrich]

@bd-arc, thanks for the response.

I created an example here, though wasn't able to reproduce the error. Though, without control over the RN version, I can't setup an equivalent environment. If I find anything useful while debugging, I'll report it here.