All default rules lost?

<StyleProvider style={theme}> <Screen> <NavigationBar styleName="inline" leftComponent={ <Button onPress={() => this.props.navigation.navigate("DrawerOpen")}> <Icon name="sidebar"/> </Button> } centerComponent={ <Title> {this.renderDate()} </Title> } rightComponent={ <Button onPress={() => this.setState({isTimelineOpen: true})}> <Icon name="history"/> </Button> } /> </Screen> </StyleProvider>

theme is an empty object, all default rules from shoutem ui seems to have lost. Any help?

[danalloway]

@teddyteh here is what we're doing in an app we're currently building
it's pseudo code but I hope it helps get the general idea across

import { StyleProvider } from '@shoutem/theme'
import { getTheme, defaultThemeVariables } from '@shoutem/ui'

const customThemeVariables = {
    ...defaultThemeVariables,

    // override existing default theme variables
    primaryButtonBackgroundColor: 'red',
    secondaryButtonBackgroundColor: 'blue',

    // add new theme variables
    errorBlockColor: 'purple',
}

const customTheme = {
    // import the existing default theme definition
    ...getTheme(customThemeVariables),

    // add new theme definitions
    'customApp.ui.ErrorBlock': {
        backgroundColor: customThemeVariables.errorBlockColor,
    },
}

function App() {
    return (
        <StyleProvider style={customTheme}>
            <CustomApp />
        </StyleProvider>
    )
}