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:

Nashville

The easiest approach will be to implement a navigator within the modal itself, which is isolated from the main one – Stiver

Thanks for your comment. Is there an example on that? – Nashville

Everything I've tried so far makes it navigate OUTSIDE the modal – Nashville

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? – Gladiate

only change the content inside, the modal should stay open – Nashville

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 – Gladiate

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, } } – Nashville

wait, can you tell me how did you do it? – Gladiate

very interesting thing you solved – Gladiate

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 – Nashville

@ChristineH. i'm facing the same problem now, need to to navigate inside a modal, have you solved the problem with the modal size? – Revere

Answer 1

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!

Cassilda