# @palmtreecoding/react-native-theming

> Easy to use and setup theming and styling for React Native

Latest version **1.1.1** (published 2021-10-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install @palmtreecoding/react-native-theming
pnpm add @palmtreecoding/react-native-theming
yarn add @palmtreecoding/react-native-theming
bun add @palmtreecoding/react-native-theming
```

## Health

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

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

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.1 |
| Published | 2021-10-05 |
| First published | 2020-11-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 8.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Tycho Bokdam |
| Maintainers | tripss |
| Keywords | react, react-native, theming |

## Links

- npm: https://www.npmjs.com/package/@palmtreecoding/react-native-theming
- Repository: https://github.com/palmtreecoding/react-native-theming
- Homepage: https://github.com/palmtreecoding/react-native-theming#readme
- Issues: https://github.com/palmtreecoding/react-native-theming/issues
- npm.io page: https://npm.io/package/@palmtreecoding/react-native-theming

## Dependencies (2)

- [theming](https://npm.io/package/theming.md) ^3.3.0
- [@testing-library/react-native](https://npm.io/package/@testing-library/react-native.md) ^7.2.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.1.1 (latest) — 2021-10-05
- 1.1.0 — 2020-11-06
- 1.0.1 — 2020-11-06
- 1.0.0 — 2020-11-04
- 0.2.0 — 2020-11-03
- 0.1.0 — 2020-11-03
- 0.0.1 — 2020-11-03

## README

# React Native Theming
> Easy to use and setup theming and styling for React Native

## Installation
```shell
$ npm install --save @palmtreecoding/react-native-theming
$ yarn add @palmtreecoding/react-native-theming
```

## Examples
Wrapping your application with a theme
```typescript jsx
import React from 'react'
import { ThemeProvider } from '@palmtreecoding/react-native-theming'

export const MyApp = () => (
  <ThemeProvider theme={{ myBackgroundColor: 'pink' }}>
    ...
  </ThemeProvider>
)

export default MyApp
```

### Hook
Using the `createUseStyles` hook
```typescript jsx
import React from 'react'
import { View } from 'react-native'
import { createUseStyles } from '@palmtreecoding/react-native-theming'

const useStyles = createUseStyles((theme) => ({
  
  container: {
    backgroundColor: theme.myBackgroundColor
  }

})) 

export const MyComponent = () => {
  const [styles] = useStyles()
  
  return (
    <View styles={styles.container}>
      ...
    </View>
  )
}
```

### HOC
Using the `withStyles` decorator
```typescript jsx
import React from 'react'
import { View } from 'react-native'
import { createUseStyles } from '@palmtreecoding/react-native-theming'

const componentStyles = (theme) => ({
  
  container: {
    backgroundColor: theme.myBackgroundColor
  }

})

export const MyComponent = ({ styles }) => {
  return (
    <View styles={styles.container}>
      ...
    </View>
  )
}

export default withStyles(componentStyles)(MyComponent)
```

## Development
If you'd like to contribute to this project, all you need to do is clone
this project and run:

```shell
$ yarn install
$ yarn build
$ yarn build:watch // To recompile files on file change
```

## [License](https://github.com/palmtreecoding/react-native-theming/blob/master/LICENSE)
React Native Theming is [MIT licensed](./LICENSE).

## Collaboration
If you have questions or [issues](https://github.com/palmtreecoding/react-native-theming/issues), please [open an issue](https://github.com/palmtreecoding/react-native-theming/issues/new)!

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