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:
- Installing the LANDMARKSID SDK
- Configuring the Android App
- Configuring the iOS App
- 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 yourgradle.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 extendLandmarksIDActivity
:-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 IDsetCustomerId
: A function that takes a string and sets the customer IDsendCustomFloat
: A function that takes a string (key) and a number (value) and sends custom data to the SDKsendCustomString
: A function that takes a string (key) and a string (value) and sends custom data to the SDKsendCustomInteger
: 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;