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
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.You may want to change your devDependencies to: