How to extend theme?

[dnish]

Hey, I'm trying to extend the default theme with my own changes.

app.js

   render() {
        return (
            <StyleProvider theme={theme}>
                <View style={ViewStyles.standard}>
                    <Router>
                        <Scene key="start" component={Start} hideNavBar={true}/>
                        <Scene key="login" component={Login}/>
                    </Router>
                </View>
            </StyleProvider>
        );
    }

const theme = _.merge(getTheme(),{
    'shoutem.ui.Text': {
        '.desc': {
            marginVertical: 30,
            textAlign:'center',
            fontFamily:'OpenSans-Regular',
            color: 'white'
        },

        '.login': {
            marginTop:20,
            'shoutem.ui.Icon': {
                color: '#00D1FF',
                margin: 0
            }
        },

        color: 'white'

    }
});

In my start component, I have something like this:

start.js

   render() {

        return (

             <View style={ViewStyles.standard}>

                 <Image
                     source={require('../../images/start_bg.png')} style={styles.imageWrapper}/>

                 <View style={styles.contentView}>
                     <Image source={require('../../images/logo_mid.png')} style={styles.logo}/>
                     <Text styleName="desc">This is a demo text</Text>
                 </View>
             </View>
        );
    }

Problem is that the style isn't applied, my text color is still black instead of white.

[dnish]

Just saw my mistake, StyleProvider needs style as prop, not theme.