null is not an object (evaluating 'dispatcher.useState') with RN 0.68.1

[mnecchi]

Steps to reproduce

1) create a bare RN app with npx react-native init DripsyTest 2) Install Dripsy npm install dripsy --save 3) npm start and npm run ios 4) Replace App.js code with:

import React from 'react';
import {DripsyProvider, makeTheme, View} from 'dripsy';

const theme = makeTheme({});
export default function App({Component, pageProps}) {
  return (
    <DripsyProvider theme={theme}>
      <View />
    </DripsyProvider>
  );
}

Expected result

App starting successfully

Actual result

 ERROR  Warning: 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.
DripsyProvider@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.DripsyTest:116768:30
App@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.DripsyTest:111689:25
RCTView
View
RCTView
View
AppContainer@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.DripsyTest:78446:36
DripsyTest(RootComponent)@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.DripsyTest:85130:28
 ERROR  Warning: 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.
DripsyProvider@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.DripsyTest:116768:30
App@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.DripsyTest:111689:25
RCTView
View
RCTView
View
AppContainer@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.DripsyTest:78446:36
DripsyTest(RootComponent)@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.DripsyTest:85130:28
 ERROR  TypeError: null is not an object (evaluating 'dispatcher.useState')

This error is located at:
    in DripsyProvider (at App.js:7)
    in App (at renderApplication.js:50)
    in RCTView (at View.js:32)
    in View (at AppContainer.js:92)
    in RCTView (at View.js:32)
    in View (at AppContainer.js:119)
    in AppContainer (at renderApplication.js:43)
    in DripsyTest(RootComponent) (at renderApplication.js:60)
 ERROR  TypeError: null is not an object (evaluating 'dispatcher.useState')

This error is located at:
    in DripsyProvider (at App.js:7)
    in App (at renderApplication.js:50)
    in RCTView (at View.js:32)
    in View (at AppContainer.js:92)
    in RCTView (at View.js:32)
    in View (at AppContainer.js:119)
    in AppContainer (at renderApplication.js:43)
    in DripsyTest(RootComponent) (at renderApplication.js:60)

[nandorojo]

Do you have multiple versions of React installed?

yarn why react

[mnecchi]

Do you have multiple versions of React installed?

yarn why react

Nope. Only RN 17.0.2.

As I wrote I've basically create a new bare project with the latest RN (0.68.1) and installed dripsy. Nothing else.

[nandorojo]

I see that you have Component and pageProps like a Next.js app. This is only for native though right?

[mnecchi]

I see that you have Component and pageProps like a Next.js app. This is only for native though right?

Yes, only native

[nandorojo]

what if you do expo init

[mnecchi]

I'm not using expo. It's a vanilla RN native project.

[t3chcrazy]

Facing the same issue with a fresh project having react-native version 0.68.2, did a little digging and @dripsy/core seems to have a node_modules folder with react 18.1.0 in it. Could that be the cause? I didn't face any issues with a react-native v0.66 project with the same dripsy version

[nandorojo]

i assume you’re using npm. try using legacy peer deps

[t3chcrazy]

This worked for me, thanks a lot!