react-native-simple-stepper

A simple react-native implementation of the UIStepper control from iOS. To note, customization is available, see Props for more info.

Table of contents

• Installation
• Usage
• Using Text Position
• Props
  • Values
  • Functions
  • Styles

Installation

• yarn add react-native-simple-stepper
• npm install react-native-simple-stepper --save

Usage

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

const App = () => {
  const [value, setValue] = useState(0);
  return <SimpleStepper valueChanged={(newValue) => setValue(newValue)} />;
};

export default App;

Using Text Position

First, set prop showText to true. Second, set prop textPosition to be left, center or right (default: center). Third, profit. It will render as a <Text/> component by default or you can override it with renderText prop. Example layouts:

Left	Center	Right

Props

Values

Functions

Styles