Skip to content

Setting up React Native Project

Apply these steps to use Pointr SDK in a React Native project:

  • Download necessary files from Downloads Page.
  • Using node version 18, run the command below via Terminal in the directory you want to create a blank React Native project: react-native init <project-name>
  • Request an access token (POINTR_SDK_TOKEN) from your customer support team.

  • Add the following to your React Native project’s Podfile and place the following lines under target project:

        # Add this line to top of your `Podfile` as a source
    source "https://github.com/pointrlabs/public-podspecs.git"

    # Add this in targets you want to add PointrKit
    ENV['POINTR_SDK_TOKEN'] = '$YOUR_ACCESS_TOKEN'
    ENV['POINTR_SDK_VERSION'] = '~> 8.0'
    pod 'PointrApp', path: 'Pointr/PointrApp.podspec'

  • From downloaded folder, copy the Pointr folder into the ios folder of your React Native project.

  • Run pod install in ios folder.
  • Open the workspace file created under ios folder in Xcode.
  • From the downloaded folder, drag and drop ios/ReactBridge/PTRNativeLibrary.m and ios/ReactBridge/PTRNativeLibrary.h files into your iOS project.
  • Create new dummy swift file for your project and approve when prompted to create a bridging header.
  • Manage the signing of your target in Signing & Capabilities tab of your project.
  • In your plist file, add Privacy - Location When In Use Usage Description field with an approproate description.
  • From the downloaded folder, copy PointrModule.js into the root directory of your React Native project.
  • Run the command below via Terminal into the root directory of your React Native project to generate the initial JS bundle to use: npx react-native bundle --entry-file='index.js' --bundle-output='./ios/main.jsbundle' --dev=false --platform='ios' --assets-dest='./ios'
  • In your App.js file import PTRNativeLibrary and call native methods as described in React Native API Reference
  • Open android folder with Android Studio.

  • Add Kotlin Gradle Plugin as dependency to your Project’s build.gradle file under buildscript.dependencises.

    classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:1.8.20")

  • Add android.pointr.dev repository to your Project’s build.gradle file under allprojects.repositories.

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

  • Apply the plugin into your app module by adding the following line to the top of your app module’s build.gradle file.

    apply plugin: "kotlin-android"

  • Add Pointr SDK dependency to your app module’s build.gradle file under dependencies.

    implementation 'com.pointrlabs:pointr:8+'

  • Add Assets Folder to the main source of your app module.

  • Copy/Paste downloaded android/app/src/main/assets/cacert.pem file to your newly created assets folder.
  • Copy/Paste downloaded android/app/src/main/res/layout/pointr_map_widget_activity_layout.xml into the layout folder of your app module. If layout folder does not exist, create one under res.
  • Copy/Paste downloaded android/app/src/main/java/tech folder into app/java/src/main, together with its content. Content should include the following files: LocationModel.kt, PointrLibraryModule.java, PointrLibraryModule.kt, PointrLibraryPackage.java, PointrMapWidgetActivity.kt.
  • Correct the import statement for R object inside PointrMapWidgetActivity.java. Import statement should contain your apps default package.

  • Add PointrMapWidgetActivity activity under application node of your AndroidManifest.xml file of the app module.

    <activity android:name="tech.pointr.reactnative.PointrMapWidgetActivity" android:launchMode="singleTask" android:screenOrientation="portrait" />

  • Add PointrLibraryPackage to ReactNativeHost’s package list inside MainApplication.java.

        import tech.pointr.reactnative.PointrLibraryPackage;

    ...

    public class MainApplication extends Application implements ReactApplication {

        ...

        private final ReactNativeHost mReactNativeHost =
        new DefaultReactNativeHost(this) {

            ...

            @Override
            protected List<ReactPackage> getPackages() {
                ...
                packages.add(new PointrLibraryPackage());
                return packages;
            }

            ...
        }

        ...
    }

  • From the downloaded folder, copy PointrModule.js into the root directory of your React Native project.

  • Run the command below via Terminal into the root directory of your React Native project to generate the initial JS bundle to use: npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res.
  • In your App.js file import PTRNativeLibrary and call native methods as described in React Native API Reference
Last update: October 3, 2024
Back to top