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.
First, install the entry script with npm
, yarn
, or pnpm
:
yarn add @local-logic/sdks-react-native
npm install @local-logic/sdks-react-native
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
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"};...<LLSDKsapiKey={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.
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. |
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.