There are several situations in my responsive application where various modalities may be presented. I am wondering what is the best way to do this. In general, I see two different approaches:
a) In the root view, I always mount the Modal component and just switch the contents like this ...
<View> {...} <Modal visible={this.props.modal > 0}> {this.props.modal === 1 && <ModalContent1 />} {this.props.modal === 2 && <ModalContent2 />} {this.props.modal === 3 && <ModalContent3 />} </Modal> </View>
b) Each modal brings its own Modal component and is mounted somewhere in the tree, next to the place from which it starts.
How would you prefer and why?
The question that applies to both approaches is that if the Modal component should always be installed and run only with visible -prop. If this is the way, I assume that approach b) requires more memory, as multiple instances of the Modal component are created.
source share