skip to Main Content

I started learning about how to create our own npm package and i created one. Now in this package, i want to create a dialog box for react native apps using typescript. Here are my files;

Package.json

{
  "name": "rn-dialog",
  "version": "1.0.0",
  "description": "This is a simple dialog box package for react native app",
  "main": "lib/index.js",
  "types": "lib/index.d.ts",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "build": "tsc"
  },
  "keywords": [
    "react-native",
    "react-native-dialog",
    "rn-dialog",
    "rn-dialog-box",
    "react",
    "react-native-dialog-box",
    "popup"
  ],
  "author": "Irfanwani <[email protected]>",
  "license": "ISC",
  "files": [
    "lib"
  ],
  "peerDependencies": {
    "react": ">=18.0.0",
    "react-native": ">=0.69.6"
  },
  "devDependencies": {
    "@types/react": "^18.0.21",
    "@types/react-native": "^0.70.4",
    "typescript": "^4.8.4"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "jsx": "react-native",
    "lib": ["dom", "ESNext"],
    "declaration": true,
    "sourceMap": true,
    "outDir": "./lib",
    "removeComments": true,
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "strictPropertyInitialization": true,
    "noImplicitThis": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "esModuleInterop": true,
  },
  "exclude": ["node_modules"],
  "include": ["./src/**/*.tsx", "./src/**/*.ts"]
}

index.tsx (inside the src folder)

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

const Dialog = () => {
  return (
    <View>
      <Text>This is from Dialog</Text>
      <Text>Hope it works, inshaallah!!!</Text>
    </View>
  );
};

export default Dialog;

As you can see my devDependencies to build this component and after installing them, i also get react and react native installed with latest versions.

So when i try to pull this package locally into my project (expo project), it gives an error;

React Native version mismatch.

JavaScript version: 0.70.2 Native version: 0.69.0

I tried to run npm install –production on my package but it didn’t work.

Any help will be appretiated!

2

Answers


  1. Chosen as BEST ANSWER

    After searching a lot, i came across this answer and this helped.

    We only need a package called install-local which installs local packages as other remote packages.


  2. You may want to change your devDependencies to:

    "devDependencies": {
      "@types/react": "^18.0.0",
      "@types/react-native": "^0.69",
      "typescript": "^4.8.4"
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search