Skip to main content

React Native SDK Installation

Npm package version GitHub

To install the SDK, run the following command:

  npm install --save @devcycle/react-native-client-sdk 
  1. 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.

  1. Install the SDK dependencies, run the following command
  npm install --save @react-native-async-storage/async-storage react-native-get-random-values react-native-device-info
  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 { withDVCProvider } from '@devcycle/react-native-client-sdk'

global.DeviceInfo = DeviceInfo
  1. 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)