React Native SDK

Featurevisor SDK can be used with React Native for evaluating feature flags when building iOS and Android applications.

Installation#

You can use the same Featurevisor React SDK in your React Native app. Just install it as a regular dependency:

$ npm install @featurevisor/react @featurevisor/sdk

See @featurevisor/react API docs here.

Setting up the provider#

Create one Featurevisor instance and make it available through FeaturevisorProvider. This example fetches a datafile when the root component mounts:

import { useEffect, useState } from 'react'
import { FeaturevisorProvider } from '@featurevisor/react'
import { createFeaturevisor } from '@featurevisor/sdk'
const DATAFILE_URL = 'https://cdn.yoursite.com/datafile.json'
const f = createFeaturevisor({
  context: { userId: '123' },
})
export default function Root() {
  const [ready, setReady] = useState(false)
  useEffect(() => {
    let active = true
    fetch(DATAFILE_URL)
      .then((response) => {
        if (!response.ok) {
          throw new Error(`Could not fetch datafile: HTTP ${response.status}`)
        }
        return response.json()
      })
      .then((datafile) => {
        if (active) {
          f.setDatafile(datafile, true)
        }
      })
      .catch((error) => {
        console.error('Could not load Featurevisor datafile:', error)
      })
      .finally(() => {
        if (active) {
          setReady(true)
        }
      })
    return () => {
      active = false
    }
  }, [])
  if (!ready) {
    return null
  }
  return (
    <FeaturevisorProvider instance={f}>
      <App />
    </FeaturevisorProvider>
  )
}

For an Expo Router application, this provider can live in app/_layout.tsx.

Evaluating a flag#

import { Text } from 'react-native'
import { useFlag } from '@featurevisor/react'
export default function MyComponent() {
  const featureKey = 'my_feature'
  const context = {
    // ...additional context
  }
  const isEnabled = useFlag(featureKey, context)
  return <Text>Feature is {isEnabled ? 'enabled' : 'disabled'}</Text>
}

Example repository#

You can find a fully functioning example app built with React Native and Featurevisor SDK here: https://github.com/featurevisor/featurevisor-example-react-native.