Geek Answers Handbook

React native modal with transparent using Navigator without using modal

React Native documentation says that RN applications should use Navigator to create modals ( https://facebook.imtqy.com/react-native/docs/modal.html#content ).

How to create a transparent modal using Navigator without using Modal? I would like the user to view the current page in the background. Thanks.

+6
source share
3 answers

To answer your question about transparent modal, you can use rgba's background color, for example rgba (0, 0, 0, 0.5), and pass alpha to the last color argument: rgba (r, g, b, alpha).

As for the navigator, you can use the Navigator.SceneConfigs.FloatFromBottom argument to navigate to create a modal by placing the modal navigator in the place of another Navigator. There is a good topic with examples for here . Sort of:

this.props.navigator.push({ title: 'title', sceneConfig: Navigator.SceneConfigs.FloatFromBottom, component: component, navigationBar: <NavigationBar title="Initial View"/>, passProps: {} })

I created a sample project with a transparent background here and posted the code below. Hope this helps!

https://rnplay.org/apps/pHqjhQ

 'use strict'; var React = require('react-native'); var { Modal, StyleSheet, SwitchIOS, Text, TouchableHighlight, View, AppRegistry, } = React; exports.displayName = (undefined: ?string); exports.framework = 'React'; exports.title = '<Modal>'; exports.description = 'Component for presenting modal views.'; var Button = React.createClass({ getInitialState() { return { active: false, }; }, _onHighlight() { this.setState({active: true}); }, _onUnhighlight() { this.setState({active: false}); }, render() { var colorStyle = { color: this.state.active ? '#fff' : '#000', }; return ( <TouchableHighlight onHideUnderlay={this._onUnhighlight} onPress={this.props.onPress} onShowUnderlay={this._onHighlight} style={[styles.button, this.props.style]} underlayColor="#a9d9d4"> <Text style={[styles.buttonText, colorStyle]}>{this.props.children}</Text> </TouchableHighlight> ); } }); var ModalExample = React.createClass({ getInitialState() { return { animated: true, modalVisible: false, transparent: true, }; }, _setModalVisible(visible) { this.setState({modalVisible: visible}); }, render() { var modalBackgroundStyle = { backgroundColor: this.state.transparent ? 'rgba(0, 0, 0, 0.5)' : '#f5fcff', }; return ( <View> <Modal animated={this.state.animated} transparent={this.state.transparent} visible={this.state.modalVisible}> <View style={[styles.container, modalBackgroundStyle]}> <View style={[styles.innerContainer]}> <Button onPress={this._setModalVisible.bind(this, false)} style={styles.modalButton}> Close </Button> </View> </View> </Modal> <View style={{ marginTop:60 }}> <Button onPress={this._setModalVisible.bind(this, true)}> SHOW MODAL </Button> </View> </View> ); }, }); AppRegistry.registerComponent('ModalExample', () => ModalExample); var styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', padding: 20, }, innerContainer: { borderRadius: 10, alignItems: 'center', }, button: { borderRadius: 5, flex: 1, height: 44, alignSelf: 'stretch', justifyContent: 'center', overflow: 'hidden', }, buttonText: { fontSize: 18, margin: 5, textAlign: 'center', }, modalButton: { marginTop: 10, }, });
+3
source

To answer the updated question, all you have to do is change your configureScene like this:

 configureScene(route, routeStack){ if(route.type == 'Modal') { return Navigator.SceneConfigs.FloatFromBottom } return Navigator.SceneConfigs.PushFromRight }

Then pass the “Modal” type if you want the modal:

 _navigate(name, type='Normal') { this.props.navigator.push({ component: Home, passProps: { name: name }, type: type }) }

Here is an example here .

https://rnplay.org/apps/ALL-Sw

+1
source

Although this is not relevant to your case, since I used Modal , I would just like to report how I got a transparent background with this:

  • in your render method, where you render Modal , pass prop transparent={true}
  • add a single View child to your Modal (add all other things to this View ) and apply style to it with backgroundColor = 'rgba(r, g, b, a)' . Here a refers to the alpha or opacity level you want in the background

React-Native v0.46.4

See links:

problem with answer-router-router # 749

reaction is a native problem # 2386

0
source

More articles:


All Articles