Search code examples
react-nativereact-navigationreact-navigation-stack

How to wrapper createStackNavigator with redux?

I think my question is clear. Before I start, I should show about the project structure I created myself.

project structure

I added the router logic to the project later and I think it will work better.

stack_main.js following;

import Screen from '../screens';
import {createStackNavigator} from 'react-navigation-stack';

export default createStackNavigator(
  {
    HomeScreen: Screen.HomeScreen,
    MyEarningsScreen: Screen.MyEarningsScreen,
    // TestScreen: Screen.TestScreen,
  },
  {
    cardStyle: {
      backgroundColor: '#000000',
    },
  },
);

In fact, if you can change the value of "cardStyle.backgroundColor" in any way, there is no need to wrap it with redux. Since redux is state management, I can't wrap the createStackNavigator function in the react-navigation module or I don't know.

I need to change the "cardStyle.backgroundColor" value every time a stack is pushed. How can I do it ?

Thank you for interest.

Why do I want this?

I created a side menu using react-native-drawer as in the image below.

my drawer menu like this

In the module I used, no matter what I gave the offset props value, there were white parts of the background color; As a result of my research as a solution to this cardStyle I saw and applied.

Solution

  • Update to the latest version of react-navigation-stack and then use screenProps customize the colors dynamically.