Percentage does not work with FlatList render item when horizontal is true

Question

I would like to use the screen's width on the render item of the horizontal FlatList. However, it does not work as expected. When the horizontal is false, the percentage value works. But when the horizontal is true, the percentage value does not work.

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>
    );
  }
}

Snack link when the FlatList is horizontal

Snack link when the FlatList is NOT horizontal

Answer 1

I think I remember someone mentionning something like that. Using Dimensions works here. See here: https://snack.expo.io/H1-wnC5HM

I rather solve it with flex or percentage but well.