react-native-easy-theming
DX friendly theming library for React-Native
Geting started
- install package
yarn add react-native-easy-theming
- add babel plugin in babel config
module.exports = {
presets: ['module:@react-native/babel-preset'],
plugins: [['react-native-easy-theming/plugin']], //<- add this
};
- create your theme type
// themes.ts
const light = { name: "light", color: { background: "white" } };
const dark = { name: "dark", color: { background: "black" } };
export const themes = {
light,
dark,
};
export type TMyTheme = typeof light;
- connect your theme type to package
// types/react-native-easy-theming.d.ts
import { TMyTheme } from "../themes";
export * from "react-native-easy-theming";
declare module "react-native-easy-theming" {
interface TTheme extends TMyTheme {}
}
- connect theme provider to your app
// App.tsx
import React from "react";
import {
ThemeProvider,
useTheme,
useThemeChange,
} from "react-native-easy-theming";
import { themes } from "./themes";
export const App = () => {
const [theme, setTheme] = React.useState("light");
return (
<ThemeProvider themes={themes} activeTheme={theme} onChange={setTheme}>
{
// Application
}
</ThemeProvider>
);
};
- use in your component
import React from "react";
import { View, ViewStyle } from "react-native";
const Component = (props: { style: ViewStyle }) => {
return (
<View
s-background-color="color.background"
s-opacity={(theme) => (theme.name === "dark" ? 0.5 : 0.7)}
style={props.style}
s-padding={20}
>
{
//
}
</View>
);
};
Code above will transform by babel to something like:
import { useTheme as _useTheme } from "react-native-easy-theming";
import React from "react";
import { View, ViewStyle } from "react-native";
const Component = ({ style }) => {
const _theme = _useTheme();
return /*#__PURE__*/ React.createElement(View, {
style: [
{
backgroundColor: _theme.color.background,
opacity: (() => (_theme.name === "dark" ? 0.5 : 0.7))(),
},
style,
{
padding: 20,
},
],
});
};