Package Exports

react-native-themed-stylesheet

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-themed-stylesheet) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-native-themed-stylesheet

A package that allows you to create React Native StyleSheets with support for Dark/Light/Auto Themes.

Simple API
Fully typed
Builds on top of StyleSheets and Hooks
Storybook addon to change Theme Mode

Installation

Using Yarn

yarn add react-native-themed-stylesheet

Using NPM

npm install --save react-native-themed-stylesheet

Usage

Create a type declaration file to merge BaseTheme declaration:

// react-native-themed-stylesheet.d.ts
import 'react-native-themed-stylesheet'

declare module 'react-native-themed-stylesheet' {
  export interface BaseTheme {
    theme: {
      colors: {
        primary: string
      }
    },
    constants: {  // This is optional. If declared/defined, it will be merge with the current theme.
      colors: {
        accent: string
      }
    }
  }
}

Using the theme:

// App.tsx
import React from 'react'
import { View, Text, Button } from 'react-native'
import { ThemeProvider, useCreateStyles, useMode, useTheme, useThemes } from 'react-native-themed-stylesheet'

const DefaultComponent: React.FC = () => {
  const { colors } = useTheme()
  const [mode, setMode] = useMode()
  const [themes, setThemes] = useThemes()
  console.log('Current Mode:', mode)
  console.log('Themes:', themes)
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text style={{ color: colors.primary, backgroundColor: colors.accent }}>Hello World</Text>
      <Button title='Dark Mode' onPress={() => setMode('dark')}/>
      <Button title='Light Mode' onPress={() => setMode('light')}/>
      <Button title='Auto Mode' onPress={() => setMode('auto')}/>
      <Button title='Change Themes' onPress={
          () => setThemes({
            light: {
              colors: { primary: '#c1c1c1' }
            },
            dark: {
              colors: { primary: '#c2c2c2' }
            },
            constants: {
              colors: { accent: '#c3c3c3' }
            }
          })
        }
      />
    </View>
  )
}

const ComponentWithUseCreateStyles: React.FC = () => {
  const [styles, theme] = useCreateStyles(({ colors }) => {
    text: {
      color: colors.primary,
      backgroundColor: colors.accent
    }
  }
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text style={styles.text}>Hello World</Text>
      <Text style={{ color: theme.colors.accent }}>Hello World 2</Text>
    </View>
  )
}

const themes = {
  dark: {
    colors: {
      primary: '#000'
    }
  },
  light: {
    colors: {
      primary: '#fff'
    }
  },
  constants: {
    colors: {
      accent: '#c0c0c0'
    }
  }
}

const App: React.FC = () => (
  <ThemeProvider themes={themes}>
    <DefaultComponent />
    <ComponentWithUseCreateStyles />
  </ThemeProvider>
)

export default App

Storybook Addon

Installation:

// storybook.js
import {
  getStorybookUI,
  configure
} from '@storybook/react-native'
import 'react-native-themed-stylesheet/storybook/register'

configure(() => {
  require('path/to/some/story')
}, module)

const StorybookUIRoot = getStorybookUI()

export default StorybookUIRoot // Make sure to use this component within ThemeProvider.

API

React Component: `ThemeProvider`

Component to provide ThemeContext.

Props

themes: An object of type Themes:

type Themes = {
  dark: BaseTheme['theme']
  light: BaseTheme['theme']
  constants?: BaseTheme['constants']
}

mode: An optional string of type ThemeMode: (Default: 'auto')

type ThemeMode = 'auto' | 'dark' | 'light'

Function: `useCreateStyle(createStyles)`

Hook to create themed stylesheets.

Parameters

createStyles: A function that receives the current theme and returns an object of type Styles.

type Styles  = {
  [prop: string]: ViewStyle | TextStyle | ImageStyle
}
type Theme = (BaseTheme['constants'] & BaseTheme['theme']) | BaseTheme['theme']

Returns

[styles, theme]: [StyleSheet.NamedStyles<Styles>, Theme]

Function: `useMode()`

Hook to get access to current mode.

Returns

[mode, setMode]: [ThemeMode, (newMode: ThemeMode) => void]

Function: `useTheme()`

Hook to get access to current theme.

Returns

theme: Theme

Function: `useThemes()`

Hook to get access to themes.

Returns

[themes, setThemes]: [Themes, (newThemes: Themes) => void]