README

React-Native-Screen-Steps

Custom steps indicator component for React-Native. This component is very simple to and ready to use, no other configuration is required. just pass totalPages, currentPage, heading and pageTitle as props and you are good to go.

Screen Shots

Install

 npm i react-native-screen-steps

Import

 import Steps from 'react-native-screen-steps';

Usage

Simple Example

    <Steps
        heading={'Create Your Profile'}
        pageTitle={'Personal Information'}
        currentPage={1}
        totalPages={6}
    />

You can also pass extra optional params to styling

    <Steps
        heading={'Create Your Profile'}
        pageTitle={'Personal Information'}
        currentPage={1}
        totalPages={6}
        titleStyle={{
            fontFamily:Fonts.bold
        }}
        pageTitleStyle={{
            fontFamily:Fonts.bold,
        }}
        pageNoTextStyle={{
            fontFamily:Fonts.bold
        }}
    />

Props for Customization

* Required

Prop	Type	Default	Description
heading *	String	'Heading'	Main title like 'Create Your Profile'
pageTitle *	String	‘Page Title'	Screen title like 'Personal Information'
currentPage *	Number		Current page number (Current Steps)
totalPages *	Number		Total pages or screens (Total Steps)
titleStyle	Object		custom styling for Main title
pageTitleStyle	Object		custom styling for Screen title
activeStepColor	String	'#14BFFF'	background color of active steps
inActiveStepColor	String	'white'	background color of in-active steps
activeStepTextColor	String	'#FFFFFF'	text color of active steps
inActiveStepTextColor	String	'#506D85'	text color of in-active steps
backgroundColor	String	'#F5F8FA'	background color of component

Usage no npm install needed!