How to find what packages will be updated in package.json file ?

There is an npm command called npm outdated, which will tell us what packages will be updated.

Before running npm update command which will help us to updated packages, it is always better to run npm outdated first. So it will give you you list of packages with current version, wanted version and latest version.

Whenever we run npm update all packages will be updated to wanted versions which are listed when we run npm update command.

For Example, If you want to update a lodash package to its latest version we need use the following command.

npm i lodash@latest

After completion of installation, run the following command to check which version is installed for lodash.

npm show lodash version

How to publish a package to npm ?

To publish a package to npm, we should follow the following steps.

STEP 1 : Make sure your project have package.json file something like this.

{
  "name": "your-package-name",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT"
}

STEP 2 : update your entry file with required functionality. Here entry file is index.js as we defined in package.json as “main”: “index.js”. Following is some example code.

// index.js
module.exports = function greeting(name) {
  return `Hello, ${name}!`;
};

STEP 3: signup to npm using https://www.npmjs.com/signup

STEP 4: Now login to npm using the following command in the terminal

npm login

STEP 5: publish the package using the following command. (Make sure package name is unique)

npm publish

Finally you are able use that package anywhere by just installing with the following command

npm i your-package-name

Showing Alert For Page Refresh , Closing tab or Window If Unsaved changes are there in the Form – ReactJS

If unsaved changes are there in the form, we will use the following code to show default alert message when user tries to reload or close the window or close the tab.

useEffect(() => {
  const handleBeforeUnload = (e: BeforeUnloadEvent) => {
    if (isFormChanged) {
      e.preventDefault();
      e.returnValue = '';
      return '';
    }
     return undefined;
  };

  window.addEventListener('beforeunload', handleBeforeUnload);

  return () => {
    window.removeEventListener('beforeunload', handleBeforeUnload);
  };
}, [isFormChanged]);

Error: [Reanimated] failed to create a worklet. – React Native

To fix this error, initially check your package.json file to find “react-native-reanimated”. if it is not installed, install it something like to “react-native-reanimated”: “^3.X.X”.

Now update your babel.config.js as follows

 module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: [
    'react-native-reanimated/plugin',
  ],
}

Now search for metro.config.js and update config as follows

const config = {
    resetCache: true
};

Now run the following command

npm start -- --reset-cache

Now it will work without that error.

Connect Android App to Real Device using Android Studio over Wi-Fi – React Native

If we are using Android Studio, it is very simple to connect to Real Device.

First we need to enable “Developer Options” in our Phone. We need to follow the following steps to enable Developer Options.

  • Go to Settings ==> About Phone
  • Navigate to Software information or Build number.
  • Tap Build Number 7 times. (This will enable Developer Mode)
  • Now search for Developer options in settings.
  • it should be turned on
  • Now turn on Wireless debugging.
  • Now we need to pair out phone with Android Studo.
  • tap Wireless debugging and click on Pair device with QR code.
  • In Android Studio, open Device Manager and click on Wi-Fi icon to pair devices using Wi-Fi. It will open QR code.
  • Now From your mobile Scan that QR code to connect your device.
  • Finally your phone will show up as connected in Android Studio.

Now run the App directly over Wi-Fi, by using the following command.

npx react-native run-android