React native - ScrollView not working in android

I used my scrollview in react-native inside flex, It works on web but it doesn't works on my android phone

Here is the mine code -

  render() {
    return (
      <View style={styles.root}>
        <ScrollView contentContainerStyle={{flex: 1 }}>
          <View style={styles.box1} >
          </View>
          <View style={[styles.box2, { height: this.state.height }]} />
          <View style={styles.box1} >
               <TouchableOpacity onPress={() => this.setState({ height: this.state.height + 50 })}>
              <Text>Click me to grow the purple section</Text>
            </TouchableOpacity>
          </View>
        </ScrollView>
      </View>
    );
  }
}

This is my stylesheet -

const styles = StyleSheet.create({
  root: {
    flex: 1,
    flexDirection: 'column',
    backgroundColor: '#fff',
  },
  box1: {
    height: 200,
    backgroundColor: 'blue'
  },
  box2: {
    height: 200,
    backgroundColor: 'purple'
  }
});

Upvotes: 0

Views: 116

Answers (1)

imKrishh
imKrishh

Reputation: 977

Try Removing the property flex: 1 from contentContainerStyle. If flex is required you can go for flexGrow: 1 instead of flex.

For more on contentContainerStyle

Upvotes: 1

Related Questions