Skip to content

Installation Guide for react-native-pointr NPM Package

This guide will walk you through the steps to install and configure the react-native-pointr npm package for your React Native project.

Prerequisites

Ensure you have the following set up before proceeding:

  • Node.js installed (v18 or above).
  • React Native CLI or Expo CLI installed.
  • A React Native project already set up.

1. Install the Package

Run the following command to install the package using npm:

npm i react-native-pointr

Or, if you use Yarn:

yarn add react-native-pointr

2. Integration to Mobile Platforms

For iOS projects, make sure to install the CocoaPods dependencies:

Navigate to the iOS folder:

cd ios

Open the Podfile with a text editor and add the access token and source for PointrKit.xcframework to the top of the file

source "https://github.com/pointrlabs/public-podspecs.git"
ENV['POINTR_SDK_TOKEN'] = '<YOUR_TOKEN>'

Note

Acquire token (<YOUR_TOKEN>) to download the package and Pointr iOS native library from Pointr representative.

Run the following command to install the Pods: 

pod install

Warning

  • If you encounter an issue similar to the following: 
    [!] Unable to find a specification for `SocketRocket (= 0.7.0)` depended upon by `React-Core`
You have either:
 * mistyped the name or version.
 * not added the source repo that hosts the Podspec to your Podfile.
  • Next, add the following line within your target block. 
    pod 'SocketRocket', :git => 'https://github.com/facebookincubator/SocketRocket.git', :tag => '0.7.0'
    For example, if your project name is “TestProject”, your target ‘TestProject’ should look like this: 
    target 'TestProject' do
  config = use_native_modules!
  pod 'SocketRocket', :git => 'https://github.com/facebookincubator/SocketRocket.git', :tag => '0.7.0'
  use_react_native!(
    :path => config[:reactNativePath],
    # An absolute path to your application root.
    :app_path => "#{Pod::Config.instance.installation_root}/.."
  )
  ...

Return to the root project directory:

cd ..

For Android projects, make sure you add the repository to get Pointr Android native libraries.

Navigate to the Android folder:

cd android

Open build.gradle with an editor and add the following lines. 

allprojects {
    repositories {
        maven {
            url "https://android.pointr.dev/artifactory/gradle-release-local"
            credentials {
                username '<USERNAME>'
                password '<PASSWORD>'
            }
        }
    }
}

Note

Acquire user name (<USERNAME>) and password (<PASSWORD>) to access the repository that hosts Pointr Android native library from Pointr representative.

Return to the root project directory:

cd ..

Make sure your Android project is set up to use AndroidX (React Native 0.60 and above support AndroidX out of the box). No additional steps should be necessary. If you encounter any issues, ensure your android/build.gradle is using the correct dependencies.

4. Usage

Now you can start using the package in your React Native components. Here’s a simple example of how to import and use it on App.tsx file:

...
import { NativeModules } from 'react-native';

// initialize Pointr instance with the provided credentials
NativeModules.PTRNativePointrLibrary.initialize("<LICENSE_KEY>", "<API_URL>", "<CLIEND_ID>", "<ENVIRONMENT>", <LOG_LEVEL>);

const App = () => {
  return (
    <Button
      title="Start"
      onPress={() => NativeModules.PTRNativePointrLibrary.start((state: string) => {
        console.log(`Pointr state: ${state}`);
      }) }
    />
  );
};

export default App;

For more information about the available functionality, check the API documentation.

5. Run the App

After completing the setup, start your app by running:

npx react-native run-ios

npx react-native run-android

That’s it! Your package should now be installed and ready to use in your React Native project. For more details on usage and advanced configuration, refer to the API documentation.

Last update: October 2, 2024
Back to top