modal not begin from bottom

I try to make modal that begin from bottom of the screen until the middle of screen, but it always have little space between bottom to the modal and I don’t want it. I want the modal begin from the bottom.

import React, { Component } from 'react'
import { View, Text, Platform, Linking, Image } from 'react-native'
import { Button } from '..'
import style from './style'
import Modal from 'react-native-modal'
import Colors from '../../utils/Colors'

class MakeAppointmentModal extends Component {
  constructor(props) {
    super(props)
    this.state = {
      modalVisible: false,
    }
  }
  componentDidMount = () => {
    try {
      this.props.onRef(this)
    } catch (e) {}
  }

  componentWillUnmount = () => {
    this.props.onRef(undefined)
  }
  setModalVisible = () => {
    this.setState(state => {
      return { modalVisible: !state.modalVisible }
    })
  }

  render() {
    const { container, view_modal, view_container_modal } = style
    return (
      <View style={container}>
        <Modal
          isVisible={this.state.modalVisible}
          backdropColor={Colors.black}
          backdropOpacity={0.8}
          animationIn='fadeInUp'
          hideModalContentWhileAnimating={true}
          animationInTiming={1000}
          animationOutTiming={600}
          useNativeDriver={true}
          onCancelPressed={() => this.setModalVisible()}
          onBackButtonPressed={() => setModalInvisible()}
          onModalHide={() => {
            // this.setModalInvisible()
          }}
          onRequestClose={() => {
            this.setModalVisible()
          }}
        >
          <View style={view_modal}>
            <View style={view_container_modal} />
          </View>
        </Modal>
      </View>
    )
  }
}
export default MakeAppointmentModal

style

import { StyleSheet, Dimensions } from 'react-native'
import Colors from '../../utils/Colors'
import { calcSize } from '../../utils'
import { DIMENSIONS } from '../../utils/Consts'

const style = StyleSheet.create({
  container: {
    flex: 1,
  },
  view_modal: {
    flex: 1,
    position: 'absolute',
    bottom: 0,
    justifyContent: 'center',
    alignItems: 'center',
    shadowOpacity: 0,
  },
  view_container_modal: {
    width: DIMENSIONS.width,
    height: DIMENSIONS.height - calcSize(250),
    backgroundColor: Colors.white,
    alignItems: 'center',
    justifyContent: 'center',
  },
})
export default style

info

"react-native-modal": "^7.0.2",
  "react": "16.6.3",
  "react-native": "0.57.8",

[omars94]

<Modal style={{ margin: 0 }}>....</Modal>

can fix your problem

[mmazzarolo]

Try the following:

render() {
  const deviceWidth = Dimensions.get("window").width;
  const deviceHeight = Platform.OS === "ios" 
    ? Dimensions.get("window").height
    : 2000; // Just an high number

  return (
  <Modal
    isVisible={this.state.isVisible}
    deviceWidth={deviceWidth}
    deviceHeight={deviceHeight}
  >
    <View style={{ flex: 1 }}>
      <Text>I am the modal content!</Text>
    </View>
  </Modal>
  )
}

If it does work, please follow the README.md