Navigation inside react-native-modal

Question

I have an app with bottom tab navigation (in case it's important) and sometimes user can open a modal (react-native-modal). There are buttons in the modal and I want to implement navigation inside the modal so that when the user presses one of the buttons they are navigated to another screen INSIDE the modal (and can navigate back). Any help is appreciated, thanks in advance! The example of what I want:

The easiest approach will be to implement a navigator within the modal itself, which is isolated from the main one — MorKadosh, Oct 24 '19 at 09:21
Everything I've tried so far makes it navigate OUTSIDE the modal — Christine H., Oct 24 '19 at 09:28
it's unclear, like do you want the modal content to chnage or on clikc of any button in the modal , you close the modal and navigate to another page? — Gaurav Roy, Oct 24 '19 at 09:33
okay, so ive never tried navigation inside modal , and i dont think its possible. what you can possibly do is change the whole content inside the modal on click of the button — Gaurav Roy, Oct 24 '19 at 09:55
I figured it out. Using mode: 'modal' does help after all. The only problem remaining is the modal fills the whole screen. navigationOptions: { cardStack: { gesturesEnabled: true, } } — Christine H., Oct 24 '19 at 09:58
I've changed the config of my stack navigator to this: { headerMode: 'none', mode: 'modal', cardStyle: { opacity: 1, }, navigationOptions: { cardStack: { gesturesEnabled: true } } } and now every inner stack of this main stack is navigatable. The only problem is, the modals fill the screen, and I wanted them to only take half of the screen height — Christine H., Oct 24 '19 at 10:08
@ChristineH. i'm facing the same problem now, need to to navigate inside a modal, have you solved the problem with the modal size? — Mod3rnx, Jan 28 '21 at 14:07

score 1 · Answer 1 · answered Oct 26 '19 at 20:54

I had one problem like this. But I didn't made it with route, because I'm in a route and I would like to open another component inside screen. So I did it using pure component. I did an control visibility variable, and the other "screen" was showed when user click on button, and hided when user closes it.

Here is an example:

//Parent component
class Parent extends Component {
    state = {
      viewClhild: false
    }

    goToChild = (task) => {    
        this.setState({viewChild: true})
    }

    onShowClhildChange(viewChild) {
        this.setState({ viewChild });
      }

    render() {
        <View>
            {
                this.state.viewChild 
                  ? <ChildScreen onShowClhildChange={this.onShowClhildChange.bind(this)} /> 
                  : <Text>Show Parent</Text>
              }
            <Button 
                onPress={() => {this.goToChild()}}
            >
                <Text style={button.text}>Entrar</Text>
            </Button>
        </View>
    }

}


//Child Component
class ChildScreen extends Component {
    isChildVisible = (isVisible) => {
        this.setState({ viewChild: isVisible })
        if (this.props.onShowClhildChange) {
           this.props.onShowClhildChange(isVisible);
        }
      }
      constructor (props) {
        super(props);

        this.state = {
          viewChild: this.props.viewChild
        }
      }

      render() {
        return (
          <View>
            <Button 
              onPress={() => this.isChildVisible(false)}
            >
              <Text>CLOSE CHILD SCREEN</Text>
            </Button>
        </View>
        )
    }
}

I hope it can help you!

Navigation inside react-native-modal

1 Answers1