Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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: 4 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 (over 8 years ago)
Default Branch: main
Last Pushed: 2023-12-18T16:01:26.000Z (about 1 year ago)
Last Synced: 2024-05-19T00:43:21.566Z (8 months ago)
Topics: react-native, simple, stepper, uistepper
Language: TypeScript
Homepage:
Size: 10.5 MB
Stars: 118
Watchers: 4
Forks: 14
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>|![](https://raw.github.com/testshallpass/react-native-simple-stepper/master/screenshots/demo.gif)| (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>|![](https://raw.github.com/testshallpass/react-native-simple-stepper/master/screenshots/demo.gif)| (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 ;

}

```