React Native Navigation Progress Bar

A customizable React Native component for displaying a progress bar that integrates seamlessly with React Navigation stacks. This library allows you to wrap your navigation stack and manage progress state across different screens.

Features

• Easy integration with React Navigation stacks.
• Customizable progress bar appearance.
• Context-based progress management.
• Smooth animations.

Installation

This package works for both Expo managed and Bare workflow.

To install the library, use npm:

npm i react-native-naviagtion-progress-bar

or yarn:

yarn add react-native-naviagtion-progress-bar

Usage/Examples

First, wrap your navigation stack with the ProgressBarProvider component. This will provide the progress context to all the screens in your stack.

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { ProgressBarProvider } from 'react-native-progress-bar';
import YourComponent from './YourComponent';
import AnotherComponent from './AnotherComponent';

const Stack = createStackNavigator();

const App = () => (
  <NavigationContainer>
    <ProgressBarProvider>
      <Stack.Navigator screenOptions={{ headerShown: false }}>
        <Stack.Screen name="YourComponent" component={YourComponent} />
        <Stack.Screen name="AnotherComponent" component={AnotherComponent} />
        {/* Add more screens here */}
      </Stack.Navigator>
    </ProgressBarProvider>
  </NavigationContainer>
);

export default App;

Managing Progress: Inside your screens, you can use the ProgressContext to set the progress. This example demonstrates how to set the progress to 20% when a component mounts:

import React, { useContext, useEffect } from 'react';
import { View, Text, Button } from 'react-native';
import { ProgressContext } from 'react-native-progress-bar';

const YourComponent = ({ navigation }) => {
  const { setProgress } = useContext(ProgressContext);

  useEffect(() => {
    setProgress(20); // Set progress to 20%
  }, []);

  return (
    <View>
      <Text>Your Component</Text>
      <Button title="Next" onPress={() => navigation.navigate('AnotherComponent')} />
    </View>
  );
};

export default YourComponent;

Authors

• @codery-official

This library is created and managed by Saim Iqbal.