React Native SDK Component

Table of contents

Getting Started
- Installation
  - Install React Native Webview dependency
- Usage
Options
- Appearance
- TypeScript

New

Table of contents

Getting Started
- Installation
  - Install React Native Webview dependency
- Usage
Options
- Appearance
- TypeScript

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.

Getting Started

Installation

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.

Expo

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

Usage

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"
};
...
<LLSDKs
  apiKey={LL_API_KEY}
  sdkType="local-content"
  options={options}
  appearanceOptions={{
    locale: "en",
    appearance: {
      theme: "day",
      variables: cssVariables,
    },
  }}
  renderOptions={{ lazy: false }}
/>

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

Options

Name	Required	Type	Default	Description
`apiKey`	`true`			ApiKey required for making requests to the Local Logic API.
`sdkType`	`true`	`"local-content" \\| "demographics"`		The SDK you would like to create
`options`	`true`	`object`		Options required for the specified `sdkType`. Options for our SDKs are detailed here.
`appearanceOptions`	`true`	`object`		Appearance Options required for the specified `sdkType`. Options for each SDK are detailed here.
`renderOptions.lazy`	`false`	`bool`	`true`	If `true`, the SDK will only load content when it scrolls into the viewport.
`options.lat`	`true`	`number`		Initial viewport latitude. A decimal number between -90 and 90.
`options.lng`	`true`	`number`		Initial 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 .

Appearance

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

TypeScript

Local Logic SDKs JS comes packaged with TypeScript declarations.