React Native SDK Installation
To install the SDK, run the following command:
- npm
- yarn
npm install --save @devcycle/react-native-client-sdk
yarn add @devcycle/react-native-client-sdk
- 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.
- Install the SDK dependencies, run the following command
- npm
- yarn
npm install --save @react-native-async-storage/async-storage react-native-get-random-values react-native-device-info
yarn add @react-native-async-storage/async-storage react-native-get-random-values react-native-device-info
- Import the
@react-native-async-storage/async-storage
package somewhere in your code (e.g. in theApp.jsx
file). (see example below) - Import the
react-native-get-random-values
package somewhere in your code (e.g. in theApp.jsx
file). (see example below) - Import the
react-native-device-info
package and setglobal.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
- Wrap your application component tree in either the
withDVCProvider
orasyncWithDVCProvider
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)