​

Troubleshooting

​

App Crashes in Production

​

Symptom

​

Solution

1. Using public key (pub_*), not SDK key?
2. AsyncStorage installed?
3. Built with a production build locally?

# Test with production build
eas build --platform ios --profile preview

​

AsyncStorage Not Found

​

Symptom

Error: @RNC/AsyncStorage: NativeModule: AsyncStorage is null

​

Solution

npx expo install @react-native-async-storage/async-storage

npm install @react-native-async-storage/async-storage
cd ios && pod install

​

Flags Not Loading

​

Symptom

​

Solution

const { error } = useFlags()
console.log('Error:', error)  // Check what error is

// Test network connectivity
fetch('https://superflag.sh/api/v1/public-config', {
  headers: {
    Authorization: `Bearer ${process.env.EXPO_PUBLIC_SUPERFLAG_CLIENT_KEY}`
  }
})
  .then(res => console.log('Status:', res.status))
  .catch(err => console.error('Network error:', err))

# ✅ Correct
EXPO_PUBLIC_SUPERFLAG_CLIENT_KEY=pub_...

# ❌ Wrong
SUPERFLAG_CLIENT_KEY=pub_...

npx expo start --clear

​

Rate Limited

​

Symptom

​

Solution

1. Increase cache TTL to reduce requests:
   Copy

   <SuperflagProvider ttlSeconds={300}> {/* 5 minutes */}
   
2. Upgrade your plan in the dashboard
3. Check for request loops:
   Copy

   // ❌ Don't do this - infinite loop
   useEffect(() => {
     client.refetch()  // Called on every render
   })
   
   // ✅ Do this - call only when needed
   const handleRefresh = () => {
     client.refetch()
   }
   

​

Slow Initial Load

​

Symptom

​

Solution

1. Show cached content while loading:
   Copy

   const { ready } = useFlags()
   const feature = useFlag('feature', false)
   
   // Don't wait for ready - use cached/fallback values immediately
   return <View>{feature && <Feature />}</View>
   
2. Preload flags before mounting:
   Copy

   // app/_layout.tsx
   import { useFlags } from '@superflag-sh/react-native'
   import { SplashScreen } from 'expo-splash-screen'
   
   SplashScreen.preventAutoHideAsync()
   
   export default function Layout() {
     const { ready } = useFlags()
   
     useEffect(() => {
       if (ready) {
         SplashScreen.hideAsync()
       }
     }, [ready])
   
     return <Slot />
   }
   

​

TypeScript Errors

​

Symptom

​

Solution

1. Ensure you’re on TypeScript 5.0+:
   Copy

   npm list typescript
   
2. Add to tsconfig.json:
   Copy

   {
     "compilerOptions": {
       "moduleResolution": "bundler",
       "skipLibCheck": true
     }
   }
   
3. Restart TypeScript server in VS Code:
   • Cmd+Shift+P → “TypeScript: Restart TS Server”

​

Cache Not Persisting

​

Symptom

​

Solution

import AsyncStorage from '@react-native-async-storage/async-storage'

// Test AsyncStorage
AsyncStorage.setItem('test', 'value')
  .then(() => AsyncStorage.getItem('test'))
  .then(value => console.log('AsyncStorage works:', value === 'value'))
  .catch(err => console.error('AsyncStorage error:', err))

1. Reinstall: npx expo install @react-native-async-storage/async-storage
2. For bare RN: cd ios && pod install
3. Clear build cache: npx expo start --clear

​

Expo Updates ErrorRecovery Crash

​

Symptom

​

Solution

​

Still Having Issues?

1. Check the example app in the GitHub repo
2. Enable debug logging:
   Copy

   const { status, error, version } = useFlags()
   console.log('Status:', status)
   console.log('Error:', error)
   console.log('Version:', version)
   
3. Test with a minimal reproduction:
   Copy

   import { SuperflagProvider, useFlag } from '@superflag-sh/react-native'
   
   export default function App() {
     return (
       <SuperflagProvider clientKey="pub_...">
         <Test />
       </SuperflagProvider>
     )
   }
   
   function Test() {
     const flag = useFlag('test', false)
     return <Text>{String(flag)}</Text>
   }
   

​

Next Steps