meliorence / meliorence/react-native-snap-carousel

Multiple call to render item

Open
#478 27 comments 6 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
10.5k
Forks
2.3k
PR merge metrics
No merged PRs in 30d

Description

It's a questiob but may turn out to be a bug.

Problem: _renderItems gets called thrice
How to replicate:

Following is the code to display a carousel in a very simple example:

import React, {PureComponent} from 'react'
import { ScrollView, Text, View, SafeAreaView,Platform, Dimensions, StyleSheet  } from 'react-native';
import Carousel from 'react-native-snap-carousel';

export default class SnapDemo extends PureComponent {

    constructor(props){
        super(props)
         this.state = {data: [{'num':1},{'num':2},{'num':3}]}
    }

    _renderItem (item) {
        console.log(item)
        return(<View key={item.item.num} style={{backgroundColor:'orange', height:100}}><Text>{item.item.num}</Text></View>)
    }

    render(){
       return(
            <SafeAreaView style={{height: 600}}>
           <Carousel
                  data={this.state.data}
                  renderItem={this._renderItem}
                  itemWidth={Dimensions.get('window').width * 0.85}
                  sliderWidth={Dimensions.get('window').width}
                  containerCustomStyle={{flex:1}}
                  removeClippedSubviews={true}
                  keyExtractor={(item, index) => index.toString()}
                  slideStyle={{ flex: 1 }}/>

        </SafeAreaView>
        )
    }
}

There are 2 problems:

  1. RenderItems is getting called thrice
    Image

  2. I see a virtualized key warning message despite official docs mentioning that explicit key isn't required to be specified
    Image

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the supplied React Native reproduction and trace the carousel's _renderItems calls and key handling. Compare the observed call count and virtualized-key warning with the component's current behavior; done means the cause is identified and the expected rendering and key behavior are documented or corrected.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react-native
Domain
mobile
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.