How to call a function with parametrs from another class in react native?

Question

I want to display the different screens listed on the Side_Drawer in one single screen. I don't want to create the same layout changes for each screen, So when the user clicks on the list, the center part of the screen would change accordingly and other layouts would remain the same.

This is my Screen A where the content changes as the index change in the state.

   class ScreenA extends Component {
      constructor(props) {
        super(props)
        this.state = { index: 0 }; // default screen index
      }
          switchScreen(index) {
            this.setState({ index: index })
          }
      render() {
        let AppScreen = null;

        if (this.state.index == 0) {
          AppScreen = Screen1
        } else if (this.state.index == 1) {
          AppScreen = Screen2
        } else if (this.state.index == 2) {
          AppScreen = ScreenC        }

        return (
          <Drawer ref={(ref) => { this.drawer = ref; }}
            content={<Side_Drawer navigator={this.navigator} />}
            onClose={() => this.closeDrawer()} >
             <Container>    
             <Button
                onPress={() => this.switchScreen(1)}/>

<AppScreen />
             <Containert/>        
            </Drawer>  
        );
      }
    }

This is my Side_Drawer which is the list on the drawer of ScreenA from where I want to change the index of the switchScreen function of Screen A and onPress of the list I want to display Screen C.

class Side_Drawer extends Component {
  render() {
    return (
      <Container>
        <Content>
            <ListItem  >
              <Text onPress={()=>this.props.navigation.navigate('ScreenC')}>Goto Screen C</Text>
            </ListItem>
        </Content>
      </Container>
    );
  }
}

module.exports = withNavigation(Side_Drawer);

I want a Single Screen Application where the only the required part of the screen would change and else would be the same.

Answer 1

Pass on the parameters to use.

You can turn it over to the side menu because you have screen data to move to AppScreen.

content={<Side_Drawer navigator={this.navigator} move={AppScreen} />}

Side_Drawer strong text

<Text onPress={()=>this.props.navigation.navigate(this.props.move)}>