rns

react-native-stepper-ui

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

Showing:

Popularity

Downloads/wk

60

GitHub Stars

35

Maintenance

Last Commit

2mos ago

Contributors

4

Package

Dependencies

0

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

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 OneExample TwoExample 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

NameTypeDescriptionDefault
activenumberindex stepper activeundefined
contentReactElement[]Component that render to stepperundefined
onNextFunctionFunction called when the next step button is pressedundefined
onBackFunctionFunction called when the back step button is pressedundefined
onFinishFunctionFunction called when the finish step button is pressedundefined
wrapperStyle?ViewStyleWrapper component style{}
stepStyle?ViewStyleStep component style{backgroundColor: '#1976d2', width: 30, height: 30, borderRadius: 30, justifyContent: 'center', alignItems: 'center', opacity: 1}
stepTextStyle?TextStyleStep Text component style{color: 'white'}
buttonStyle?ViewStyleButton component style{ padding: 10, borderRadius: 4, alignSelf: 'flex-start', marginRight: 10, backgroundColor: '#a1a1a1'}
buttonTextStyle?TextStyleButton Text component style{color: 'white'}
showButton?booleanshow buttontrue

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100