3. Setup a React Native app to work with your Prefab

Prerequisites

Make sure you have Node.js and npm installed on your machine.

Step 1: Create a new React Native app

Initialize a new React Native project. There are two ways to do this:

1. Expo CLI - Easier for new React Native developers.
2. React Native CLI - If you are already familiar with mobile development, enables you to build native code into your project.

For more information, you can refer to this guide.

Step 2: Install the React Navigation package

React Navigation is a standalone library that enables you to implement navigation functionality in a React Native application.

1. Install the package in your project directory. Run npm install @react-navigation/native. You can also use it with yarn.
2. Install its dependencies in your project directory. Run npm install react-native-screens react-native-safe-area-context. You can also use it with yarn.

More information in this link.

Step 3: Install the native stack navigator library

Install the native stack navigator library in your project directory. Run npm install @react-navigation/native-stack. You can also use it with yarn.

More information in this link.

Step 4: Create a Home Page

Create a new folder called screens in the root of your project, in that folder create a new file HomeScreen.js with the following content:

// ./screens/HomeScreen.js
import React from 'react';
import { View, Text } from 'react-native';
function HomeScreen () {
    return (
        <View>
            <Text>Home Page</Text>
        </View>
    );
};
export default HomeScreen;

Step 5: Create a screen to show the Prefab component.

Go to the guide Setup your Prefab for information on how to use pre-fabric components inside a React Native component.

Then, create a new file PrefabScreen.js in the folder screens with the following content:

// ./screens/PrefabScreen.js
import { RetailAccountOpenningPrefab } from "@infinant/retail-ao-prefact-react-component";
function PrefabScreen() {
  return <RetailAccountOpenningPrefab
    environment="sandbox"
    clientId="2blhr1c3qbrr1rht0f9h708am6"
    clientSecretKey="1ml00o67kbig2vq1sall4o2gkqud0e3oobcbbudce7acl4ston32"
  />;
};
export default PrefabScreen;

Step 6: Setup React Navigation

Create a Stack Navigator in the root file of your application, such as index.js or App.js. This Stack Navigator will be used to create screens and navigate between them.

Change the content of the root file App.js to the following:

// App.js
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import HomeScreen from './screens/HomeScreen';
import PrefabScreen from './screens/PrefabScreen';
const Stack = createNativeStackNavigator()
export default function App() {
  return (
    <NavigationContainer>
        <Stack.Navigator initialRouteName="Home">
            <Stack.Screen name="Home" component={HomeScreen} />
            <Stack.Screen name="Prefab" component={PrefabScreen} />
        </Stack.Navigator>
    </NavigationContainer>
  );
}

In the code above:

• We have the <NavigationContainer> component, which manages the navigation tree and contains the navigation state. This component must wrap all navigators structure.
• We created a Stack object using the createNativeStackNavigator function. This object contains 2 properties: Navigator and Screen. Both of them are React components used for configuring the navigator.
• The <Stack.Navigator> component is used to wrap the <Stack.Screen> components, and can provide an initial route with the initialRouteName prop.
• The <Stack.Screen> components are used to define the configuration for the routes. Each <Stack.Screen> component accepts a name prop that corresponds to the name of the route we will use to navigate, and a component prop that corresponds to the component it'll render.
• Our Stack has two routes, a Home route, that corresponds to the HomeScreen component, and a Prefab route, that corresponds to the PrefabScreen component. The initial route for the stack is the Home route.

For more information on configuring the stack navigator, you can refer to this link.

Step 7: Add Button to navigate to the Prefab screen

Add a Button on the Home screen to navigate the user to the Prefab screen.

Change the content of the HomeScreen.js file to the following:

// ./screens/HomeScreen.js
import React from 'react';
import { Button, View, Text } from 'react-native';
function HomeScreen ({ navigation }) {
    return (
        <View>
            <Text>Home Page</Text>
            <Button
                title="Launch Prefab"
                onPress={() => navigation.navigate('Prefab')}
            />
        </View>
    );
};
export default HomeScreen;

In the code above:

• We added the navigation prop to the HomeScreen function. The navigation prop is passed into every <Stack.Screen> component in the native stack navigator.
• Inside the onPress listener of the Button component, we call the navigate() function of the navigation prop with the route name Prefab to navigate to the Prefab screen.

For more information on navigating between screens, you can refer to this link.

Step 8: Run your app on your device

Now you are ready to build and run your app on your device or simulator.