Trying to combine 2 or multiple modals in react-native-modal

Question

I've used react-native modals https://github.com/react-native-community/react-native-modal. I'm trying to combine bottom half modal and modal slide from the sides using multiple modals. But while coming back from 2nd modal to 1st one, the modal goes down (closes) and then another opens. Please have a look at the videos below to see what I wanted to do.

What I'm trying to obtain with the modal https://youtu.be/YaMjp_VJ_9Y

what is happening using react-native-modal https://youtu.be/GR8otXHhElc

Code

export default class App extends Component<Props> {
  state = {
    visibleModal: null
  };

  renderButton = (text, onPress) => (
    <TouchableOpacity onPress={onPress}>
      <View style={styles.button}>
        <Text>{text}</Text>
      </View>
    </TouchableOpacity>
  );

  renderModalContent = () => (
    <View style={styles.modalContent}>
      <Text>Hello!</Text>
      {this.renderButton("Next Modal", () =>
        this.setState({ visibleModal: 6 })
      )}
      {this.renderButton("Close", () => this.setState({ visibleModal: null }))}
    </View>
  );

  renderNextModalContent = () => (
    <View style={styles.modalContent}>
      <Text>Hello from next modal!</Text>
      {this.renderButton("BACK", () => this.setState({ visibleModal: 5 }))}
    </View>
  );

  render() {
    return (
      <View style={styles.container}>
        {this.renderButton("modal", () => this.setState({ visibleModal: 5 }))}
        <Modal
          isVisible={this.state.visibleModal === 5}
          onBackButtonPress={() => this.setState({ visibleModal: null })}
          style={styles.bottomModal}
        >
          {this.renderModalContent()}
        </Modal>
        <Modal
          isVisible={this.state.visibleModal === 6}
          animationIn="slideInLeft"
          animationOut="slideOutRight"
          onBackButtonPress={() => this.setState({ visibleModal: null })}
          style={styles.bottomModal}
        >
          {this.renderNextModalContent()}
        </Modal>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center"
  },
  bottomModal: {
    // flex: 0,
    justifyContent: "flex-end",
    margin: 0
  },
  button: {
    backgroundColor: "lightblue",
    padding: 12,
    margin: 16,
    justifyContent: "center",
    alignItems: "center",
    borderRadius: 4,
    borderColor: "rgba(0, 0, 0, 0.1)"
  },
  modalContent: {
    backgroundColor: "white",
    padding: 22,
    justifyContent: "flex-end",
    borderRadius: 4,
    borderColor: "rgba(0, 0, 0, 0.1)"
  }
});

Answer 1

I am afraid that modal should not be use in that way. From my perspective, what you are trying to archive can be done without using 2 modal

My suggestion

• Make a component that will mount when you call modal out
• In the component you will make 2 views which you will add animation to the slidein view
• So, when you press the trigger, the other view will just slidein inside the same modal

Hope this help!