React Native SDK

The @flagify/react package works in React Native and Expo with zero additional setup. No separate package, no polyfills — the same SDK you use on the web works on mobile.

Requirements

Getting started with Expo

1. Create a new project

npx create-expo-app@latest my-app

cd my-app

2. Install the SDK

npx expo install @flagify/react

3. Add the provider

Wrap your app with FlagifyProvider in your root layout. With Expo Router, this is app/_layout.tsx:

import { Stack } from 'expo-router';
import { FlagifyProvider } from '@flagify/react';

export default function RootLayout() {
  return (
    <FlagifyProvider
      projectKey="my-project"
      publicKey="pk_dev_abc123_xxxxxxxx"
      options={{ realtime: true }}
    >
      <Stack />
    </FlagifyProvider>
  );
}

4. Use hooks in any screen

import { View, Text } from 'react-native';
import { useFlag } from '@flagify/react';

export default function HomeScreen() {
  const showNewOnboarding = useFlag('new-onboarding');

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      {showNewOnboarding
        ? <Text>Welcome to the new experience!</Text>
        : <Text>Welcome back!</Text>
      }
    </View>
  );
}

Getting started with bare React Native

npm install @flagify/react

Wrap your root App.tsx with the provider:

import React from 'react';
import { FlagifyProvider } from '@flagify/react';
import { HomeScreen } from './screens/HomeScreen';

export default function App() {
  return (
    <FlagifyProvider
      projectKey="my-project"
      publicKey="pk_dev_abc123_xxxxxxxx"
      options={{ realtime: true }}
    >
      <HomeScreen />
    </FlagifyProvider>
  );
}

Then use hooks in any component, exactly like the Expo example above.

Full example: feature-gated screen

import { View, Text, ActivityIndicator, StyleSheet } from 'react-native';
import { useFlag, useIsReady, useVariant } from '@flagify/react';

export default function ProfileScreen() {
  const isReady = useIsReady();
  const showPremiumBadge = useFlag('premium-badge');
  const layout = useVariant('profile-layout', 'classic');

  if (!isReady) {
    return (
      <View style={styles.center}>
        <ActivityIndicator size="large" />
      </View>
    );
  }

  return (
    <View style={styles.container}>
      {showPremiumBadge && <Text style={styles.badge}>Premium</Text>}
      {layout === 'modern'
        ? <ModernProfile />
        : <ClassicProfile />
      }
    </View>
  );
}

const styles = StyleSheet.create({
  center: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  container: { flex: 1, padding: 16 },
  badge: { color: '#0D80F9', fontWeight: 'bold', fontSize: 12 },
});

Real-time updates

SSE streaming works the same way in React Native as it does on the web. The SDK uses fetch streaming internally (not EventSource), which is natively supported in React Native 0.64+.

Set realtime: true on the provider and all hooks will automatically re-render when flags change.

Hooks reference

All hooks from @flagify/react work identically in React Native:

For detailed API documentation, see the React SDK reference.