? Installing npm Packages in React Native

? Quick Overview

In React Native, external libraries and tools are added to your project using npm or yarn. These packages extend functionality such as navigation, animations, networking, device APIs, and UI components.

? Key Concepts

npm Node Package Manager used to install JavaScript libraries
node_modules Directory where packages are stored
package.json File that tracks dependencies
autolinking Automatic native module linking in modern React Native

? Syntax / Theory

React Native projects are JavaScript-based, so npm packages are installed using terminal commands. After installation, the library can be imported and used in your components.

? Code Example(s)

? View Code Example

// Install a package using npm
npm install axios

? View Code Example

// Importing the installed package in a React Native file
import axios from "axios";

? Live Output / Explanation

What Happens Internally?

The package is downloaded from the npm registry
It is added to node_modules
package.json is updated with the dependency
Native modules are automatically linked (RN 0.60+)

? Interactive / Visual Explanation

Use the simulator below to practice installing a package. Watch how the Terminal command updates the package.json file in real-time.

Instructions: Click in the terminal and type npm install axios or npm install moment and press Enter.

Terminal — bash

Welcome to MyProject!

Type a command to install a package...

? package.json

{
  "name": "MyReactNativeApp",
  "version": "1.0.0",
  "dependencies": {
    "react": "18.2.0",
    "react-native": "0.72.0"
  }
}

Think of npm packages as plug-and-play modules. Once installed, they behave like built-in tools that can be imported anywhere in your app.

? View Code Example

// Visualizing dependency usage in code flow
App.js → import package → use features → render output

? Use Cases

Installing navigation libraries like React Navigation
Using HTTP clients such as Axios or Fetch wrappers
Adding UI libraries and icon packs
Accessing device features like camera or storage

? Tips & Best Practices

Restart Metro bundler after installing new packages
Prefer well-maintained and popular libraries
Check React Native version compatibility
Use npm uninstall to remove unused packages

? Try It Yourself

Create a new React Native project
Install any npm package of your choice
Import it into a component
Use one feature from the package