Bottom modal opens with delay

Modal work fine but opens after two seconds of delay

it's my component where i use modalbox

import React, { Component } from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  ScrollView,
  StyleSheet,
  Dimensions,
  Button
} from 'react-native';
import { ListItem } from 'native-base';
import Modal from 'react-native-modalbox';
const screen = Dimensions.get('window');

class ComboBox extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedItemIndex: null,
      isOpen: false,
      isDisabled: false,
      swipeToClose: true,
      sliderValue: 0.3,
      items: []
    };
  }
  componentDidMount() {
    const { items, comboStyle, isOpen } = this.props;
    items && this.setState({ items });
    comboStyle && this.setState({ comboStyle });
    isOpen && this.setState({ isOpen });
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.isOpen === prevState.isOpen) {
      return null;
    } else {
      return {
        isOpen: nextProps.isOpen
      };
    }
  }

  toggleModal = () => this.setState({ open: !this.state.open });

  onItemClick = index => {
    console.log('index -> ', this.state.items[index]);
    this.refs.modal.close();
    this.setState({ selectedItemIndex: index });
  };

  _renderList = () => {
    const { items } = this.state;
    return items.map((item, key) => (
      <ListItem style={{ flex: 1 }} key={key}>
        <TouchableOpacity
          onPress={() => this.onItemClick(key)}
          style={{ flex: 1 }}
        >
          <Text
            style={{
              ...this.props.itemStyle,
              flex: 1,
              backgroundColor: 'green'
            }}
          >
            {item}
          </Text>
        </TouchableOpacity>
      </ListItem>
    ));
  };

  onClose() {
    console.log('Modal just closed');
  }

  onOpen() {
    console.log('Modal just opened');
  }

  onClosingState(state) {
    console.log('the open/close of the swipeToClose just changed');
  }

  render() {
    const { selectedItemIndex, items, isOpen } = this.state;
    return (
      <View style={styles.wrapper}>
        <Modal
          style={[styles.modal, styles.modal4]}
          position={'bottom'}
          ref={'modal'}
          isOpen={isOpen}
        >
          <ScrollView>
            <View style={{ paddingLeft: 10 }}>{this._renderList()}</View>
          </ScrollView>
        </Modal>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  wrapper: {
    paddingTop: 50,
    height: '100%',
    width: screen.width,
    position: 'absolute',
    top: 0,
    left: 0
  },

  modal: {
    justifyContent: 'center',
    alignItems: 'center',
    height: 300
  },
  btn: {
    margin: 10,
    backgroundColor: '#3B5998',
    color: 'white',
    padding: 10
  },

  btnModal: {
    position: 'absolute',
    top: 0,
    right: 0,
    width: 50,
    height: 50,
    backgroundColor: 'transparent'
  },

  text: {
    color: 'black',
    fontSize: 22
  }
});
export default ComboBox;

The supplied ComboBox component is the only reproduction and no repository file or test is named. Start by reproducing the delay with the React Native Modal component using position="bottom" and the isOpen state, then trace the modal's open transition. Done means the bottom modal opens without the reported two-second delay.