Modal overlay in Android

[Traviswann]

When I run my code before eject, the modal works perfectly, after eject in ios it works fine but for android the modal opens and the buttons on the page are raised with the modal instead of being overlayed. Not sure why this is happening.
Here is the code
openmodal(){
this.setState({open: true})
};

render() {

return (
<View >
  <Text >QR Code</Text>
  <Button
  block
  style={styles.button}
  onPress={() => this.openmodal()}>
        <Text>Open Modal</Text>
  </Button>
  <Button
  block
  style={styles.button}
  onPress={() => Actions.next()}>
        <Text>Next Page</Text>
  </Button>


  <Modal
    open={this.state.open}
    style={{alignItems: 'center'}}>
    <View style={styles.popup}>
      <Text style={styles.popuptext}>The Modal is open </Text>
      <Button
      block
      style={styles.button}
        onPress={() => this.setState({open: false})}>
        <Text>Back To main Page</Text>
      </Button>

    </View>
  </Modal>


</View>