
Security News
Browserslist-rs Gets Major Refactor, Cutting Binary Size by Over 1MB
Browserslist-rs now uses static data to reduce binary size by over 1MB, improving memory use and performance for Rust-based frontend tools.
react-native-simple-theme
Advanced tools
Small and simple theme manager for react-native with out-of-the-box support for dark and light themes based on system settings (via useColorScheme
hook from react-native
).
Fully typed and easy to extend with your own themes.
yarn add react-native-simple-theme
Methods | Params | Description |
---|---|---|
useThemeName | - | returns name of current theme returned from context.getThemeName or value of useColorScheme |
useThemeStyle | styleFactory - function returned from createThemedStyles | returns styled object with applied theme values |
useThemeValue | themePath - path to theme value i.e. text.primary | returns value from defined theme by path |
createThemedStyles | factoryFunction - function which gets theme as first param and returns style object | returns style factory function which should be provided to useThemeStyle hook |
Components | Props | Description | Default value |
---|---|---|---|
ThemeProvider | value | context object containing themes and optional getThemeName function | - |
- | value.themes | object containing themes definition. Required | {} |
- | value.getThemeName | optional function returning your own theme name based on values | useColorScheme hook from react-native |
To type the theme object you can use the following code:
const themes = {
light: {
first: '#fff',
second: '#000',
},
dark: {
first: '#000',
second: '#fff',
},
};
type ThemePaletteType = typeof themes;
declare global {
namespace ReactNativeSimpleTheme {
interface ThemePalette extends ThemePaletteType {}
}
}
It's recommended to place it inside typings/index.d.ts
to work out of the box with TypeScript.
useThemeStyle
usage:import { createThemedStyles, ThemeProvider, useThemeStyle } from 'react-native-simple-theme';
const themes = {
light: {
primary: '#fff',
secondary: '#000',
},
dark: {
primary: '#000',
secondary: '#fff',
},
};
const AppProvider = ({ children }: { children: React.ReactNode }) => (
<ThemeProvider value={{ themes }}>{children}</ThemeProvider>
);
const TestComponent = () => {
const style = useThemeStyle(styles);
return (
<View style={style.container}>
<View style={style.box}>
<Text style={style.text}>Test theme text</Text>
</View>
</View>
);
};
export default function App() {
return (
<AppProvider>
<TestComponent />
</AppProvider>
);
}
const styles = createThemedStyles((palette) => ({
text: {
color: palette.primary,
padding: 10,
},
box: {
height: 100,
width: 100,
backgroundColor: palette.secondary,
},
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
}));
useThemeValue
/ useValueBasedOnTheme
usage:// themes passed to ThemeProvider
const themes = {
light: { icon: { primary: '#aaa' } },
dark: { icon: { primary: '#999' } },
};
const Example = () => {
const iconName = useValueBasedOnTheme({ dark: 'chevron', light: 'close' });
const iconColor = useThemeValue('icon.primary');
// iconName and iconColor will change along with theme.
return <Icon color={iconColor} name={iconName} />;
};
ThemeProvider
usage:const themes = {
blue: { icon: { primary: '#00f' } },
red: { icon: { primary: '#f00' } },
};
const Example = () => {
const getThemeName = useCallback(() => {
const currentAppTheme = getAppTheme(); // returns 'blue' or 'red'
return currentAppTheme;
}, [getAppTheme]);
return (
<ThemeProvider value={{ themes, getThemeName }}>
<ExampleComponent />
</ThemeProvider>
);
};
yarn
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT
FAQs
Simple and small theme manager for react-native
We found that react-native-simple-theme demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Browserslist-rs now uses static data to reduce binary size by over 1MB, improving memory use and performance for Rust-based frontend tools.
Research
Security News
Eight new malicious Firefox extensions impersonate games, steal OAuth tokens, hijack sessions, and exploit browser permissions to spy on users.
Security News
The official Go SDK for the Model Context Protocol is in development, with a stable, production-ready release expected by August 2025.