RecyclerViewBackedScrollView does not render all the rows if it's inside ViewPagerAndroid

A ListView - that is using RecyclerViewBackedScrollView as scroll container - put inside a ViewPagerAndroid will not render all the rows, but just the initial rows.

The problem is that the RecyclerViewBackedScrollView is not updating its internal views since it thinks that the layout pass has not happened. I will post a PR to solve it, I just created this issue to reference it in the code.

• [ React Native 0.23.1] What’s the version of React Native you’re using?
• [ Android ] Does this occur on iOS, Android or both?
• [ Windows ] Are you using Mac, Linux or Windows?

import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View,
  ListView,
  ScrollView,
  RecyclerViewBackedScrollView,
  ViewPagerAndroid,
} from 'react-native';

class ListViewTest extends Component {
  constructor(props){
    super(props);

    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    var rows = [];
    for (var i=0; i<100; i++){
      rows.push(i);
    }

    this.state = {
      dataSource: ds.cloneWithRows(rows),
    };
  }

  renderItem(item){
      return <Text style={{color: '#000000', fontSize: 20, flex: 1, textAlign: 'center'}}>{item}</Text>;
  }

  render() {
    return (
      <View style={styles.container}>
        <ViewPagerAndroid
          initialPage={0}
          style={{flex: 1}}
          >
          <View>
            <ListView
              dataSource={this.state.dataSource}
              renderRow={this.renderItem.bind(this)}
              style={styles.listView}
              pageSize={1}
              initialListSize={10}
              renderScrollComponent={props => {
                //return <ScrollView {...props} />; uncommenting this line it will work as expected
                return <RecyclerViewBackedScrollView {...props} />;
              }}
            />
          </View>
        </ViewPagerAndroid>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  listView: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
});

AppRegistry.registerComponent('ListViewTest', () => ListViewTest);

[theodoregold]

@godness84 I was struggling with this for 2 days not understanding why my rows are not rendered. Thank you for posting this.

@mkonicek I am using RecyclerViewBackedScrollView with this package. https://github.com/maolion/mao-rn-android-kit Check this for explanation. https://github.com/maolion/mao-rn-android-kit/issues/5#issuecomment-250371624

[lacker]

It sounds like the solution here is that we will remove RecyclerViewBackedScrollView in react native core and encourage people to use these third party implementations. I’m thus going to close this issue. Thanks everyone for helping out!