# react-native-ez-components

> Component collections

Latest version **0.7.0** (published 2020-06-17) · MIT license · 0 weekly downloads

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

## Install

```sh
npm install react-native-ez-components
pnpm add react-native-ez-components
yarn add react-native-ez-components
bun add react-native-ez-components
```

## Health

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

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.7.0 |
| Published | 2020-06-17 |
| First published | 2019-01-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 115.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Ez-Connect |
| Maintainers | ez-connect |

## Links

- npm: https://www.npmjs.com/package/react-native-ez-components
- Repository: https://github.com/ez-connect/react-native-ez-components
- npm.io page: https://npm.io/package/react-native-ez-components

## Dependencies (3)

- [color](https://npm.io/package/color.md) ^3.1.2
- [@react-native-community/progress-view](https://npm.io/package/@react-native-community/progress-view.md) ^1.0.3
- [@react-native-community/progress-bar-android](https://npm.io/package/@react-native-community/progress-bar-android.md) ^1.0.3

## Recent versions

- 0.7.0 (latest) — 2020-06-17
- 0.6.0 — 2019-11-30
- 0.5.10 — 2019-10-03
- 0.5.9 — 2019-09-23
- 0.5.8 — 2019-09-23
- 0.5.7 — 2019-09-20
- 0.5.6 — 2019-09-19
- 0.5.5 — 2019-09-13
- 0.5.4 — 2019-09-10
- 0.5.3 — 2019-09-09
- 0.5.2 — 2019-09-08
- 0.5.1 — 2019-09-08
- 0.5.0 — 2019-09-08
- 0.4.6 — 2019-09-04
- 0.4.5 — 2019-09-03
- … 33 more at https://npm.io/package/react-native-ez-components/versions

## README

# react-native-ez-components

A collection of some components based on `react-native-elements` that support Theme.

## Getting started

`$npm i react-native-elements react-native-ez-components`

Or

`$ yarn add react-native-elements react-native-ez-components`

## Components

Almost components of `react-native-elements` and:

- `Daylight`: a simple helper to allow set color temperature following sunset/sunrise
- `DaylightView`: a view used to apply daylight to apps
- `EventListener`: a base class, used to add event listeners
- `Header`
- `NavigationService`: a helper to help navigation between screens easy without use `react-navigation` props
- `ProgressBar`: simple wrap `ProgressBarAndroid` and `ProgressViewIOS`
- `Storage`: load and save objects to disks
- `Theme`
- `Toast`: like Toast on Android use pure JS
- `TouchableFeedback`: uses `TouchableNativeFeedback` and `TouchableOpacity` based on platforms
- `TouchableIcon`: an `Icon` uses `TouchableFeedback`

## Theme

Define your `ThemeItem`

```javascript
const themes = [
  {
    name: 'Light',
    primary: '#212121',
    onPrimary: '#ffffff',
    secondary: '#212121',
    onSecondary: '#ffffff',
    background: '#ffffff',
    onBackground: '#000000',
    surface: '#eceff1',
    onSurface: '#616161',
    iconset: 'ionicon',
  },
  {
    name: 'Dark',
    primary: '#fafafa',
    onPrimary: '#000000',
    secondary: '#fafafa',
    onSecondary: '#000000',
    background: '#000000',
    onBackground: '#bdbdbd',
    surface: '#0f0f0f',
    onSurface: '#8d8d8d',
    iconset: 'ionicon',
  },
  // ...
];
```

Add `ThemeProvider` to your root component

```javascript
import { ThemeProvider } from 'react-native-elements';
...
<ThemeProvider ref={v => Theme.init(v)}>
  ...
</ThemeProvider>
```

Init a `Theme`.

```javascript
// Apply color
const item = themes[0]; // or pick one of them
Theme.setThemeItem(item);

// Override
Theme.setTheme({
  Badge: {
    containerStyle: { marginRight: 6 },
  },
  Button: {
    titleStyle: {
      fontSize: 14,
    },
  },
  ...
});

```

Add listeners to do what you want then

```javascript
Theme.addListener(ThemeEvent.OnChange, this._handleOnThemeChange);

_handleOnThemeChange = (name: string) {
  // Setting navigation options to match with new theme for example
};
```

Apply another theme

```javascript
Theme.setThemeItem(<another-theme>);
```

That's all. All components will be use the colors that has been set.

## Example

See the `example` in this repository.

## References

[react-native-elements](https://react-native-training.github.io/react-native-elements/docs/overview.html)

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