Invalid hook call in StatsigProvider

[M1ST4KE]

Hi! We want to use your tool in our app, but we have a problem with invalid hook call error.

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

This error is located at:
    in StatsigProvider
    in StatsigProvider (created by App)
    in CartReceiptContextProvider (created by ContextsContainer)
    in CartContextProvider (created by ContextsContainer)
    in GroupOrderContextProvider (created by ContextsContainer)
    in CurrentLocationContextProvider (created by ContextsContainer)
    in StoresContextProvider (created by ContextsContainer)
    in LocationContextProvider (created by ContextsContainer)
    in ContextsContainer (created by App)
    in PaymentMethodContextProvider (created by App)
    in StripeProvider (created by App)
    in AuthContainer (created by App)
    in ApolloProvider (created by ApolloWrapper)
    in ApolloWrapper (created by App)
    in AuthContextProvider (created by App)
    in EnsureSingleNavigator
    in BaseNavigationContainer
    in ThemeProvider
    in NavigationContainerInner (created by App)
    in AnalyticsProvider (created by App)
    in CookieContextProvider (created by App)
    in ActivityIndicatorOverlayContextProvider (created by App)
    in ThemeProvider (created by Provider)
    in RCTView (created by View)
    in View (created by Portal.Host)
    in Portal.Host (created by Provider)
    in Provider (created by App)
    in RNCSafeAreaProvider (created by SafeAreaProvider)
    in SafeAreaProvider (created by App)
    in Wrap (created by AnimatedComponent(Wrap))
    in AnimatedComponent(Wrap)
    in Unknown (created by GestureDetector)
    in GestureDetector (created by HideKeyboard)
    in HideKeyboard (created by App)
    in RCTView (created by View)
    in View (created by GestureHandlerRootView)
    in GestureHandlerRootView (created by App)
    in App (created by ExpoRoot)
    in ExpoRoot
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in main(RootComponent)

(to be precise it occurs in statsig-react-native-expo/node_modules/statsig-react/dist/StatsigProvider.js:41:14) Our app is based on expo with dev-client and looks that way:

import { StatsigProvider } from "statsig-react-native-expo";
[...]

function App() {
  return (
    <StatsigProvider
         sdkKey={CLIENT_SDK_KEY_ENV}
         user={{
            userID: "test",
          }}
    >
      <NativeStackNavigator />
    </StatsigProvider>
  );
}

where <NativeStackNavigator /> is a component that wraps native stack from react-navigation.

The dependencies we use:

"@react-navigation/native-stack": "^6.6.2",
"expo": "^46.0.0",
"expo-dev-client": "~1.3.0",
"react": "18.0.0",
"react-native": "0.69.6",
"statsig-react-native-expo": "^4.5.0",

This problem looks similar to that one, but the versions of packages are significantly different.

[tore-statsig]

Ah I think we updated the statsig-react-native package with a fix for this, but perhaps that did not yet get published in the statsig-react-native-expo package. Looking into this now

[tore-statsig]

Just published statsig-react-native-expo@4.6.0, give that a shot https://www.npmjs.com/package/statsig-react-native-expo/v/4.6.0

[M1ST4KE]

Great! Thanks, it solved the issue 💪