React Native ScrollView dosen't work when 'column-reverse' in flexDirection

Question

I am using React Native and ScrollView scrolls downwards in iOS and doesn't scroll in Android when I set flexDirection as 'column-reverse'. My code is like below.

class Chatting extends Component {
  render() {
    return (
      <View style={styles.container}>
        <ScrollView style={styles.messages}>
          <Message isMe={true} text="Hi" />
          <Message isMe={false} text="Hi" />
          <Message isMe={true} text="Hi" />
        </ScrollView>
        <Input placeholder="Type Message" />
        <CustomButton
          value="Send"
          extraStyle={styles.button}
          color={colors.delyColor}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    display: "flex",
    width: "100%",
    height: "100%",
    flexDirection: "column",
    justifyContent: "center",
    paddingRight: 15,
    paddingLeft: 15,
    paddingBottom: HEIGHT * 0.03
  },
  messages: {
    height: "100%",
    width: "100%",
    padding: 10,
    display: "flex",
    flexDirection: "column-reverse"
  },
  button: {
    width: "100%",
    marginTop: 10
  }
});

I want to scroll the messages part, but it doesn't scroll as it should. It should scroll up rather than down at iOS and it should work at Android. Please help me how to solve this problem.