React Native Navigation pass dynamic data when rendering

Question

changeTheme(){
this.setState({darktheme:!this.state.darktheme})
}

render()
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} darkT={this.state.darktheme==true} />
        <Stack.Screen name="Settings" component={SettingsScreen} changeTheme={this.changeTheme} darkT={this.state.darktheme==true} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

In the settings page. I want to change the theme using this.props.changeTheme() it is supposed to change the state of the app and the whole app will re-render. But it doesn't work like that, the theme is not being changed. What am I doing wrong here?

When I log this.props.darkT it returns false even after I called the function changeTheme()

Does this.props.changeTheme() work? i dont think that you can pass props like this for navigator, you will have to pass them as params — Guruparan Giritharan, Nov 04 '20 at 17:03
Try this solution to pass props https://stackoverflow.com/a/47092045 — Sameer Kumar Jain, Nov 05 '20 at 03:06

score 0 · Accepted Answer · answered Nov 05 '20 at 01:22

You can try this:

<Stack.Screen name="Settings">
   { () => <SettingsScreen darkT={!!this.state.darkTheme} changeTheme={this.changeTheme} /> }
</Stack.Screen>

In the Settings screen darkT and changeTheme will be available as props so you can access with this.props.darkT and this.props.changeTheme

React Native Navigation pass dynamic data when rendering

1 Answers1