Integarte pagepilot library locally in a cli project

Step 1: Clone the Repository

Open your terminal or command prompt and run the following command to clone the repository:

git clone https://github.com/FAB-Builder/reactnative-page-pilot.git

After cloning, navigate into the project directory:

cd reactnative-page-pilot

Step 2: Install Dependencies

To install the necessary dependencies, run:

npm install

Step 3: Resolve Node Modules Paths with Metro

React Native doesn't support symlinks by default, but Metro bundler allows you to resolve third-party dependencies if they are installed outside of your project folder.

Open the metro.config.js file in the root of your React Native cli project. Add the nodeModulesPaths property inside the resolver configuration, like this:

const packagePath = '/Users/mac/my-own-packages/my-awesome-package';

module.exports = {
  resolver: {
    nodeModulesPaths: [packagePath],
    watchFolders: [packagePath]
    // other resolver options...
  },
  // other Metro options...
};

Step 4: Install Required Packages

Please make sure all the following libraries are present in your CLI project. If not, you can install them using the command below.

@gorhom/bottom-sheet @react-native-async-storage/async-storage axios react-native-gesture-handler react-native-reanimated react-native-svg react-native-webview

Step 5: Link React and React Native in the Library

Now, you need to manually link react and react-native from the project in the library:

Navigate to the project folder, then go to node_modules/react, and run:

npm link

Next, go to node_modules/react-native and run:

npm link

Than in your reactnative-page-pilot library folder, run:

npm link react react-native

Step 6: Link the Library to Your App

Navigate to the library folder (reactnative-page-pilot) and run:

npm link

Then, in your app, run:

npm link reactnative-page-pilot

Step 7: Run Your App

Finally, run your app with the following command:

npx react-native start --reset-cache

Initilize the library

In you App.tsx

import {init, PagePilotProvider} from 'pagepilot';

await init({ 
  applicationId: '669a1877aa1facc29d5cea86',
});

And Wrap your whoel app with <PagePilotProvider>YourApp </PagePilotProvider>

Now your library is initalize with Pagepilto librray.

usePagePilotContext to use the library,

const {show, setUserIdentifier, updateKeys} = usePagePilotContext();

setUserIdentifier: setUserIdentifier is used to set the user Id.

await setUserIdentifier('userId');

show: show function will get the screen and provide teh available component fo that screen

<Button title="Show" onPress={() => show({screen: 'Home'})} />

The updateKeys function is used to pass the reference of an element to components like Beacon, Tooltip, and Tour, ensuring they are displayed over the correct element.

How to Use updateKeys: Attach a Ref: Add a ref to the target element or view where the component should appear. Handling Views: If using a View, set collapsible={false} to ensure proper rendering. Special Cases (e.g., Buttons): Some components, like Button, do not support direct refs. In such cases, wrap the component inside a View and take the ref of that View instead.

await updateKeys("#beacon", beaconRef);
await updateKeys("#tooltip", tooltipRef);
await updateKeys("#tour1", tour1);
await updateKeys("#tour2", tour2);

<View>
  <View ref={beaconRef} collapsable={false}></View>
</View>

<TouchableOpacity ref={tooltipRef} style={{backgroundColor: 'pink', padding: 10}}>
    <Text>Tooltip</Text>
</TouchableOpacity>

<Text ref={tour1}>Tour1</Text>

<View ref={tour2} collapsable={false}>
  <Button title='Tour2'  />
</View>