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 react-native-sse

yarn​

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

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. The react-native-sse package provides SSE connection functionality to enable real-time updates.

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,
)