How to manage dependencies when we are writing and testing custom package locally which uses another third party package

React Native
1

hi,
first of all big thanks to mosh, i took a react native course and it helped me at my work.

i am writing custom react native package, for now to keep things simple i have just created a ‘rn-timer’ package. which needs another package ‘react-native-web’ to run.

i have use npm link to link custom package with demo app.

I am facing crazy error since last 3 days, running out of ideas, don’t know what to do.

if i add react, react-native, react-native-webview as a dependency in demo app and as a peer dependency in library code. its throwing error like:

no 'react' module found in library code.
no 'react-native' module found in library code.

and to fix above error, if i add react, react-native, react-native-webview as a devdependency in library code its throwing error like:

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

how can i fix this error in order to link and test package locally.

demo app package.json looks like:

{
  "name": "demoapp2",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "react": "18.1.0",
    "react-native": "0.70.1",
    "react-native-webview": "^11.23.1",
    "rn-timer": "file:../rn-timer"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/preset-env": "^7.19.3",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "babel-jest": "^26.6.3",
    "eslint": "^7.32.0",
    "jest": "^26.6.3",
    "metro-react-native-babel-preset": "^0.72.1",
    "react-test-renderer": "18.1.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

and library package.json looks like:

{
  "name": "rn-timer",
  "version": "1.0.0",
  "description": "this is my timer component",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "peerDependencies": {
    "react": "*",
    "react-native": "*",
    "react-native-webview": "*"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/preset-env": "^7.19.3",
    "@babel/runtime": "^7.12.5",
    "react": "^18.2.0",
    "react-native": "^0.70.1",
    "react-native-webview": "^11.23.1"
  },
  "keywords": [
    "timer",
    "countdown"
  ],
  "author": "shivang",
  "license": "ISC"
}

index.js from library looks like:

export { default as CountdownTimer } from "./CountdownTimer";

CountdownTimer.js looks like:

import React from "react";
import { StyleSheet, View, Text } from "react-native";
import WebView from "react-native-webview";

function CountdownTimer(props) {
  return (
    <WebView
      style={styles.container}
      source={{ uri: "https://www.google.com" }}
    />
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "red",
  },
});

export default CountdownTimer;

how can i fix above errors.
Thank you.