react-native-shared-module-rn

A React Native library providing shared navigation flows and utilities for use across multiple projects.

Installation

npm install react-native-shared-module-rn

Peer Dependencies

This library requires the following peer dependencies:

npm install @react-navigation/native @react-navigation/native-stack react-native-safe-area-context react-native-screens

Or with yarn:

yarn add @react-navigation/native @react-navigation/native-stack react-native-safe-area-context react-native-screens

Usage

StartLibraryFlow Component

The StartLibraryFlow component provides a complete navigation flow with multiple screens (QMS workflow). It can work both as a standalone app and as a library integrated into existing apps.

Standalone Usage (Default)

When using as a standalone app or in your library's example app, the component includes its own NavigationContainer:

import React from 'react';
import { View } from 'react-native';
import { StartLibraryFlow } from 'react-native-shared-module-rn';

export default function App() {
  return (
    <View style={{ flex: 1 }}>
      {/* No NavigationContainer needed - included by default */}
      <StartLibraryFlow />
    </View>
  );
}

Integration with Existing Navigation

When integrating into an app that already has a NavigationContainer, use the asLibrary prop to prevent nested navigation containers:

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { StartLibraryFlow } from 'react-native-shared-module-rn';

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="LibraryFlow">
          {() => <StartLibraryFlow asLibrary={true} />}
        </Stack.Screen>
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Using LibraryNavigator Directly

For more control, you can import and use the LibraryNavigator directly:

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { LibraryNavigator } from 'react-native-shared-module-rn';

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="LibraryFlow" component={LibraryNavigator} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | asLibrary | boolean | false | Set to true when using this library in another app that already has a NavigationContainer. When true, the component will not wrap itself in a NavigationContainer. |

Important Notes

• Default behavior: The component includes its own NavigationContainer for standalone usage
• Library integration: Pass asLibrary={true} when your app already has a NavigationContainer
• The component manages navigation between Screen A, Screen B, and Screen C
• Ensure the component is rendered in a container with flex: 1 for proper display

Utility Functions

multiply

A simple utility function demonstrating native module integration:

import { multiply } from 'react-native-shared-module-rn';

const result = multiply(3, 7);
console.log(result); // 21

Contributing

• Development workflow
• Sending a pull request
• Code of conduct

License

MIT

Made with create-react-native-library