A Custom Theming for React Native

:+1: ใช้งานง่าย

:+1: กำหนดธีมยังไงก็ได้ แล้วแต่คุณ

:+1: ไม่มี dependency

Table of Contents

• Installation
  • Add package
  • Setup
  • Usage
• Method & Variable

Installation

Add package

$ npm i react-native-custom-theming

$ yarn add react-native-custom-theming

Setup

• สร้างโพลเดอร์ themeProvider (require)
• สร้างไฟล์ index.js ที่ themeProvider (require)
• สร้างไฟล์ styles.js ที่ themeProvider (optional)

// ตัวอย่าง

src
└───themeProvider
│     └──index.js    
│     └──styles.js
│   
...

// index.js

import { createTheme } from "react-native-custom-theming";
import { lightBlueTheme, lightPinkTheme } from "./styles";

export const { StyleSheet, Theme, withTheme } = createTheme(lightBlueTheme);

export const changeLightBlueTheme = () => Theme.setTheme(lightBlueTheme);
export const changeLightPinkTheme = () => Theme.setTheme(lightPinkTheme);

// styles.js

export const lightBlueTheme = {
  colors: {
    primary: "#b0bec5",
    primaryLight: "#e2f1f8",
    primaryDark: "#808e95",
    accent: "#000000"
  },
  toolbar: {
    width: "100%",
    height: 56
  }
};

export const lightPinkTheme = {
  colors: {
    primary: "#ffcdd2",
    primaryLight: "#ffffff",
    primaryDark: "#cb9ca1",
    accent: "#000000"
  },
  toolbar: {
    width: "100%",
    height: 56
  }
};

Usage

• ใช้ withTheme ครอบ main-component (require)
• ใช้ StyleSheet.create(...) (require)

// ใช้ withTheme ครอบ main-component, เพื่ออัพเดททั้งแอพพลิเคชั่น

import { withTheme } from "../themeProvider";

const App = () => (
   <View style={{ flex: 1 }}>
     <Toolbar />
     <SectionOne />
     </View>
   </View>
);

export default withTheme(App);

// สร้าง style ด้วย StyleSheet.create()

import { StyleSheet } from "../themeProvider";

const styles = StyleSheet.create(theme => ({
  container: {
    flex: 1,
    backgroundColor: theme.colors.primaryDark
  }
}));

const SectionOne = () => <View style={styles.container} />;

export default SectionOne;

Method & Variable

| Method | Description | | -------------- | ------------------------------------------------------------- | | createTheme | ฟังชั่นสร้างธีม โดยรับพารามิเตอร์ธีมตั้งต้นเข้าไป และส่งตัวแปรออกมาดังนี้ Theme StyleSheet และ withTheme | | setTheme | ฟังก์ชั่นกำหนดธีมใหม่ โดยใช้ผ่านตัวแปร Theme ดังนี้ Theme.setTheme(newTheme) | | create | ฟังก์ชั่นสร้างรูปแบบธีม โดยใช้ผ่านตัวแปร StyleSheet ดังนี้ StyleSheet.create(function) |

| Variable | Description | | -------------- | ------------------------------------------------------------- | | Theme | ตัวแปรจัดการธีมและเปลี่นนธีม มีฟังก์ชั่นดังนี้ setTheme() | | StyleSheet | ตัวแปรสร้างรูปแบบธีม มีฟังก์ชั่นดังนี้ create(newTheme) | | withTheme | ตัวแปร high order function เพื่อ wrap-component ที่ต้องการอัพเดทเมื่อธีมถูกเปลี่ยน สามารถส่งเพียง Main-Component เพื่ออัพเดททั้งแอพพลิเคชั่น |

Demo

License

• MIT license