Show a component in all screens with React-Native-Router-Flux - React Native

Question

I have a project based on RNRF, and I need to show a countdown component in all screens, according to the Redux state.

I need to set the countdown in the lower right corner in all screens:

I try to set in Provider, but I can't read the state from redux store, to enable or disable the counter.

<Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
        <Router />
        <Counter
            data={'123456'}
            mission={'1'}
            bgColor={'#6F31E2'}
            textColor={'#FFFFFF'}
        />
    </PersistGate>
</Provider>

Is possible to do that with React Native Router Flux?

Answer 1

This is 100% possible by placing the Counter component inside your App.js as you did in the code snippet.

I'm not sure what you mean by you're not able to access the state from the redux store. I just created a demo counter in one of my existing production apps to test this. As long as you use the "connect" function from react-redux you should be able to connect to the global redux store within your Counter component:

Here is my working Counter.js file that I used in my demo:

Edit for clarification: Using connect will allow the Counter component itself to be able to access the store instead of trying to pass the redux store down through props from the App.js file.