@m0-0a/react-native-theme

react-native-theme

Installation:

npm i @m0-0a/react-native-theme

Implementation:

You have to wrap your app with Theme provider and supply themes to it.

Example:

//app.tsx file
import React from 'react';
import ThemeProvider from '@m0-0a/react-native-theme';
import themes from 'path/to/themes/file';

const App = () => {
	return (
        <ThemeProvider themes={themes}>
        /*   
        .
        .
        .
        .
        . 
        */
        </ThemeProvider>
    );
};

export default App;

To make things easier, this package let you to define custom theme type. Below you can find an example to themes file:

//theme.ts file
import { ThemeType } from "@m0-0a/react-native-theme";

const commonProperties: CommonPropertiesType = {
  commonProperty1: {
    /*
    .
    .
    .
    .
    */
  },
};

const light: ThemeType = {
  colors: { primary: "#fCffff" },
  ...commonProperties,
};

const dark: ThemeType = {
  colors: { primary: "#110f1d" },
  ...commonProperties,
};

export default { light, dark };

type CommonPropertiesType = {
  commonProperty1: {};
};

declare module "@m0-0a/react-native-theme" {
  interface ThemeType extends CommonPropertiesType {
    colors: {
      primary: string;
      /*
      .
      other colors
      .
      */
    };
  }
}

Usage:

Below can you see how to use theme provider functions 'makeStyles' and 'useTheme'.

// Component.tsx file
import React from "react";
import { Button, Text, View } from "react-native";
import { makeStyles, useTheme } from "@m0-0a/react-native-theme";

const Component = () => {
  // styles object.
  const styles = useStyles({paddingTopValue:10 /*passing some props*/});
  // theme hook
  const { changeThemeMode, theme } = useTheme();

  const handleChangeColor = () => {
    changeThemeMode(theme.themeMode === "dark" ? "light" : "dark");
  };
  return (
    <View 
        style={styles.container} // Applying style on view component.
        >
      <Text style={styles.text}>ThemeMode is {theme.themeMode}</Text>
      <Button title="change" onPress={handleChangeColor} />
    </View>
  );
};

export default Component;

const useStyles = makeStyles(({ colors: { primary }, themeMode },{ paddingTopValue/*passed props note: There are no intellisense support on passed props */}) => ({
  container: {
    paddingTop:paddingTopValue, // using passed props.
    flex: 1,
    backgroundColor: primary, // using theme variables
    alignItems: "center",
    justifyContent: "center",
  },
  text: {
    color: themeMode === "dark" ? "#fff" : "#000", // using theme variables
    marginBottom: 10,
  },
}));