Skip to main content

React Native SDK Getting Started

React-Native package version Expo package version GitHub

There are two ways to initialize the SDK:

  • Non-Blocking: This loads your application and makes a request to initialize the SDK in the background. Once this request is complete, your application will be ready to use the SDK.
  • Blocking: This allows you to delay the rendering of your application until the request to initialize the SDK is completed.

To use these providers, you must grab the SDK Key from the DevCycle Dashboard. You can optionally pass in a user object to the provider to initialize the SDK. If you do not pass in a user to the provider, it will create an anonymous user and initialize the SDK with it. You can then call the identifyUser method on the client once the user has been authenticated. See Identifying Users & Setting Properties for more details.


The withDevCycleProvider function initializes the React SDK and wraps your root component. This provider may cause your app to flicker when it is first rendered, as it is waiting for the SDK to initialize.

import { withDevCycleProvider } from '@devcycle/react-native-client-sdk'
export default withDevCycleProvider({ sdkKey: '<DEVCYCLE_CLIENT_SDK_KEY>' })(


The useIsDevCycleInitialized hook allows you to block rendering of your application until SDK initialization is complete. This ensures your app does not flicker due to value changes and enables you to control what you want displayed when initialization isn't finished yet.

import {
} from '@devcycle/react-native-client-sdk'
function App() {
const devcycleReady = useIsDevCycleInitialized()

if (!devcycleReady) return <LoadingState />
return <TheRestofYourApp />

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

Provider Config

The withDevCycleProvider function accepts a Provider Config object:

DevCycle ProviderConfig Typescript Schema

sdkKeyStringSDK key
userDevCycleUserDevCycleUser object
optionsDevCycleOptionsDevCycleOptions object

Initialization Options

The SDK exposes various initialization options which can be set by passing a DevCycleOptions object in the Provider Config:

DevCycleOptions Typescript Schema

DevCycle OptionTypeDescription
enableEdgeDBBooleanEnables the usage of EdgeDB for DevCycle that syncs User Data to DevCycle.
loggerDevCycleLoggerLogger override to replace default logger
logLevelDevCycleDefaultLogLevelSet log level of the default logger. Options are: debug, info, warn, error. Defaults to info.
eventFlushIntervalMSNumberControls the interval between flushing events to the DevCycle servers in milliseconds, defaults to 10 seconds.
flushEventQueueSizeNumberControls the maximum size the event queue can grow to until a flush is forced. Defaults to 100.
maxEventQueueSizeNumberControls the maximum size the event queue can grow to until events are dropped. Defaults to 1000.
apiProxyURLStringAllows the SDK to communicate with a proxy of DevCycle bucketing API / client SDK API.
configCacheTTLNumberThe maximum allowed age of a cached config in milliseconds, defaults to 7 days
disableConfigCacheBooleanDisable the use of cached configs
disableRealtimeUpdatesBooleanDisable Realtime Updates
disableAutomaticEventLoggingBooleanDisables logging of sdk generated events (e.g. variableEvaluated, variableDefaulted) to DevCycle.
disableCustomEventLoggingBooleanDisables logging of custom events, from track() method, and user data to DevCycle.