I'm working on creating a yarn workspace to share code between React and React Native (upcoming blog post once it's completely done!).

The most important part for us is sharing business logic between both platforms. In this case we are using react-query for network requests.

We've created a "Render prop" component for that

import { useAllDevices } from "../../queries/devices";

export interface DeviceListProps {
    devices: any[];
    isLoading: boolean,
    onItemClick?: () => void;
}

export interface DeviceItemListProps {
    name: string;
    onItemClick?: () => void;
}

export const DeviceListContainer = ({ render }: { render: any }) => {
    const { data, isLoading } = useAllDevices();
    return (
        <>
            {render({ devices: data?.devices, isLoading })}
        </>
    )
}

where useAllDevices is something like this:

export const useAllDevices = () => useQuery('useAllDevices', async () => {
    const devicesResponse = await get('/todos');
    return {
        devices: devicesResponse.data,
    };
});

In web, it works like a charm, but I'm getting an error for mobile app. It seems like the problem is with react-query itself because once I put this:

const queryClient = new QueryClient();

const App = () => {
  const isDarkMode = false;

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

  return (
    <QueryClientProvider client={queryClient}>
      <ThemeProvider theme={THEME}>
        <SafeAreaView style={backgroundStyle}>
          <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
          <ScrollView
            contentInsetAdjustmentBehavior="automatic"
            style={backgroundStyle}>
            <Header />
            <Button styleType="primary">hey</Button>
          </ScrollView>
        </SafeAreaView>
      </ThemeProvider>
    </QueryClientProvider>
  );
};

I get this error

It is working properly and with no problems for React web version

my package.json on the App module is this

{
  "name": "@sharecode/app",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest --updateSnapshot",
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
  },
  "dependencies": {
    "react": "17.0.2",
    "react-native": "0.67.3",
    "react-native-gesture-handler": "^2.3.0",
    "styled-components": "^5.3.3"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "@sharecode/common": "1.0.0",
    "@testing-library/jest-native": "^4.0.4",
    "@testing-library/react-native": "^9.0.0",
    "@types/jest": "^27.4.1",
    "@types/react-native": "^0.66.15",
    "@types/react-test-renderer": "^17.0.1",
    "@types/styled-components-react-native": "^5.1.3",
    "@typescript-eslint/eslint-plugin": "^5.7.0",
    "@typescript-eslint/parser": "^5.7.0",
    "babel-jest": "^26.6.3",
    "eslint": "^7.14.0",
    "get-yarn-workspaces": "^1.0.2",
    "jest": "^26.6.3",
    "metro-config": "^0.56.0",
    "metro-react-native-babel-preset": "^0.66.2",
    "nock": "^13.2.4",
    "react-test-renderer": "17.0.2",
    "ts-jest": "^27.1.3",
    "typescript": "^4.4.4"
  },
  "workspaces": {
    "nohoist": [
      "react-native",
      "react-native/**",
      "react",
      "react/**",
      "react-query",
      "react-query/**"
    ]
  },
  "resolutions": {
    "@types/react": "^17"
  },
  "jest": {
    "preset": "react-native",
    "setupFilesAfterEnv": [
      "@testing-library/jest-native/extend-expect"
    ],
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node"
    ]
  }
}

Main package

{
  "name": "@sharecode/common",
  "version": "1.0.0",
  "main": "index.ts",
  "license": "MIT",
  "dependencies": {
    "axios": "^0.26.0",
    "react-query": "^3.34.16",
    "styled-components": "^5.3.3"
  },
  "devDependencies": {
    "@types/styled-components": "^5.1.24"
  }
}

And web package (working perfectly)

{
  "name": "@sharecode/web",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^12.1.3",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.4.1",
    "@types/node": "^16.11.26",
    "@types/react": "^17.0.39",
    "@types/react-dom": "^17.0.13",
    "react": "17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "^5.0.0",
    "typescript": "^4.6.2",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "eslint-config-react-app": "^7.0.0",
    "react-app-rewired": "^2.2.1"
  }
}

The error seems to be pretty straightforward but I cannot see what's going on

 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 QueryClientProvider (at App.tsx:31)
    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 NuoDoor(RootComponent) (at renderApplication.js:60)
✨  Done in 318.43s.

Also, here is the result of `yarn why react``

javiermanzano@Javiers-MBP app % yarn why react
yarn why v1.22.17
[1/4] 🤔  Why do we have the module "react"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "@sharecode/app#react@17.0.2"
info Reasons this module exists
   - "_project_#@sharecode#app" depends on it
   - in the nohoist list ["/_project_/@sharecode/app/react-native","/_project_/@sharecode/app/react-native/**","/_project_/@sharecode/app/react","/_project_/@sharecode/app/react/**","/_project_/@sharecode/app/react-query","/_project_/@sharecode/app/react-query/**"]
info Disk size without dependencies: "356KB"
info Disk size with unique dependencies: "404KB"
info Disk size with transitive dependencies: "432KB"
info Number of shared dependencies: 3
=> Found "react@17.0.2"
info Reasons this module exists
   - "_project_#@sharecode#web" depends on it
   - Hoisted from "_project_#@sharecode#web#react"
info Disk size without dependencies: "356KB"
info Disk size with unique dependencies: "404KB"
info Disk size with transitive dependencies: "432KB"
info Number of shared dependencies: 3
✨  Done in 1.17s.

I hope I explained the problem! Any help is appreciated :)

Thank you!