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