Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Consumer from Context API inside Dialog Component cannot get Provider value

See original GitHub issue

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”