Skip to main content

React Native SDK Installation

React-Native package version GitHub

To get started, install the React Native SDK. For React Native Expo, see the Expo SDK Installation guide.

Installation

The command to install the React Native SDK is:

npm

npm install --save @devcycle/react-native-client-sdk

yarn

yarn add @devcycle/react-native-client-sdk

Install SDK Dependencies

Install the SDK dependencies, run the following command

npm

npm install --save @react-native-async-storage/async-storage react-native-get-random-values react-native-device-info

yarn

yarn add @react-native-async-storage/async-storage react-native-get-random-values react-native-device-info

Install Pods

Add the following packages that are required for React Native functionality as dependencies of your project:

npx pod-install

The @react-native-async-storage/async-storage package provides the ability to leverage on Device Storage that is used for caching by the SDK. The react-native-get-random-values package provides a polyfill for cryptographic functionality used to generate random IDs. The react-native-device-info package provides information about the current device running the SDK, which is required to correctly apply targeting rules.

Import SDK Dependencies

  1. Import the @react-native-async-storage/async-storage package somewhere in your code (e.g. in the App.jsx file). (see example below)
  2. Import the react-native-get-random-values package somewhere in your code (e.g. in the App.jsx file). (see example below)
  3. Import the react-native-device-info package and set global.DeviceInfo = DeviceInfo. (see example below)

Example of the above steps:

import React from 'react'
import 'react-native-get-random-values'
import DeviceInfo from 'react-native-device-info'
import '@react-native-async-storage/async-storage'
import { withDevCycleProvider } from '@devcycle/react-native-client-sdk'

global.DeviceInfo = DeviceInfo

Wrap Application in HOC

Wrap your application component tree in either the withDevCycleProvider or asyncWithDVCProvider higher-order component (HOC), as explained in the Getting Started section.

export default withDevCycleProvider({ sdkKey: '<DEVCYCLE_CLIENT_SDK_KEY>' })(
App,
)

Example

A complete working example of an App.jsx file is below:

import React from 'react'
import { View, Text } from 'react-native'

import 'react-native-get-random-values'
import DeviceInfo from 'react-native-device-info'
import '@react-native-async-storage/async-storage'
import { withDevCycleProvider } from '@devcycle/react-native-client-sdk'

global.DeviceInfo = DeviceInfo
function App() {
return (
<View
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}}
>
<Text>My React App</Text>
</View>
)
}

export default withDevCycleProvider({ sdkKey: '<DEVCYCLE_CLIENT_SDK_KEY>' })(
App,
)