react-native-patina

react-native-patina

This tiny theming library has two main parts:

• A ThemeContext object distributes the current theme througout your app.
• A cacheStyles helper caches calls to StyleSheet.create.

You can use these parts either together or separately. Both come with deep, automatic support for both Flow & Typescript.

This library is unopinionated about what a theme should contain. A "theme" is just a plain Javascript object with whatever properties you like (including methods). Here is an example of a pair of themes:

const darkTheme = {
  backgroundColor: '#000000',
  foregroundColor: '#ffffff',
  rem: (size: number) => Math.round(size * 16)
}

const lightTheme = {
  ...darkTheme,
  backgroundColor: '#ffffff',
  foregroundColor: '#000000'
}

type AppTheme = typeof darkTheme

Using ThemeContext

The ThemeContext object can help distribute a theme object throughout your app. First, create a ThemeContext object based on your initial theme:

import { makeThemeContext } from 'react-native-patina'

// The ThemeContext contains a bunch of methods your app
// can call directly:
export const {
  ThemeProvider,
  useTheme,
  withTheme,
  changeTheme,
  getTheme,
  watchTheme
} = makeThemeContext(darkTheme)

Next, use the ThemeContext.ThemeProvider component to inject the current theme into your React component tree:

const YourApp = () => (
  <ThemeProvider>
    <AllYourScenes />
  </ThemeProvider>
)

The ThemeContext.useTheme hook lets your function-style components access the current theme:

const HeaderText = props => {
  const theme = useTheme()

  // Note: you can use cacheStyles to optimize this:
  const style = {
    color: theme.foregroundColor,
    fontSize: theme.rem(1.2)
  }
  return <Text style={style}>{props.message}</Text>
}

Or, if you are using class-based components, use the ThemeContext.withTheme wrapper to inject a theme property into your component:

class HeaderTextInner {
  render() {
    const { theme } = this.props

    // Note: you can use cacheStyles to optimize this:
    const style = {
      color: theme.foregroundColor,
      fontSize: theme.rem(1.2)
    }
    return <Text style={style}>{this.props.message}</Text>
  }
}

export const HeaderText = withTheme(HeaderTextInner)

To change the current theme, just call ThemeContext.changeTheme:

changeTheme(lightTheme)

This will automatically re-render any React components that use the theme.

If non-React code needs to access the theme, use ThemeContext.getTheme to read the current theme:

StatusBar.setBackgroundColor(getTheme().statusBarColor)

You can also use ThemeProvider.watchTheme to subscribe to updates:

const unsubscribe = watchTheme(theme => {
  StatusBar.setBackgroundColor(theme.statusBarColor)
})

// Call unsubscribe() later if you want to clean up.

Using cacheStyles

The examples above use inline React Native styles, which are slow. Your app will perform much better if it uses StyleSheet.create to build its style sheets ahead of time. On the other hand, just calling StyleSheet.create at startup won't work, because then the styles won't change when the theme changes.

The cacheStyles helper function solves this by memoizing (caching) calls to StyleSheet.create:

import { cacheStyles } from 'react-native-patina'

export const getStyles = cacheStyles((theme: AppTheme) => ({
  header: {
    color: theme.foregroundColor,
    fontSize: theme.rem(1.2)
  },

  text: {
    color: theme.foregroundColor,
    fontSize: theme.rem(1)
  }
}))

This example uses cacheStyles to build a getStyles function. This getStyles function accepts the current theme and returns a matching set of styles. If the passed-in theme changes, the getStyles function automatically calls StyleSheet.create and caches the results for future calls:

const HeaderText = props => {
  const theme = ThemeContext.useTheme()
  const styles = getStyles(theme)

  return <Text style={styles.header}>{props.message}</Text>
}

By default, getStyles will only remember the last-used theme. If your app frequently switches between several themes (maybe prortrait & landscape modes use separate themes, for instance), you can increase the cache size to keep more than one style sheet around at once:

import { setCacheSize } from 'react-native-patina'

setCacheSize(4) // Remember style sheets for the last 4 themes