# react-native-stepper-counter

> A super simple react-native implementation Stepper.If you have any thought of implementing Add To cart something like E-commerce apps or Food Apps, just give a try

Latest version **1.0.0** (published 2019-08-31) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-stepper-counter
pnpm add react-native-stepper-counter
yarn add react-native-stepper-counter
bun add react-native-stepper-counter
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2019-08-31 |
| First published | 2019-08-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 23.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Trinadh Koya |
| Maintainers | trinadhkoya9 |
| Keywords | react-component, control, react-native-component, ios, android, react-native, UIStepper, stepper, simple-stepper, SimpleStepper, simple stepper, simple_stepper, simple |

## Links

- npm: https://www.npmjs.com/package/react-native-stepper-counter
- Repository: https://github.com/trinadhkoya/react-native-stepper-counter
- Homepage: https://github.com/trinadhkoya/react-native-stepper-counter.git#readme
- Issues: https://github.com/trinadhkoya/react-native-stepper-counter.git/issues
- npm.io page: https://npm.io/package/react-native-stepper-counter

## Dependencies (1)

- [prop-types](https://npm.io/package/prop-types.md) 15.5.10

## 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

- 1.0.0 (latest) — 2019-08-31
- 3.0.0 — 2019-08-31

## README

# react-native-simple-stepper

[![Platform](https://img.shields.io/badge/platform-react--native-lightgrey.svg)](http://facebook.github.io/react-native/)
[![npm version](http://img.shields.io/npm/v/react-native-simple-stepper.svg)](https://www.npmjs.com/package/react-native-simple-stepper)
[![npm version](http://img.shields.io/npm/dm/react-native-simple-stepper.svg)](https://www.npmjs.com/package/react-native-simple-stepper)
[![Build Status](https://travis-ci.org/testshallpass/react-native-simple-stepper.svg?branch=master)](https://travis-ci.org/testshallpass/react-native-simple-stepper)
[![codecov](https://codecov.io/gh/testshallpass/react-native-simple-stepper/branch/master/graph/badge.svg)](https://codecov.io/gh/testshallpass/react-native-simple-stepper)
[![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.github.com/testshallpass/react-native-simple-stepper/master/LICENSE)

A super simple react-native implementation of the [UIStepper](https://developer.apple.com/reference/uikit/uistepper) control from iOS with added customization and flexibility.

## Table of contents

1. [Installation](#installation)
2. [Usage](#usage)
3. [Props](#props)

## Installation

```npm i react-native-simple-stepper --save``` OR ```yarn add react-native-simple-stepper```

## Usage

```javascript

import React, { Component } from 'react';
import { SimpleStepper } from 'react-native-simple-stepper';

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = { value: 0 };
  }
  valueChanged(value) {
    // Truncate value to 2 decimal places and cast as Number.
    const nextValue = Number(value.toFixed(2));
    this.setState({ value: nextValue });
    // ...
  }
  render() {
    return <SimpleStepper valueChanged={value => this.valueChanged(value)} />;
  }
}

```

## Props

### Values

| Name | Type | Description | Default |
| --- | :---: | --- | --- |
| ```initialValue``` | Number  | initial value | 0
| ```minimumValue``` | Number  | minimum value | 0
| ```maximumValue``` | Number  | maximum value | 10
| ```stepValue``` | Number  | step value (ex. increment by 10) | 1
| ```incrementImage``` | String or Number  | network or local image | require('./assets/increment.png')
| ```decrementImage``` | String or Number  | network or local image | require('./assets/decrement.png')
| ```activeOpacity``` | Number  | touch opacity | 0.4
| ```disabledOpacity``` | Number  | when step button is disabled | 0.5
| ```disabled``` | Boolean  | stepper disable state | false
| ```wraps``` | Boolean  | whether or not it wraps. [more info](https://developer.apple.com/documentation/uikit/uistepper/1624068-wraps) | false
| ```showText``` | Boolean  | whether or not to show text component | false
| ```textPosition``` | String  | placement of the text component | center

### Functions

| Name | Type | Description | Default |
| --- | :---: | --- | --- |
| ```valueChanged``` | Function  | invoked when value changes | `() => {}`
| ```onMin``` | Function  | invoked when value reaches min value | `() => {}`
| ```onMax``` | Function  | invoked when value reaches min value | `() => {}`
| ```onIncrement``` | Function  | invoked each time value increments | `() => {}`
| ```onDecrement``` | Function  | invoked each time value decrements | `() => {}`
| ```renderDecrementImage``` | Function  | used to override decrement image component | `undefined`
| ```renderIncrementImage``` | Function  | used to override increment image component | `undefined`
| ```renderDecrementStep``` | Function  | used to override decrement step component | `undefined`
| ```renderIncrementStep``` | Function  | used to override increment step component | `undefined`
| ```renderText``` | Function  | used to override increment text component | `undefined`

### Styles

| Name | Type | Description | Default |
| --- | :---: | --- | --- |
| ```textStyle``` | Object  | text component style | `{ padding: 8, fontSize: 20, fontWeight: 'bold', color: 'blue' }`
| ```containerStyle``` | Object  | container component style | `{ backgroundColor: 'transparent', flexDirection: 'row', borderWidth: 2, borderRadius: 8, overflow: 'hidden', alignItems: 'center', borderColor: 'blue' }`
| ```separatorStyle``` | Object  | separator component style | `{ width: StyleSheet.hairlineWidth, backgroundColor: 'blue', height: '100%' }`
| ```incrementStepStyle``` | Object  | increment step component style | `{ padding: 8 }`
| ```decrementStepStyle``` | Object  | decrement step component style | `{ padding: 8 }`
| ```incrementImageStyle``` | Object  | increment image component styles | `{ height: 36, width: 36 }`
| ```decrementImageStyle``` | Object  | decrement image component styles | `{ height: 36, width: 36 }`

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