尝试在 react-native-modal 中组合 2 个或多个模态

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!

Answer 2

I faced a similar issue in a project I had, that it bigger it got more and more modals were created in more and more screens and scenarios (without speaking on foreground notification etc... ),

So I ended up creating this package , for controlling all modals in my app with their own hierarchy

Answer 3

@idiosync/react-native-modal uses a hook interface, and doesn't use the additional native layer that react-native and react-native-modal implementations do.

This means that new modals just appear on new layers so you can add as many as you like.

You must ensure that you have an appropriate way to remove them from the component in question though!

https://www.npmjs.com/package/@idiosync/react-native-modal