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!

The problem could be that `height: 100`. Why use it when it has `flex: 1` (by default `flexDirection: 'column'`)? — Milore, Feb 25 '19 at 09:44
May add your reproducible issue in https://snack.expo.io? This will be easy to debug. — Subhendu Kundu, Feb 25 '19 at 09:45
@SubhenduKundu please check this... https://snack.expo.io/H1BQaVWL4 — Khushi, Feb 25 '19 at 10:10
I tried to apply what I wrote as answer and it seems to work properly. Can you check if it's what you're looking for? — Milore, Feb 25 '19 at 10:17

score 3 · Accepted Answer · answered Feb 25 '19 at 10:09

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!

React Native Scrollview with flexGrow doesn't scroll

1 Answers1