# react-native-simple-theme

> Simple and small theme manager for react-native

Latest version **0.2.2** (published 2022-02-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-simple-theme
pnpm add react-native-simple-theme
yarn add react-native-simple-theme
bun add react-native-simple-theme
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.2 |
| Published | 2022-02-20 |
| First published | 2022-02-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 53.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Damian Sznajder |
| Maintainers | dsznajder |
| Keywords | react-native, ios, android |

## Links

- npm: https://www.npmjs.com/package/react-native-simple-theme
- Repository: https://github.com/dsznajder/react-native-simple-theme
- Homepage: https://github.com/dsznajder/react-native-simple-theme#readme
- Issues: https://github.com/dsznajder/react-native-simple-theme/issues
- npm.io page: https://npm.io/package/react-native-simple-theme

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 0.2.2 (latest) — 2022-02-20
- 0.2.1 — 2022-02-12
- 0.1.2 — 2022-02-12
- 0.1.1 — 2022-02-12
- 0.1.0 — 2022-02-12

## README

# react-native-simple-theme

## Description

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.

## Installation

```sh
yarn add react-native-simple-theme
```

## API

|            Methods | Params                                                                              | Description                                                                                                                                |
| -----------------: | ----------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
|       useThemeName | -                                                                                   | returns name of current theme returned from context.getThemeName or value of [useColorScheme](https://reactnative.dev/docs/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` |

## Typescript

To type the theme object you can use the following code:

```ts
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.

## Usage

- Basic `useThemeStyle` usage:

```tsx
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:

```tsx
// 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:

```tsx
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>
  );
};
```

## Contributing

### Setup

1. `yarn`

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT

### TODO:

- [ ] Documentation
- [ ] Optimizations
- [ ] Reduce bundle size to minimum

---
_Source: https://npm.io/package/react-native-simple-theme · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._