# @idkman/react-native-styles

> Ulitmate styling solution for react-native

Latest version **0.3.2** (published 2021-01-28) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @idkman/react-native-styles
pnpm add @idkman/react-native-styles
yarn add @idkman/react-native-styles
bun add @idkman/react-native-styles
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.3.2 |
| Published | 2021-01-28 |
| First published | 2021-01-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 47.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Arek N |
| Maintainers | idkman |
| Keywords | react-native |

## Links

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

## Recent versions

- 0.3.2 (latest) — 2021-01-28
- 0.3.1 — 2021-01-25
- 0.3.0 — 2021-01-25
- 0.2.0 — 2021-01-03
- 0.1.0 — 2021-01-03

## README

# @idkman/react-native-styles

* 💪 Ulitmate styling solution for React-Native.
* 🎨 Out of box theming solution.
* 😱 Dynamically changing styles based on props.
* 📘 First-class TypeScript support.
* 😃 Easy and intuitive API.

## Installation

```sh
npm install @idkman/react-native-styles
```

or 

```sh
yarn add @idkman/react-native-styles
```

## Usage

#### Create your own theme

```typescript
export interface MyTheme {
  colors: {
    primary: string;
    secondary: string;
  };
}

export const theme: MyTheme = {
  colors: {
    primary: 'blue',
    secondary: 'green',
  },
};

```

#### Insert `<StylesProvider>` as high as possible in your React tree.

Also pass the newly created theme.

```typescript jsx
import React from 'react';
import {StylesProvider} from '@idkman/react-native-styles';
import {theme} from './theme';

export default function App() {
  return (
    <StylesProvider theme={theme}>
      ...
    </StylesProvider>
  );
}

```

#### Style your components with a breeze

Use the power of `useStyles` hook.

```typescript jsx
import React from 'react';
import {Text, View} from 'react-native';
import {makeStyles} from '@idkman/react-native-styles';
import {MyTheme} from './theme';

const useStyles = makeStyles((theme: MyTheme) => ({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    color: theme.colors.primary,
    fontWeight: 'bold',
    fontSize: 24,
  },
}));

export default function MyFunctionComponent() {
  const stylesheet = useStyles();

  return (
    <View style={stylesheet.container}>
      <Text style={stylesheet.text}>Hey! This is a blue text.</Text>
    </View>
  );
}
```

#### Alternative way - using ad-hoc

Simple `withStyles` ad-hoc, especially tailored for class-based components.

```typescript jsx
import {withStyles, WithStylesProps, createStyles} from '@idkman/react-native-styles';
import React from 'react';
import {Text, View} from 'react-native';
import {MyTheme} from './theme';

interface IProps extends WithStylesProps<MyTheme> {
  fontSize: number;
}

const styles = createStyles((theme: MyTheme) => ({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: (props: IProps) => ({
    color: theme.colors.secondary,
    fontSize: props.fontSize,
    fontWeight: 'bold',
  }),
}));

function UseStylesTestComponent(props: IProps) {
  const {stylesheet} = props;

  return (
    <View style={stylesheet.container}>
      <Text style={stylesheet.text}>Hey! This is secondary text ({props.fontSize}px).</Text>
    </View>
  );
}

export default withStyles(styles)(UseStylesTestComponent);

```

## Note on TypeScript

If you are using TypeScript it's highly recommended for you to use `createStyles` utility function.

This tiny method will help you construct your style rules object easily, preventing TS's `type widening` problem.

Under the hood it does literally nothing more than instructing TypeScript to correctly narrow types.

```typescript jsx
import {createStyles} from '@idkman/react-native-styles';

const styles = createStyles((theme: MyTheme) => ({ ... }));
```

## License

MIT

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