2

A basic React Native step component

 2 years ago
source link: https://reactnativeexample.com/a-basic-react-native-step-component/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

React Native Steps Component

A basic React Native step component, very useful for multistep forms.

How to install

Paste the src/components/Steps folder into your own project components folder.
Also, copy the 3 images to your image folder.

How to use

  import React from 'react';
  import Steps from '../../components/Steps';
  
  const YourComponent = () => {
    return (
      <Steps step={1} totalSteps={5}/>
    )
   }

  export default YourComponent;

Call the component with the syntax <Steps step={1} totalSteps={5}/> where step is your current step, and totalSteps is the amount of steps in your component.

Examples

<Steps step={1} totalSteps={5}/>

<Steps step={3} totalSteps={6}/>

Styling

You can set up the colors by changing this 3 variables inside the index.js:

const bgColor = "#0069FF";
const lineNext = "#FFF";
const lineDone = "#004FC0";

Also, you can create your own status icons, and place them inside the images folder, with the names:

stepcurrent.png
stepdone.png
stepnext.png

GitHub:

https://github.com/caiohaag/steps-component


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK