react-native: ViewPagerAndroid returns empty view when new source data added

I am currently using the ViewPagerAndroid component to do a matching/unmatching function which requires dynamic data updating in the source data of the component. The children of of the view pager is generated by a function makeItems(this.state.data) and it returns an array of keyed views. i.e. [< View key={1}/>, < View key={2}/>…] with the index being the index of the for loop that generates the array from the source data. The views contain composite views of touchable highlight but all are wrapped by a view container. I kept the data in the state of the component and whenever data updates I call setState and ViewPagerAndroid.setPage(0). The data update works fine when I reduce the data (splice) but returns an empty view for the new data when I add new data to the array. The data before the update was displayed properly.I have checked my makeItems() function that the updated data has been passed in proper.

< ViewPagerAndroid
          name = 'Page Viewer 1'
          style = {styles.matchingPanelViewPager}
          initialPage={this.state.currentPage}
          onPageSelected = {(e)=>{
            console.log(e.nativeEvent.position);
          }}
          ref = {viewPager =>{this.viewPager = viewPager;}}>

          { this.makeItems(this.state.data) }

        </ ViewPagerAndroid>

I am using RN0.16.0 on Mac OS X, Genymotion, Android 4.2.2.

Same issue raised in StackOverflow: http://stackoverflow.com/questions/34279503/viewpagerandroid-returns-empty-view-when-new-source-data-added Thanks a lot for your help!

About this issue

Original URL
State: closed
Created 9 years ago
Reactions: 3
Comments: 20 (3 by maintainers)

Most upvoted comments

@Richard-Cao, this works for me <ViewPagerAndroid key={pageCount}....

Thanks a lot @yonatanmn

+12

thrap on May 10, 2016

In my scenario I’m either appending a page or slicing and then appending to the sliced pages array,

What currently works for me is adding key based on time on this condition: androidViewPagerKey = newPages.length < pages.length ? Date.now() : androidViewPagerKey return <ViewPagerAndroid key={androidViewPagerKey}...

yonatanmn on Apr 25, 2016

I know but maybe is ViewPagerAndroid not the way to go. I have an infinite viewpager made with VirtualizedList. I’m sure you’ll need some customizing

import React, { Component } from 'react'
import { View, Text, Dimensions, VirtualizedList } from 'react-native'

const { width, height } = Dimensions.get('window')
const startAtIndex = 5000
const stupidList = new Array(startAtIndex * 2)

class InfiniteViewPager extends Component {
  //only use if you want current page
  _onScrollEnd(e) {
    // const contentOffset = e.nativeEvent.contentOffset
    // const viewSize = e.nativeEvent.layoutMeasurement
    // // Divide the horizontal offset by the width of the view to see which page is visible
    // const pageNum = Math.floor(contentOffset.x / viewSize.width)
  }
  _renderPage(info) {
    const { index } = info

    return (
      <View style={{ width, height }}>
        <Text>
          {' '}{`index:${index}`}{' '}
        </Text>
      </View>
    )
  }
  render() {
    return (
      <VirtualizedList
        horizontal
        pagingEnabled
        initialNumToRender={3}
        getItemCount={data => data.length}
        data={stupidList}
        initialScrollIndex={startAtIndex}
        keyExtractor={(item, index) => index}
        getItemLayout={(data, index) => ({
          length: width,
          offset: width * index,
          index,
        })}
        maxToRenderPerBatch={1}
        windowSize={1}
        getItem={(data, index) => ({ index })}
        renderItem={this._renderPage}
        onMomentumScrollEnd={this._onScrollEnd}
      />
    )
  }
}

RichardLindhout on Aug 1, 2017

Having the same issue (actually adding is ok, but slicing array of pages, and pushing causes this). I’ve tried changing key (to AndroidViewPager) according to @brentvatne proposal, but then other problems occurred - no animation sometimes, and after some fast changes errors spawned.

I know there are problems with the native android component (look here), so maybe the solution should start there. But actually the best solution (for my desires) will be to add pagingEnabled to ScrollView in android, and than even deprecate AndroidViewPager.

BTW, Iv’e tried the third party solution @ACCTFORGH suggested, but it’s really low performant.

PLEASE VOTE FOR THIS BUG

yonatanmn on Mar 9, 2016