App.tsx

const enabled = useFeatureIsOn('show-the-button');

isEnabled

/**
 * Sample React Native App
 * <https://github.com/facebook/react-native>
 *
 * @format
 */

import React, {useEffect, useState} from 'react';
import type {PropsWithChildren} from 'react';
import {
  GrowthBook,
  GrowthBookProvider,
  useFeatureIsOn,
} from '@growthbook/growthbook-react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from 'react-native';

const gb = new GrowthBook({
  apiHost: '<redacted>',
  clientKey: '<redacted>',
  // Enable easier debugging during development
  enableDevMode: true,
  // Update the instance in realtime as features change in GrowthBook
  subscribeToChanges: true,
  backgroundSync: true,
  // Only required for A/B testing
  // Called every time a user is put into an experiment
  trackingCallback: (experiment, result) => {
    console.log('Experiment Viewed', {
      experimentId: experiment.key,
      variationId: result.key,
    });
  },
});

import {
  Colors
} from 'react-native/Libraries/NewAppScreen';

type SectionProps = PropsWithChildren<{
  title: string;
}>;

function Section({children, title}: SectionProps): JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';

  return (
    <View style={styles.sectionContainer}>
      <Text
        style={[
          styles.sectionTitle,
          {
            color: isDarkMode ? Colors.white : Colors.black,
          },
        ]}>
        {title}
      </Text>
      <Text
        style={[
          styles.sectionDescription,
          {
            color: isDarkMode ? Colors.light : Colors.dark,
          },
        ]}>
        {children}
      </Text>
    </View>
  );
}

function App(): JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';
  const [isReady, setIsReady] = useState(false);
  const [isEnabled, setIsEnabled] = useState(false);

  useEffect(() => {
    setIsEnabled(gb.getFeatureValue('show-the-button', false));
  }, [isReady, setIsEnabled]);

  const enabled = useFeatureIsOn('show-the-button');

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  useEffect(() => {
    // Load feature definitions from GrowthBook API
    fetch(
      '<feature definition JSON URL>',
    )
      .then(res => res.json())
      .then(json => {
        gb.setFeatures(json.features);
      })
      .catch(e => console.error('Failed to fetch features', e))
      .finally(() => {
        setIsReady(true);
      });
  }, []);
  return (
    <GrowthBookProvider growthbook={gb}>
      <SafeAreaView style={backgroundStyle}>
        <StatusBar
          barStyle={isDarkMode ? 'light-content' : 'dark-content'}
          backgroundColor={backgroundStyle.backgroundColor}
        />

        <ScrollView
          contentInsetAdjustmentBehavior="automatic"
          style={backgroundStyle}>
          <View
            style={{
              backgroundColor: isDarkMode ? Colors.black : Colors.white,
            }}>
            <Section title="show-the-button with useFeatureIsOn">
              <Text>{enabled ? 'Yes' : 'No'}</Text>
            </Section>
            <Section title="show-the-button with getFeatureValue">
              <Text>{isEnabled ? 'Yes' : 'No'}</Text>
            </Section>
          </View>
        </ScrollView>
      </SafeAreaView>
    </GrowthBookProvider>
  );
}

const styles = StyleSheet.create({
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
  },
  highlight: {
    fontWeight: '700',
  },
});

export default App;