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. 🚀

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

or

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 |

Dependencies

Contributing

Contributions are welcome! If you have any bug reports, feature requests, or suggestions, please create an issue on GitHub.

If you want to contribute code, please follow the contribution guidelines in this repository.

License

This project is licensed under the MIT License. 📜