Issue with nested virtualized react native lists

App.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

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

const pageNumbers = [1, 2, 3];
const imageIds = ['A', 'B', 'C'];

type Props = {};

export default class App extends Component<{}> {
  render() {
      return (
          <VirtualizedList
              data={[1, 2, 3]}
              getItemCount={data => data.length}
              getItem={(data, index) => data[index]}
              horizontal={true}
              debug={true}
              getItemLayout={(data, index) => (
                  {length: 200, offset: 200 * index, index}
                )}                
              keyExtractor={pageNumber => pageNumber.toString()}
              renderItem={({ item: pageNumber }) => (
              <View style={styles.page}>
                  <Text>{`page ${pageNumber}`}</Text>
                  <VirtualizedList
                        data={imageIds}
                        getItemCount={data => data.length}
                        getItem={(data, index) => data[index]}                        
                        getItemLayout={(data, index) => (
                            {length: 200, offset: 200 * index, index}
                        )}
                        listKey={Math.random().toString()}
                        debug={true}                        
                        initialNumToRender={3}
                        horizontal={true}
                        extraData={'asdasd'}
                        keyExtractor={imageId => imageId}
                        renderItem={({ item: imageId}) => ( 
                            <View style={styles.pageStyleOne}>
                        <Text>{`image ${imageId}`}</Text> 
                            </View>
                        )}
                    />                  
              </View>
              )}
          />
      );
  }
}

const styles = StyleSheet.create({
    page: {
        width: Dimensions.get('window').width,
        borderWidth: 2,
        borderColor: 'blue',
        marginTop: 20,
        alignItems: 'center',
    },
    pageStyleOne: {
        width: Dimensions.get('window').width,
        borderWidth: 2,
        height: 200,        
        borderColor: 'red',
        marginTop: 20,
        alignItems: 'center',
    },
    pageStyleTwo: {
        width: Dimensions.get('window').width,
        borderWidth: 2,
        height: 200,        
        borderColor: 'yellow',
        marginTop: 20,
        alignItems: 'center',
    },
    pageStyleThree: {
        width: Dimensions.get('window').width,
        borderWidth: 2,
        height: 200,        
        borderColor: 'purple',
        marginTop: 20,
        alignItems: 'center',
    },        
    image: {
        width: Dimensions.get('window').width,
        height: 200,
        borderWidth: 2,
        borderColor: 'green',
    },
});