Navigation inside react-native-modal

user_6509533 0
Viewed 6899

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

react-native-modal react-navigation react-native
1 Answers

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!

user_104949460
Related