Skip to main content
Version: 4.0.0-rc.4

Common Pitfalls

This section outlines some common pitfalls when using Theming.

My local styles aren't working with the theme

It's important to understand that the ThemeProvider works by merging your local(external) styles with those set on the theme. This means that in both cases the type of these styles must be the same.

Example 1
const theme = {
Button: {
containerStyle: {
marginTop: 10;
}
}
}

<Button
containerStyle={{ backgroundColor: 'blue' }}
/>

✅ Works

In both cases the style is an object


Example 2
const theme = {
Button: {
containerStyle: [
{
marginTop: 10;
}
]
}
}

<Button containerStyle={[{ backgroundColor: 'blue' }]} />

✅ Works

In both cases the style is an array


Example 3
const theme = {
Button: {
containerStyle: {
marginTop: 10;
}
}
}

<Button containerStyle={[{ backgroundColor: 'blue' }]} />

✅ Works

In both cases the style is an array