Gist illustrating a problem with nested horizontal Flatlists

App.js

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

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

import Pager from './Pager';

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

type Props = {};


export default class App extends Component<{}> {
    render() {
        return (
            <FlatList
                data={pageNumbers}
                initialNumToRender={3}                
                horizontal={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>
                    <FlatList
                        data={imageIds}
                        getItemLayout={(data, index) => (
                            {length: 200, offset: 200 * index, index}
                        )}
                        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',
    },
});