visible modal is slow

[niloofarSadeghi76]

hello, recently i add this package to my react native project, it takes 10 second or more visible on android.

React Native version: 0.61.5
react-native-modals version: 0.22.3

i used these two properties too:
modalAnimation={new SlideAnimation({ slideFrom: 'bottom' })}
useNativeDriver

[harsimrandev]

Facing this same issue. Do we have solution yet ?

[niloofarSadeghi76]

Facing this same issue. Do we have solution yet ?

Not yet :|

[MAsad-Nawaz]

Here is the sample code. @niloofarSadeghi76 also check this issue on #30

import React, { useState } from "react";
import { Button, Text, View, StyleSheet } from "react-native";
import Modal from "react-native-modal";

function MyModal(props) {
  const headerComponent = (
    <View style={{ margin: 30 }}>
      <Text style={{ fontSize: 30, color: "white", textAlign: "center" }}>
        Here
      </Text>
    </View>
  );

  const customBackdrop = (
    <View style={styles.modalBackground}>
      <View
        style={[styles.modalBackgroundContent, { backgroundColor: "blue" }]}
      >
        {headerComponent}
      </View>
    </View>
  );

  return (
    <Modal
      style={{ margin: 0, marginTop: 100 }}
      backdropOpacity={1}
      customBackdrop={customBackdrop}
      swipeDirection={"down"}
      onSwipeComplete={props.onRequestClose}
      isVisible={props.isVisible}
      hideModalContentWhileAnimating={true}
    >
      <View style={styles.modalView}>
        <View style={styles.formView}>{props.children}</View>
      </View>
    </Modal>
  );
}

function ModalTester() {
  const [isModalVisible, setModalVisible] = useState(false);

  const toggleModal = () => {
    setModalVisible(!isModalVisible);
  };

  return (
    <View style={{ flex: 1 }}>
      <Button title="Show modal" onPress={toggleModal} />

      <MyModal isVisible={isModalVisible} onRequestClose={toggleModal}>
        <View style={{ flex: 1 }}>
          <Text>Hello!</Text>

          <Button title="Hide modal" onPress={toggleModal} />
        </View>
      </MyModal>
    </View>
  );
}

const styles = StyleSheet.create({
  closeButton: {
    paddingTop: 5,
    paddingLeft: 5
  },
  modalView: {
    flex: 1,
    justifyContent: "flex-end",
    alignItems: "center"
  },
  modalBackground: {
    flex: 1
  },
  modalBackgroundContent: {
    flex: 1
  },
  formView: {
    flex: 1,
    width: "100%",
    borderTopRightRadius: 10,
    borderTopLeftRadius: 10,
    overflow: "hidden",
    backgroundColor: "white"
  }
});

export default class App extends React.Component {
  render() {
    return <ModalTester />;
  }
}