Overriding styles not working / theme not being applied

[EdwardDrapkin]

Hi there, I'm having trouble getting themes to work:

I have this component:

export default class App extends Component<*, State> {
    render() {
        return (
            <StyleProvider theme={{}}>
                <SafeAreaView style={{ flex: 1 }}>
                    <Test/>
                </SafeAreaView>
            </StyleProvider>
        );
    }
}

That tries to use the Test component:

class _Test extends React.Component<{
    style: Object
}> {
    render() {
        const styles = this.props.style;

        return <View style={styles.test}>
            <Text>TEST</Text>
        </View>;
    }
}

const Test = connectStyle('test', {
    test: {
        backgroundColor: 'red'
    }
})(_Test);

As is, the element gets rendered with a red background.

When I try to change the theme's color, nothing happens:

export default class App extends Component<*, State> {
    render() {
        return (
            <StyleProvider theme={{
                'test': {
                    test: {
                        backgroundColor: 'green'
                    },

                    backgroundColor: 'green'
                }
            }}>
                <SafeAreaView style={{ flex: 1 }}>
                    <Test/>
                </SafeAreaView>
            </StyleProvider>
        );
    }
}

What am I doing wrong? I've followed everything the docs said.

[EdwardDrapkin]

Also, your example is terrible because it filters the Shoutem Theme stuff through about 100 layers of misdirection, making it a pretty useless demonstration of the theming capacity so much as someone showing off their react skills. The point of an example, especially if there's only one, is to demonstrate the bare minimum working code for a concept, not to show off cool stuff you can do later once you understand what's happening. Heading to the examples folder only to be further overwhelmed is exasperating to say the least.

[EdwardDrapkin]

I realized I had the wrong prop (changed theme to style in StyleProvider) but I still am having no luck with styleNames:

export default class App extends Component<*, State> {
    render() {
        return (
            <StyleProvider style={{
                'test': {
                    '*.foo': {
                        backgroundColor: 'green'
                    },
                    '.foo': {
                        backgroundColor: 'green'
                    },
                    'test': {
                        '*.foo': {
                            backgroundColor: 'green'
                        },
                        '.foo': {
                            backgroundColor: 'green'
                        }
                    }
                }
            }}>
                <SafeAreaView style={{ flex: 1 }}>
                    <Test/>
                </SafeAreaView>
            </StyleProvider>
        );
    }
}

class _Test extends React.Component<{
    style: Object
}> {
    render() {
        const styles = this.props.style;

        return <View style={styles.test} styleName="foo">
            <Text>TEST</Text>
        </View>;
    }
}

const Test = connectStyle('test', {
    test: {
        backgroundColor: 'red'
    }
})(_Test);