React-Native Modal is not rendered with a specified height and width

Question

The Modal that I use is rendering in full screen I couldn't make it appear like a dialog box.

This is my Modal file:

<Modal
  visible={this.props.visible}
  animationType={this.props.animationType}
  onRequestClose={() => { console.log('Modal has been closed.'); }}
>
  <ActivityIndicator
    size={this.props.size}
    color={this.props.color}
  />
</Modal>

This is where I use it:

<View>
  <LoadingModal
    visible={this.state.loading}
    animationType="slide"
    size="large"
    color="black"
  />
</View>

I am getting this now when I do this and when I gave width and height to the views, later on, I removed all that since didn't get any change

What I want is this:

Answer 1

  <Modal
    backdropColor={'white'}
    transparent={true}
    visible={modal}>
    <View style={styles.modals}>
      <Text style={{alignSelf: 'center', width: 200, textAlign: 'center'}}>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas
        eget tempus augue, a convallis velit.
      </Text>
    </View>
  </Modal>

const styles = StyleSheet.create({
 modals: {
  margin: 50,
  backgroundColor: 'white',
  elevation: 5,
  borderRadius: 10,
 },
});

Don't apply style to modal, just wrap all the modal content in a and apply style to that .