Consumer from Context API inside Dialog Component cannot get Provider value

[OscarYuen]

I have a Button component which is wrapped by a Consumer. And I put this button inside Dialog. Whenever the Provider value changes, the button is always rendered with the initial context value instead of the latest Provider value

Example: Say I have the following ThemeProvider and I place it on the root Component

const {Provider, Consumer} = React.createContext({
    color: "#FFFFFF",
    setTheme: ()=>{},
});
const withTheme = Component => props => <Consumer>{value => { return <Component {...props} theme={value}/>}}</Consumer>;

class ThemeProvider extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            theme: {
                color: "#FFFFFF",
                setTheme: this.setTheme,
            }
        }
    }

    setTheme = () => {
          this.setState(({theme}) => ({
                theme: {
                    ...theme,
                   color: '#000000'
                }
            }))
        }
    };

    render() {
        return (
            <Provider value={this.state.theme}>
                {this.props.children}
            </Provider>
        )
    }

}

export {withTheme, ThemeProvider}

And I have a Button

const PrimaryButton = (props) => {
    return (
        <TouchableHighlight style={{
                         backgroundColor: props.theme.color
        }}>
                <Text>
                    {props.title}
                </Text>}
        </TouchableHighlight>)
};

export default withTheme(PrimaryButton)

If I put the PrimaryButton inside Dialog Component, after I have run setTheme(), the background color of the PrimaryButton inside Dialog Component is still "#FFFFFF" when the dialog pops up.

Version: "react": "16.8.3", "react-native": "0.59.8", "react-native-popup-dialog": "^0.18.3"

[beatlecz]

We have the same problem. It breaks apollo completely ...

[CoenWarmer]

We also encounter this, but with react-navigation-hooks and using the hooks in react-redux.

[OrLevy23]

also encounter with this. any fix?

[ManinderGharuan]

We also encounter this, but with react-navigation-hooks and using the hooks in react-redux.

react-native-modals using library react-native-root-siblings

• Add react-native-root-siblings in your dependency by installing it.
• Add lines in your App.js file where you provide redux store

import { setSiblingWrapper } from 'react-native-root-siblings';
import { Provider } from 'react-redux';

// const store = ... get store;

// Call this before using redux context inside RootSiblings.
setSiblingWrapper((sibling) => <Provider store={store}>{sibling}</Provider>);

• Reference https://github.com/magicismight/react-native-root-siblings#4x

[Saad-Bashar]

Having the same issue! Context values do not work with this modal.

[Saad-Bashar]

Any solution for this yet?

[OscarYuen]

Any solution for this yet?

I switched to community library. It doesn't have such an issue. https://github.com/react-native-community/react-native-modal

Only very fews changes are needed for migration

[Saad-Bashar]

@OscarYuen , I may need to do as well. The problem is I have used this package in a lot of places in my app :(

[Saad-Bashar]

@ManinderGharuan , I have been trying your solution and am unable to implement what you have said. Can you please help?