Can I render from Top when using FlatList inverted?

Question

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
       <FlatList
          inverted
          data={[{key: 'a'}, {key: 'b'}]}
          renderItem={({item}) => <Text>{item.key}</Text>}
        />
        <Text>123</Text>
      </View>
    );
  }
}

Using inverted FlatList will render item from bottom to top when data is small.

When I run my expo snack a and b are at the bottom. I want this to start at the top.

Using the inverted option of FlatList Can I render from top when data is small?

https://snack.expo.io/r1eZBINGH

It does not matter if the inverted is removed if it is rendered at the top and the scroll can start at the bottom. Is there a workaround?

Answer 1

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
       <FlatList
          inverted
          data={[{key: 'a'}, {key: 'b'}]}
          contentContainerStyle={{
            flexGrow: 1, justifyContent: 'flex-end',
          }}
          renderItem={({item}) => <Text>{item.key}</Text>}
        />
        <Text>123</Text>
      </View>
    );
  }
}

I solved it by setting contentContainerStyle. Using fullscreen with flexGrow: 1 and justifyContent: 'flex-end' in the inverted state seems to start at the top when the data is small.