React Native Scrollview with flexGrow doesn't scroll

Question

I am using scrollview in my react native project. But it is not scrollable ie, i cant see the top elements . when i scroll to bottom the view bounces back.My requirement is actually like this

1) Bottom item should be visible -----> It is working fine now

2) while scrolling top item should be visible should not bounces back the view -----> Now this is the issue

Here is my code

return (
  <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
    <View style={styles.main}>
      <View style={styles.container}>
        ........(Some code)
      </View>
    </View>
  </ScrollView>
);

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "flex-end",
padding: 6,
paddingTop: 250
},
main: {
flex: 1,
height: 100
}
});

Any idea what am I missing ? Any help would be greatly appreciated!

Answer 1

As I wrote in the comment, the problem could be that height: 100 used with flex: 1 (in fact flexDirection is column by default, so you're trying to set height in two different ways). Since seems there's no reason to have it, simply remove it. In order to keep your ScrollView scrolled at the bottom I suggest you to do something like:

  <ScrollView
    contentContainerStyle={{ flexGrow: 1 }}
    ref={ref => (this.scrollView = ref)}
    onContentSizeChange={(contentWidth, contentHeight) => {
      this.scrollView.scrollToEnd({ animated: true });
    }}
  > ...

I've created a snack which tries to reproduce your question. Take a look if you want!