enough-chef-62465
10/24/2023, 5:09 AMsubscribeToChanges
.
• In the example it isn't used: https://github.com/growthbook/examples/blob/main/react-native-cli/App.tsx
• And when I set it up https://docs.growthbook.io/lib/react#streaming-updates it doesn't appear to work (updating the toggle in GrowthBook doesn't update the app)
• I am using a vanilla RN app running on the iOS simulator
Does subscribeToChanges
work for React Native?fresh-football-47124
enough-chef-62465
10/24/2023, 9:28 AMconst 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,
});
},
});
This is what I have - it loads the value in the application but it does not appear to open a connection to subscribe. Is there a debug log I can look at?fresh-football-47124
enough-chef-62465
10/26/2023, 4:06 AMimport {
GrowthBook,
GrowthBookProvider,
useFeatureIsOn,
} from '@growthbook/growthbook-react';
I also load in the feature definitions https://github.com/growthbook/examples/blob/main/react-native-cli/App.tsx#L57App.tsx
file below.
const enabled = useFeatureIsOn('show-the-button');
doesn't load
isEnabled
works only after loading the JSON URL where it's set
Neither update automatically when I toggle on the growthbook website.
/**
* 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;
fresh-football-47124
happy-autumn-40938
10/30/2023, 4:30 PM