React Native Nested Flat Lists Poor Performance

I have a nested flat list so a user can scroll vertically and horizontally. The outer flat list is horizontal and the inner flat list is vertical. I noticed the Vertical console keeps being printed way too often. I was able to reproduce the issue in a much simpler example in github. The performance is so bad for this simple example that the screen becomes just white if you scroll horizontally too many times. Feel free to clone the repo and run the app, only 1 file called App.js contains the real code so its very simple. I wonder why React Native is performing so bad?

App.js

const DATA = generate(40);

function generate(val) {
  return new Array(val).fill().map((e, i) => {
    return data(i + 1);
  });
}

function data(page) {
  switch (page) {
    case 1:
      return require('./data/1.json');
    // more cases go from 2 -> 40
    case 40:
      return require('./data/40.json');
  }
}

function App() {
  console.log('Horizontal')
  return (
      <FlatList
        data={DATA} // DATA is a nested array
        style={styles.appContainer}
        renderItem={subList}
        horizontal
        pagingEnabled
        windowSize={1}
        keyExtractor={(item, index) => {
          return index.toString();
        }}
      />
  );
};

const subList = (props) => {
  console.log('Vertical')
  return (
    <FlatList
      data={props.item}
      style={styles.flatRow}
      renderItem={renderItem}
      initialNumToRender={20}
      windowSize={2}
      keyExtractor={(item, index) => {
        return index.toString();
      }}
    />
  );
};

function Line(props) {
  const {email, first_name} = props.item.item;
  return (
    <View style={styles.line}>
      <Text style={styles.textFont}>{first_name}</Text>
      <Text style={styles.subtitleFont}>{email}</Text>
    </View>
  );
}

const renderItem = (props) => <Line item={props} />;