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, { 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 => {
    this.setState({ value });
  };
  render() {
    return <SimpleStepper valueChanged={value => this._valueChanged(value)} />;
  }
}

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