CODEWITHSUNDEEP
react-nativereact-navigationreact-native-modal
Christine H.
Christine H.

Reputation: 163

Navigation inside react-native-modal

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:

modal example

Upvotes: 9

Views: 7964

Answers (1)

Karine Liuti
Karine Liuti

Reputation: 71

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!

Upvotes: 1

Related Questions