Percentage не работает с элементом визуализации FlatList, если для параметра horizontal установлено значение true

Я хотел бы использовать ширину экрана в элементе рендеринга horizontal FlatList. Однако это не работает должным образом. Когда horizontal ложно, процентное значение работает. Но когда horizontal истинно, процентное значение не работает.

class App extends React.Component {
  _renderItem = ({ item }) => {
    return (
      <View
        style={{
          width: '100%',
          height: 100,
        }}>
        <Text>{item.key}</Text>
      </View>
    );
  };

  render() {
    return (
      <View style={styles.container}>
        <FlatList
          data={[{ key: 1 }, { key: 2 }, { key: 3 }]}
          renderItem={this._renderItem}
          horizontal={true}
        />
      </View>
    );
  }
}

Перекусить, когда FlatList расположен горизонтально

Закусочная ссылка, когда FlatList НЕ горизонтален