react-native-custom-theming

A Custom Theming for React Native

👍 ใช้งานง่าย

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

👍 ไม่มี 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