CODEWITHSUNDEEP
react-native
beck
beck

Reputation: 3027

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

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)"
  }
});

Upvotes: 5

Views: 11328

Answers (3)

James Trickey
James Trickey

Reputation: 1447

@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

Upvotes: 1

Hagai Harari
Hagai Harari

Reputation: 2877

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

Upvotes: 1

Billy Koswara
Billy Koswara

Reputation: 497

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!

Upvotes: 10

Related Questions