Access redux state in tabnavigator (react-navigation)

Question

I'm using redux to store some values. One of these values is a boolean named "seen". It's updated to "false" whenever a new message (through websockets) arrive, and when the messages-screen is opened, it's updated to "true" again.

I also have a tabnavigator. In this tabnavigator, I have 4 buttons (icons): Home, Users, Messages and Settings.

Whenever the value of "seen" is "false", I want to show an extra icon in the tabnavigator to show users they have new messages. So I want to have access to the redux store in the tabnavigator.

My tabnavigator code is as follows:

const TabsNavigator = createMaterialTopTabNavigator(
    {
        Home: {
            screen: Home,
            navigationOptions: {
                tabBarIcon: () => (
                    
                )
            }
        },
        Users: {
            screen: Users,
            navigationOptions: {
                tabBarIcon: () => (
                    
                )
            }
        },
        Messages: {
            screen: Messages,
            navigationOptions: {
                tabBarIcon: () => {
                    return (
                    
                        // HERE I WANT TO HAVE ACCESS TO THE REDUX STORE (SEEN)
                        // I WANT TO SHOW AN ICON WHEN SEEN = FALSE
                        {seen === false &&
                            
                        }
                        
                    
                )}
            }
        },
        Settings: {
            screen: Settings,
            navigationOptions: {
                tabBarIcon: () => (
                    
                )
            }
        }
    },
    {
        initialRouteName: 'Home',
        tabBarPosition: 'bottom',
        tabBarOptions: {
            showIcon: true
        }
    }
)

How can I access the value of "seen" (in the redux store) in the tabnavigator? Adding useSelector(state => state.messages.seen) to the tabnavigator does not work, I get an error saying "hooks can only be called from the body of a functional component".

user_10899979 · Answer

This is not very recommended, but you can directly access the Redux state if you export the store from the file you configure it in.

e.g

const store = createStore(
  persistedAppReducer, // disregard the actual config
  undefined,
  applyMiddleware(NavMiddleware, LoggerMiddleware, EpicMiddleware)
);

export default store;

Then, you can import this store and get the state like so: store.getState()

user_3572533 · Answer

I had the same problem and fixed it by creating a FunctionComponent as the tabBarIcon like this:

interface MyIconProps {
  focused: boolean,
}

const MyIcon: React.FunctionComponent = ({
  focused,
}) => {
  const count = useSelector(getCount)

  return (
    
      
      { count > 0 &&  }
    
  )
}

const MyTab = createStackNavigator(
  {
    MyScreen,
  },
  {
    navigationOptions: ({ navigation, navigationOptions }) => ({
      tabBarIcon: ({ focused }: { focused: boolean }) => 
    }),
  }
)

Access redux state in tabnavigator (react-navigation)

2 Answers