Skip to content
No description or website provided.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
src
.gitignore
README.md
package.json
tsconfig.json
yarn.lock

README.md

react-native-theme-style

The problem

You want to:

  • Apply styles to your react-native component according to a theme
  • not use styled-components because of various reasons (Jest/Flow/etc issues)
  • have a fully typed theme (Flow and Typescript support)
  • A lightweight solution which is plain React and use the power of Hooks and context

Welcome to react-native-theme-style.

Usage

You must have React-Native 0.59+ installed

  1. Install
yarn add react-native-theme-style
  1. Create your theme context
// ./src/theme.jsx

import * as React from "react";
import { configureTheme } from "react-native-theme-style";

const defaultTheme = { color: "red" };
export const ThemeContext = React.createContext(defaultTheme);

export const useTheme = configureTheme(ThemeContext);
  1. Wrap your app within the theme context
//./App.jsx
// ... imports going here
import {ThemeContext} from "./src/theme";

//... App class going here
render() {
    return (
    <ThemeContext.Provider>
      <App />
    </ThemeContext.Provider>
    );
}

And then in your functional components (on class components it won't work because of hooks running behind the hood) you can do:

// ./src/Foo.component.jsx
import { Text, View } from "react-native";
import { useTheme } from "./theme";

export const Foo = () => {
  const stylings = useTheme(styles);
  return (
    <View>
      <Text style={stylings.bar}>Hello React native</Text>
      <Text style={stylings.foo}>Hello Theme</Text>
    </View>
  );
};

const styles = {
  bar: {
    color: "yellow"
  },
  foo: theme => ({
    color: theme.color
  })
};

Optionally, if you want to evaluate the styles according to some value, you can pass a second parameter to useTheme:

// ./src/Foo.component.jsx
import { Text, View } from "react-native";
import { useTheme } from "./theme";

export const Foo = () => {
  const stylings = useTheme(styles, { isActive: true });
  return (
    <View>
      <Text style={stylings.bar}>Hello React native</Text>
      <Text style={stylings.foo}>Hello Theme</Text>
    </View>
  );
};

const styles = {
  bar: {
    color: "yellow"
  },
  foo: (theme, params) => ({
    color: params.isActive ? theme.color : "brown"
  })
};

Typescript/flow

// ./src/theme.tsx

import * as React from "react";
import { configureTheme, ThemeStyle } from "react-native-theme-style";

const defaultTheme = { color: "red" };
const ThemeContext = React.useContext(defaultTheme);

export const useTheme = configureTheme(ThemeContext);

// Typings support
export type ThemeType<T> = ThemeStyle<{ color: string }, T>;

and then:

// ./src/Foo.component.jsx
import { Text, View } from "react-native";
import { useTheme, ThemeType } from "./theme";

export const Foo = () => {
  const stylings = useTheme(styles, { isActive: true });
  return (
    <View>
      <Text style={stylings.bar}>Hello React native</Text>
      <Text style={stylings.foo}>Hello Theme</Text>
    </View>
  );
};

const styles: ThemeType<{ isActive: boolean }> = {
  bar: {
    color: "yellow"
  },
  foo: (theme, params) => ({
    color: params.isActive ? theme.color : "brown"
  })
};
You can’t perform that action at this time.