Context is always empty object in React

Question

I'm trying to add themes to react-native application and somehow it just doesn't work. Help please.
I have an Context:

import * as React from 'react';

export const VBContext = React.createContext({});

export default VBContext;

Then I have a custom provider which I use:

import * as React from 'react';
import { VBContext } from './Context';

class Vbcrider extends React.Component<any, any> {
    constructor(props) {
        super(props)

        const { style } = props

        this.state = {
            style
        }
    }

    render() {
        const { children } = this.props;

        const Context = VBContext;

        return (
            <Context.Provider value={this.state.style}>
                {children}
            </Context.Provider>
        );
    }
}

export default Vbcrider;

I also have a HOC, which should give this context to other components:

import * as React from 'react';
import { VBContext } from './Context';

function withStyle(WrappedComponent) {
    return class extends React.Component<any, any> {
        render() {
            const Context = VBContext;

            return (
                <Context.Consumer>
                    {
                        () => <WrappedComponent {...this.props} />
                    }
                </Context.Consumer>
            );
        }
    };
}

export default withStyle;

And a button, where I use a HOC mentioned above:

@withStyle
class Button extends React.Component<any, any> {
    style () {
        const {
            type,
            theme
        } = this.props;

        return {
            //some logic based on theme
        }
    }

    render () {
        const {
            onPress,
            children
        } = this.props;

        return (
            <TouchableOpacity style={this.style()} onPress={() => onPress}>
                {children}
            </TouchableOpacity>
        )
    }
}

But in button and in HOC context is just empty object. Can't understand why. Any help is appreciated.

<Vbcrider style={{
        primaryBackgroundColor: '#0000FF',
        primaryBorderColor: '#0000CF',
        warningBackgroundColor: '#FFA500',
        warningBorderColor: '#FF8C00'
    }}>
        <App
            rootReducers={rootReducers}
            initialState={{}}
            Navigator={RootPageNavigator}
        />
    </Vbcrider>

*empty object* - is it really an object, i.e. `{}`? If it is empty, why do you expect that it shouldn't? How do you use Vbcrider? It's not evident that Button has Vbcrider as a parent. Please, provide https://stackoverflow.com/help/mcve that can replicate the problem. — Estus Flask, Nov 19 '18 at 20:30

score 3 · Accepted Answer · answered Nov 19 '18 at 20:39

3

Try this way:

function withStyle(WrappedComponent) {
    return class extends React.Component<any, any> {
        render() {
            const Context = VBContext;

            return (
                <Context.Consumer>
                    {
                        (value) => <WrappedComponent {...this.props} theme={value} />
                    }
                </Context.Consumer>
            );
        }
    };
}

answered Nov 19 '18 at 20:39

karaxuna

26,752
13
82
117

https://stackoverflow.com/questions/54509572/webpack4-does-not-compile-all-html-files – Air Feb 12 '19 at 16:47

Context is always empty object in React

1 Answers1