Skip to content

React Native SDK Component


The Local Logic React Native SDK component allows you to easily add one of our SDKs to your native Android and iOS apps using React Native. The React Native SDK component currently supports the Local Content and Demographics SDKs.

Screenshot of new Local Content SDK on Mobile device

Getting Started


First, install the entry script with npm, yarn, or pnpm:

yarn add @local-logic/sdks-react-native
npm install @local-logic/sdks-react-native

Install React Native Webview dependency

React Native Webview is used to port Local Logic SDKs to React Native.


Install supported react-native-webview version for Expo applications using Expo CLI.

npx expo install react-native-webview

React Native CLI

Install react-native-webview using your project's package manager:

yarn add react-native-webview
npm install react-native-webview

If using CocoaPods, in the ios/ or macos/ directory run:

pod install


The React Native component accepts the same options as our web SDKs via it's options, appearanceOptions, and renderOptions props.

import LLSDKs from "@local-logic/sdks-react-native";
const options = {
lat: 45.528126,
lng: -73.598104,
marker: {
lat: 45.528126,
lng: -73.598104,
const cssVariables = {
"--ll-color-primary": "#254899",
"--ll-color-primary-variant1": "#254899",
"--ll-border-radius-small": "8px",
"--ll-border-radius-medium": "16px",
"--ll-font-family": "Avenir, sans-serif"
locale: "en",
appearance: {
theme: "day",
variables: cssVariables,
renderOptions={{ lazy: false }}

Make sure to replace LL_API_KEY with your Local Logic API Key.


apiKeytrueApiKey required for making requests to the Local Logic API.
sdkTypetrue"local-content" \| "demographics"The SDK you would like to create
optionstrueobjectOptions required for the specified sdkType. Options for our SDKs are detailed here.
appearanceOptionstrueobjectAppearance Options required for the specified sdkType. Options for each SDK are detailed here.
renderOptions.lazyfalsebooltrueIf true, the SDK will only load content when it scrolls into the viewport.
options.lattruenumberInitial viewport latitude. A decimal number between -90 and 90.
options.lngtruenumberInitial viewport longitude. A decimal number between -180 and 180.
There is a known issue where the Local Content map does not render on emulated Android devices running Android OS 12 or lower. The work around for getting the map to display on emulated devices with older OS versions is to turn on hardware acceleration. This can be done by going to the emulated device's Extended Controls section > Settings > Advanced > Switch OpenGL ES renderer to SwiftShader and then restart the emulator .


The React Native SDK component supports the same visual customization that Local Logic SDKs support via the appearanceOptions prop.


Local Logic SDKs JS comes packaged with TypeScript declarations.

© Local Logic 2024