CODEWITHSUNDEEP
react-native
Rajan Twanabashu
Rajan Twanabashu

Reputation: 4746

backdrop does not cover the navigation bar for react-native-modalbox

I am refering react-native-modalbox to present view modally in react native. This component works great until I use it inside the Navigator. But If this component is used inside the Navigator Component, then the model presented does not cover the navigation bar, where as the alert does cover it.

render: function() {
var modalView =

  <Button onPress={this.openModal3} style={styles.btn}>Position centered + backdrop + disable</Button>

  <Modal style={[styles.modal, styles.modal3]} position={"center"} ref={"modal3"} isDisabled={this.state.isDisabled}>
    <Text style={styles.text}>Modal centered</Text>
    <Button onPress={this.toggleDisable} style={styles.btn}>Disable ({this.state.isDisabled ? "true" : "false"})</Button>
  </Modal>

</View>
return (
  <NavigatorIOS style ={{flex:1}}
  ref={'nav'}

  initialRoute={{
    component: ()=> modalView,
    title:'Photoos.Net',
    passProps:{ name: this.props.title},

  }}/>
); 
}
});

Refer to following screens for my issue. enter image description here

Is there way to make this model behave exactly like alert.

Upvotes: 0

Views: 4729

Answers (2)

Rax Weber
Rax Weber

Reputation: 3780

The Modal component from react-native-modalbox accepts a coverScreen property like so:

<Modal coverScreen={true} ...

Upvotes: 4

Brice Mason
Brice Mason

Reputation: 716

This is happening because the modal is defined as a child of the navigator. React native doesn't support zindex but yields that type of behavior based on the rendering order. Some useful links on this topic:

https://github.com/facebook/react-native/issues/1076

Similar question asked in the react-native-modalbox project: https://github.com/maxs15/react-native-modalbox/issues/60

Here's an example using a stripped down version of your code snippet to demonstrate how rendering order works. When you tap "OPEN" the modal will open over top of the Navigator:

import React from 'react';
import {
  AppRegistry,
  NavigatorIOS,
  StyleSheet,
  Text,
  TouchableHighlight,
  View
} from 'react-native';

import Modal from 'react-native-modalbox';

class MyApp2 extends React.Component {
  constructor(props) {
    super(props);
    this.openModal3 = this.openModal3.bind(this);
  }

  openModal3() {
    this.refs.modal3.open();
  }

  render() {
    var modalView = <View style={styles.container}>
      <TouchableHighlight onPress={this.openModal3}>
        <Text>OPEN</Text>
      </TouchableHighlight>
    </View>;

    return (
      <View style={{flex:1}}>
        <NavigatorIOS
          style ={{flex:1}}
          ref={'nav'}
          initialRoute={{
            component: ()=> modalView,
            title:'Photoos.Net'
          }}/>

        <Modal style={[styles.container, styles.modal]} position={"center"} ref={"modal3"}>
          <Text>Modal centered</Text>
        </Modal>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f00'
  },

  modal: {
    backgroundColor: '#0f0'
  }
});

AppRegistry.registerComponent('MyApp2', () => MyApp2);

Upvotes: 2

Related Questions