使用 React-native 模态框形成和设置适当的对话框或警告框

Question

I want to make a general dialog box with the help of react native modal. I have made the code as follows:

<Modal isVisible={isModalVisible} style={styles.modalStyle} >                                      
   <Text>Hello World!</Text>                               
</Modal>

And below the style is mentioned:

const styles = StyleSheet.create({
    modalStyle : {
      top                   : '50%',
      left                  : '50%',
      right                 : 'auto',
      bottom                : 'auto',
      marginRight           : '-50%',

    },
}

But the modal dialog is consuming the whole screen!

I have also tried editing the code to:

<Modal>
  <View style={{ flex: 1, top: 50%, left: 50%, width: 70%, height : 50% }}>
       <Text>Hello World!</Text>
  </View>
</Modal>

removing the style in the Modal. But still the same result!

Answer 1

In-Built Modal of react-native is sometimes difficult to customise. There is this awesome library I have used number of times. See this .

Answer 2

I've used react native modal, and to show the modal partially, what i did is, where the height is 100, so you can cutsomise the height

<Modal isVisible={true} style={{justifyContent: "flex-end"}} >
<View style={{height:100}}>
</View>
</Modal>

now, try once. and letme know if this works. coz it works for me. otherwise ill alter it.