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

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