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:
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:
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;
};
}
}
Usage:
Below can you see how to use theme provider functions 'makeStyles' and 'useTheme'.
import React from "react";
import { Button, Text, View } from "react-native";
import { makeStyles, useTheme } from "@m0-0a/react-native-theme";
const Component = () => {
const styles = useStyles({paddingTopValue:10 });
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,
flex: 1,
backgroundColor: primary,
alignItems: "center",
justifyContent: "center",
},
text: {
color: themeMode === "dark" ? "#fff" : "#000",
marginBottom: 10,
},
}));