LO - React Native

V 0.4.1 (released 20/06/24)

React Native Wrapper for LANDMARKSID SDK

A convenient wrapper for integrating the LANDMARKSID SDK into React Native applications.

Usage

Integrating the LANDMARKSID React Native SDK into your project involves four key steps:

1. Installing the LANDMARKSID SDK
2. Configuring the Android App
3. Configuring the iOS App
4. Configuring the React Native App

Installing the LANDMARKSID SDK

React Native Project Installation

Run the following command in your React Native project:

npm install @landmarksid/react-native-sdk-wrapper

Android SDK Installation

The LANDMARKSID Android SDK is available through Jitpack. To install:

• Ensure you have the LANDMARKSID_JITPACK_AUTH_TOKEN set in your gradle.properties file (either in your global ~/.gradle/ directory or within your project). Refer to the Gradle Documentation for more details on setting gradle properties.

iOS SDK Installation

To integrate the LANDMARKSID SDK into your iOS project:

• Add the LANDMARKSID SDK Pod to your Podfile:

  target 'MyReactNativeIOSApp' do
  +  pod 'LandmarksID/LO', :git => 'https://github.com/LANDMARKSID/LandmarksID-iOS.git', :tag => '2.5.2'
  ...
  end
  

• For M1 Mac users, modify your Podfile to accommodate the architecture:

  post_install do |installer|
  +  installer.pods_project.build_configurations.each do |config|
  +    config.build_settings["ONLY_ACTIVE_ARCH"] = "NO"
  +    config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '13.6'
  +  end
  ...
  

After that run pod install in your iOS project directory.

Configuring the Android App

For the Android app:

• Modify your MainActivity to extend LandmarksIDActivity:

  -import com.facebook.react.ReactActivity;
  +import com.landmarksidreactnativesdkwrapper.LandmarksIDActivity;
  
  -public class MainActivity extends ReactActivity {
  +public class MainActivity extends LandmarksIDActivity {
  

• Set the following Gradle properties:

  LANDMARKS_ID_SDK_APP_ID=your-app-id
  LANDMARKS_ID_SDK_APP_KEY=your-app-key
  

  More information on configuring Gradle properties can be found in the Gradle Documentation.

Configuring the iOS App

For the iOS app:

• Add these properties to your Info.plist:

  <key>LANDMARKS_ID_SDK_APP_ID</key>
  <string>$(LANDMARKS_ID_SDK_APP_ID)</string>
  <key>LANDMARKS_ID_SDK_APP_KEY</key>
  <string>$(LANDMARKS_ID_SDK_APP_KEY)</string>
  

• Ensure you have an .xcconfig file with these properties:

  LANDMARKS_ID_SDK_APP_ID = your-app-id
  LANDMARKS_ID_SDK_APP_KEY = your-app-key
  

  Consult the Xcode Documentation for more on using .xcconfig files.

Configuring the React Native App

In your React Native app, initialize the SDK using the provider:

import { LandmarksIdSdkProvider } from '@landmarksid/react-native-sdk-wrapper';

export default function App() {
  return (
    <LandmarksIdSdkProvider customerId={'123'}>
      <SafeAreaView>
        <Text>My App</Text>
        <MyComponent />
      </SafeAreaView>
    </LandmarksIdSdkProvider>
  )
}

In your component you can use the useLandmarksIdSdk hook to access the SDK functions:

• customerId: The current customer ID
• setCustomerId: A function that takes a string and sets the customer ID
• sendCustomFloat: A function that takes a string (key) and a number (value) and sends custom data to the SDK
• sendCustomString: A function that takes a string (key) and a string (value) and sends custom data to the SDK
• sendCustomInteger: A function that takes a string (key) and a number (value) and sends custom data to the SDK

import { useLandmarksIdSdk } from '@landmarksid/react-native-sdk-wrapper';

export default function MyComponent() {
  const {
    customerId,
    setCustomerId,
    sendCustomFloat,
    sendCustomString,
    sendCustomInteger,
  } = useLandmarksIdSdk();

  return (
    <Button onPress={setCustomerId('abc')}>
      Set Customer ID to abc
    </Button>
  )
}

Configuring iOS Permissions

To configure permissions for your iOS App using react-native-permissions:

• Add this to your Info.plist:

  <key>NSLocationWhenInUseUsageDescription</key>
  <string>The reason this app requires location</string>
  

• Modify your Podfile to properly resolve scripts:

  - require Pod::Executable.execute_command('node', ['-p',
  - 'require.resolve(
  -  "react-native/scripts/react_native_pods.rb",
  -   {paths: [process.argv[1]]},
  - )', __dir__]).strip
  
  + def node_require(script)
  +   require Pod::Executable.execute_command('node', ['-p', "'require.resolve(#{script}, {paths: [process.argv[1]]})'", __dir__]).strip
  + end
  + node_require('react-native/scripts/react_native_pods.rb')
  + node_require('react-native-permissions/scripts/setup.rb')
    platform :ios, 'min_ios_version_supported'
    prepare_react_native_project!
  
  + setup_permissions(['LocationWhenInUse'])
  

Configuring Android Permissions

Ensure your AndroidManifest.xml includes the necessary permissions:

 <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
 <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

Contact Details

If you have any further questions please do not hesitate to contact our friendly team at;

developers@landmarksid.com