React-native-step-navigation NPM

React Native Step Navigation

📚 React Native Step Navigation is a package that allows you to handle step-by-step navigation in React Native applications. It is designed to work seamlessly with Expo and Bare ReactNative, making it easy to integrate into your projects. 🚀

Example GIF

For a complete example and more advanced usage, please refer to the example folder in this repository. 📂

Installation

You can install this package using npm or yarn. Make sure you have Expo installed in your project. 📦

npm install react-native-step-navigation

yarn add react-native-step-navigation

Usage

To get started, import the StepNavigationProvider component from the package and use it to wrap your application. ⚙️

Important: the StepNavigationProvider must be wrapping your NavigationContainer

import { StepNavigationProvider } from './react-native-step-navigation'
import AppRoutes from './src/routes/app.routes'

export default function App() {
  return (
      <StepNavigationProvider>
        <AppRoutes/>
      </StepNavigationProvider>
  )
}

Now, where your NavigationContainer is, add the onStateChange function, which is exported by the useStepNavigation() hook

...
import { useStepNavigation } from '../../react-native-step-navigation'

const AppRoutes = () => {
  const { onStateChange } = useStepNavigation()

  return (
    <NavigationContainer onStateChange={onStateChange}>
        [ ... your routes ... ]
    </NavigationContainer>
  )
}

export default AppRoutes

Now to use the Step Navigation, is very similar to the Stack navgation usage, you just have to create your step navigation object, lets name it "Step", wrap your screens with Step.Navigator, and then create your screens with Step.Screen.

...
import { createStepNavigation } from 'react-native-step-navigation'

const Step = createStepNavigation()

const StepRoutes = () => {
  return (
    <Step.Navigator>
        <Step.Screen name='Step1' component={StepScreen}/>
        <Step.Screen name='Step2' component={StepScreen2}/>
        <Step.Screen name='Step3' component={StepScreen3}/>
        <Step.Screen name='Step4' component={StepScreen4}/>
    </Step.Navigator>
  )
}

export default StepRoutes

Props

`StepNavigator` Props

Prop	Type	Description	Required
`closeRoute`	`string`	Route to navigate when the close button is pressed.	No
`title`	`string`	Title to display in the header.	No
`header`	`boolean`	Flag to show/hide the header.	No
`progressBarStyle`	`IProgressBarStyle`	Style object for customizing the progress bar appearance.	No
`headerStyle`	`ViewStyle`	Style object for customizing the header container.	No
`titleStyle`	`TextStyle`	Style object for customizing the title text.	No
`iconCloseColor`	`string`	Color of the close button icon.	No
`iconBackColor`	`string`	Color of the back button icon.	No

`Step.Screen` Props

Prop	Type	Description	Required
`name`	`string`	Name of the screen.	Yes
`component`	`any`	Component to render for the step.	Yes
`header`	`boolean`	Flag to show/hide the header for the step.	No
`progressBar`	`boolean`	Flag to show/hide the progress bar for the step.	No
`style`	`ViewStyle`	Style object for customizing the step container.	No
`backRoute`	`string`	Route to navigate when the back button is pressed for the step.	No