Rn-theme-wrapper NPM

rn-theme-wrapper

This library will use to manage multi themes in react native app

Installing

Installation of the package is easy and this library will not link with a native so it will be lightweight and high-performance compared to another package.

We can install this package with the use of Npm and Yarn and it's described below.

Using npm:

$ npm install rn-theme-wrapper

Using yarn:

$ yarn add rn-theme-wrapper

Amazing Features

Easy for integration and lightweight library
- The library is easy to integrate and developer friendly we only focus in require functionality which is a basic need of all applications and we are not providing unwanted functionality that's why our library is light weighted and provides high performance to the app.
Theme Provider component for the whole app.
- We are providing one Provider component that component will help to serve the theme to the whole app and this component will warn only in the main file of the app so the developer doesn't need to do duplicate code for the same functionality.
Hooks for managing style and theme.
- Package is providing two custom hooks useThemedStyles and useTheme which are used for getting active theme colors and changing theme functionality.
Can manage theme with a single config file.
- Yes, the Whole app theme will define in a single JSON config file in that file developer will define colors in JSON and our provider component will serve those colors to the required places.
- With help of this app and theme will be separate from the code and in the future if is there any need for a changing theme then we can do it easily.

Demo

npm.io

Demo source code is here

Quick Start

import { ThemeProvider, useThemedStyles, useTheme } from "rn-theme-wrapper";

Provide default color theme to ThemeProvider

const App = () => {
  const defaultColors = {
    id: 1,
    BACKGROUND: "#ecf0f1",
    BACKGROUND_SECONDARY: "#ffffff",
    TEXT: "#171717",
    TEXT_SECONDARY: "#686D76",
    PRIMARY: "#FF5714",
    SECONDRY: "#6EEB83",
  };

  const typography = {
    size: {
      S: 16,
      M: 20,
      L: 30,
    },
    letterSpacing: {
      S: 2,
      M: 5,
      L: 10,
    },
  };

  return (
    <ThemeProvider defaultTheme={{ colors: defaultColors, typography }}>
      <YOUR_NAVIGATION_STACK />
    </ThemeProvider>
  );
};

Use theme into stylesheet

import { View, StyleSheet, Image, Text } from "react-native";
import { useThemedStyles, useTheme } from "rn-theme-wrapper";

export const Item = ({ data, loading }) => {
  const style = useThemedStyles(styles);
  const theme = useTheme();
  return (
    <View style={style.mainBox}>
      <Text>Applyed theme</Text>
    </View>
  );
};

const styles = (theme) =>
  StyleSheet.create({
    mainBox: {
      height: 130,
      width: 130,
      borderRadius: 12,
      justifyContent: "center",
      alignItems: "center",
      backgroundColor: theme.colors.PRIMARY,
      marginRight: 22,
      shadowColor: "#000",
      shadowOffset: { width: 1, height: 1 },
      shadowOpacity: 0.4,
      shadowRadius: 3,
      elevation: 5,
      marginBottom: 8,
    },
  });

Change theme

const darkTheme = {
  id: 2,
  BACKGROUND: "#2c2b2e",
  BACKGROUND_SECONDARY: "#141414",
  TEXT: "#ecf0f1",
  TEXT_SECONDARY: "#bdc3c7",
  PRIMARY: "#FF5714",
  SECONDRY: "#6EEB83",
};

const theme = useTheme();

//This function will change a theme in the theme provider
theme.customeTheme(darkTheme);

FAQ

Q: Why should I need to use this? A: Because this theme wrapper can directly serve the theme to the app style sheet another library is not providing these facilities so as a developer it will reduce development time for theme management functionality.

Q: How does the package lightweight and provides high performance? A: We are only providing the required functionality which is a basic need of all apps so we avoid unwanted theme features that's why the package is lightweight. And package logic and function are dependent on javascript and ES6 modules so this package will not link to the native platform and this will provide high performance.

Q: How it will help to improve code quality? A: Yes this library will help you to maintain code quality because the whole app theme will be managed in a single config file and we will not provide any hardcoded color to any component so the coding standard and code quality will improve.