ScrollView doesn't scroll on android

Question

Can someone please help me figure out why my scrollView works only on ios and not on android? i am using React Native, this problem occured before but it was fixed by removing flex value of containers but this time i can't really fix it All of your help is really appreciated !

  render() {
    return (
        <View style={styles.container}>

            <ScrollView showsVerticalScrollIndicator={false}>
                <Text style={styles.title}>REVIEWS 2</Text>
                <View style={styles.informationBox}>
                  <View style={styles.informationRow}>
                    <Text style={styles.reviewText}>Traveler Rating</Text>
                    <Rating type="custom" style={{alignSelf: 'center', paddingLeft: 10}} imageSize={20} readonly startingValue={3}
                      ratingBackgroundColor= "#e9e9f1" ratingColor="#f7c66c"/>
                  </View>
                  <View style={styles.divider}></View>
                  <View style={styles.informationRow}>
                  <Text style={styles.reviewText}>Shipper Rating</Text>
                  <Rating type="custom" style={{alignSelf: 'center', paddingLeft: 10}} imageSize={20} readonly startingValue={0}
                    ratingBackgroundColor= "#e9e9f1" ratingColor="#f7c66c"/>
                  </View>
                </View>
            </ScrollView>
            </View>
        </View>
    );
  }
}

and here are the styles used for this specific screen

   const styles = StyleSheet.create({
        container: {
        backgroundColor: '#28243c',
        flex:1,
        paddingBottom: (Platform.OS == 'android' ? 20 : 0)
      },       
      userStatsContainer: {
        paddingTop: 10,
        flexDirection: 'row',
        justifyContent: 'center'
      },
      userStatsItem: {
        flexDirection: 'row',
        paddingRight: 10,
        alignSelf: 'center'
      },
      standAloneUserStatsItem : {
        flexDirection: 'row',
        paddingTop: 10,
        alignSelf: 'center'
      },
      userStatsTitle: {
        alignSelf:'center',
        color: 'white',
        paddingLeft: 5,
        fontFamily: 'SF-medium'
      },
      title: {
        color: '#f7c66c',
        fontFamily: 'SF-bold',
        fontSize: 20,
        paddingTop: 30,
        alignSelf: 'center'
      },
      informationBox: {
        marginTop: 10,
        backgroundColor: '#41436c',
        width: '80%',
        alignSelf: 'center'
      },
      informationRow: {
        padding:10,
        flexDirection: 'row'
      },
      reviewText: {
        color: 'white',
        fontFamily: 'SF-medium',
        flex: 1
      },
    });

Answer 1

It works on both:

export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <ScrollView showsVerticalScrollIndicator={false}>
          <View style={styles.informationBox}>
            <Text style={styles.title}>REVIEWS 2</Text>
            <View style={styles.informationRow}>
              <Text style={styles.reviewText}>Traveler Rating</Text>
              <View style={styles.ratingView} />
            </View>
            <View style={styles.divider} />
            <View style={styles.informationRow}>
              <Text style={styles.reviewText}>Shipper Rating</Text>
              <View style={styles.ratingView} />
            </View>
          </View>
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#28243c',
    flex: 1,
    paddingBottom: Platform.OS == 'android' ? 20 : 0
  },
  userStatsContainer: {
    paddingTop: 10,
    flexDirection: 'row',
    justifyContent: 'center'
  },
  userStatsItem: {
    flexDirection: 'row',
    paddingRight: 10,
    alignSelf: 'center'
  },
  standAloneUserStatsItem: {
    flexDirection: 'row',
    paddingTop: 10,
    alignSelf: 'center'
  },
  userStatsTitle: {
    alignSelf: 'center',
    color: 'white',
    paddingLeft: 5
  },
  title: {
    color: '#f7c66c',
    fontSize: 20,
    paddingTop: 30,
    alignSelf: 'center'
  },
  informationBox: {
    marginTop: 10,
    backgroundColor: '#41436c',
    width: '80%',
    alignSelf: 'center'
  },
  informationRow: {
    padding: 10,
    flexDirection: 'row'
  },
  reviewText: {
    color: 'white',
    flex: 1
  },
  ratingView: {
    width: 100,
    height: 300,
    backgroundColor: 'red'
  }
});

Answer 2

add flex:1 to your ScrollView, and as long as the data is long enough, you should be able to scroll. I used your codes for the snack below,

https://snack.expo.io/@spacechimp/petrified-waffles

Answer 3

ScrollView may only have 1 child. Something like a LinearLayout or ContraintLayout which then wraps the actual content.