/react-native-stepper-ui

A simple and fully customizable React Native component to create stepper ui.

Primary LanguageTypeScriptMIT LicenseMIT

react-native-stepper-ui

Platform Version Download License

A simple and fully customizable React Native component to create stepper ui.

  • Work for android and IOS
  • Support typescript
  • Customizable

Table of contents

Example

Example One Example Two Example Three

Installation

If using yarn:

yarn add react-native-stepper-ui

If using npm:

npm i react-native-stepper-ui

Usage

import React, { useState } from 'react';
import { Text, View } from 'react-native';

import Stepper from 'react-native-stepper-ui';

const MyComponent = (props) => {
  return (
    <View>
      <Text>{props.title}</Text>
    </View>
  );
};

const content = [
  <MyComponent title="Component 1" />,
  <MyComponent title="Component 2" />,
  <MyComponent title="Component 3" />,
];

const App = () => {
  const [active, setActive] = useState(0);

  return (
    <View style={{ marginVertical: 80, marginHorizontal: 20 }}>
      <Stepper
        active={active}
        content={content}
        onBack={() => setActive((p) => p - 1)}
        onFinish={() => alert('Finish')}
        onNext={() => setActive((p) => p + 1)}
      />
    </View>
  );
};

export default App;

Props

Name Type Description Default
active number index stepper active undefined
content ReactElement[] Component that render to stepper undefined
onNext Function Function called when the next step button is pressed undefined
onBack Function Function called when the back step button is pressed undefined
onFinish Function Function called when the finish step button is pressed undefined
wrapperStyle? ViewStyle Wrapper component style {}
stepStyle? ViewStyle Step component style {backgroundColor: '#1976d2', width: 30, height: 30, borderRadius: 30, justifyContent: 'center', alignItems: 'center', opacity: 1}
stepTextStyle? TextStyle Step Text component style {color: 'white'}
buttonStyle? ViewStyle Button component style { padding: 10, borderRadius: 4, alignSelf: 'flex-start', marginRight: 10, backgroundColor: '#a1a1a1'}
buttonTextStyle? TextStyle Button Text component style {color: 'white'}
showButton? boolean show button true