https://github.com/testshallpass/react-native-simple-stepper

A parity version of the iOS UIStepper.
https://github.com/testshallpass/react-native-simple-stepper

react-native simple stepper uistepper

Last synced: 7 days ago
JSON representation

A parity version of the iOS UIStepper.

• Host: GitHub
• URL: https://github.com/testshallpass/react-native-simple-stepper
• Owner: testshallpass
• License: mit
• Created: 2016-07-09T18:13:53.000Z (almost 9 years ago)
• Default Branch: main
• Last Pushed: 2024-12-07T22:41:47.000Z (4 months ago)
• Last Synced: 2025-04-09T15:04:52.261Z (7 days ago)
• Topics: react-native, simple, stepper, uistepper
• Language: TypeScript
• Homepage:
• Size: 10.9 MB
• Stars: 120
• Watchers: 4
• Forks: 15
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-native - react-native-simple-stepper ★60 - A super simple react-native implementation of the UIStepper iOS control. (Components / UI)
• awesome-reactnative-ui - react-native-simple-stepper - native implementation of the UIStepper control from iOS.|<ul><li>Last updated : This week</li><li>Stars : 71</li><li>Open issues : 0</li></ul>|| (Others)
• awesome-react-native - react-native-simple-stepper ★60 - A super simple react-native implementation of the UIStepper iOS control. (Components / UI)
• awesome-reactnative-ui - react-native-simple-stepper - native implementation of the UIStepper control from iOS.|<ul><li>Last updated : This week</li><li>Stars : 71</li><li>Open issues : 0</li></ul>|| (Others)
• awesome-react-native - react-native-simple-stepper ★60 - A super simple react-native implementation of the UIStepper iOS control. (Components / UI)
• awesome-react-native-ui - react-native-simple-stepper ★17 - A super simple react-native implementation of the UIStepper iOS control. (Components / UI)
• awesome-react-native - react-native-simple-stepper ★60 - A super simple react-native implementation of the UIStepper iOS control. (Components / UI)

README

        
# react-native-simple-stepper

[![Platform](https://img.shields.io/badge/-react--native-grey.svg?style=for-the-badge&logo=react)](https://reactnative.dev)

[![npm version](https://img.shields.io/npm/v/react-native-simple-stepper.svg?style=for-the-badge&logo=npm)](https://www.npmjs.com/package/react-native-simple-stepper)

[![npm version](https://img.shields.io/npm/dm/react-native-simple-stepper.svg?style=for-the-badge&logo=npm)](https://www.npmjs.com/package/react-native-simple-stepper)

[![License](https://img.shields.io/badge/license-MIT-blue.svg?style=for-the-badge)](https://raw.github.com/testshallpass/react-native-simple-stepper/master/LICENSE)

[![CI](https://github.com/testshallpass/react-native-simple-stepper/actions/workflows/ci.yml/badge.svg)](https://github.com/testshallpass/react-native-simple-stepper/actions/workflows/ci.yml)

A parity version of the iOS [UIStepper](https://developer.apple.com/reference/uikit/uistepper).

![screenshot](./screenshots/stepper.png)

## Table of contents

- [Installation](#installation)

- [Usage](#usage)

- [Text Position](#text-position)

- [Props](SimpleStepper.tsx)

- [More Examples](./example/App.tsx)

## Installation

|                                                  |

| ------------------------------------------------ |

| `yarn add react-native-simple-stepper`           |

| `npm install react-native-simple-stepper --save` |

## Usage

```javascript

import React from 'react';

import SimpleStepper from 'react-native-simple-stepper';

export default function Example(): React.JSX.Element {

  return  console.log(value)} />;

}

```

## Text Position

|                 left                  |            center (default)             |                 right                  |

| :-----------------------------------: | :-------------------------------------: | :------------------------------------: |

| ![screenshot](./screenshots/left.png) | ![screenshot](./screenshots/center.png) | ![screenshot](./screenshots/right.png) |

```javascript

import React from 'react';

import SimpleStepper from 'react-native-simple-stepper';

export default function TextPositionExample(): React.JSX.Element {

  return ;

}

```