React Native SDK Installation

To install the SDK, run the following command:

npm

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

yarn

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

2. 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.

3. 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

4. Import the @react-native-async-storage/async-storage package somewhere in your code (e.g. in the App.jsx file). (see example below)
5. Import the react-native-get-random-values package somewhere in your code (e.g. in the App.jsx file). (see example below)
6. 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 { withDVCProvider } from '@devcycle/react-native-client-sdk'

global.DeviceInfo = DeviceInfo

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

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

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 { withDVCProvider } 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 withDVCProvider({ sdkKey: '<DEVCYCLE_CLIENT_SDK_KEY>' })(App)