Added NPM and PNPM installation in README.md (#1149)

## Description

Added NPM and PNPM installation in README.md with details+ summary tag.
Atleast new developers won't get scared if they are using npm and
suddenly need yarn

### Introduces a breaking change?

- [ ] Yes
- [x] No

### Type of change

- [ ] Bug fix (change which fixes an issue)
- [ ] New feature (change which adds functionality)
- [x] Documentation update (improves or adds clarity to existing
documentation)
- [ ] Other (chores, tests, code style improvements etc.)

### Tested on

- [ ] iOS
- [ ] Android

### Testing instructions

<!-- Provide step-by-step instructions on how to test your changes.
Include setup details if necessary. -->

### Screenshots

<!-- Add screenshots here, if applicable -->

### Related issues

<!-- Link related issues here using #issue-number -->

### Checklist

- [ ] I have performed a self-review of my code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have updated the documentation accordingly
- [ ] My changes generate no new warnings

### Additional notes

<!-- Include any additional information, assumptions, or context that
reviewers might need to understand this PR. -->

---------

Co-authored-by: Mateusz Słuszniak <mateusz.sluszniak@swmansion.com>

Author: I-am-Pritam-20

README.md

@@ -97,6 +97,8 @@ yarn add @dr.pogodin/react-native-fs @kesha-antonov/react-native-background-down
 yarn < ios | android >
 ```
 
+> npm and pnpm work too — use `npm install` or `pnpm add` for the packages, and `npm run <ios|android>` / `pnpm <ios|android>` for the run step.
+
 ### :two: Setup & Initialization
 
 Add this to your component file:

docs/docs/01-fundamentals/01-getting-started.md

@@ -38,45 +38,85 @@ For supported React Native and Expo versions, see the [Compatibility table](../0
 
 ## Installation
 
-Installation is pretty straightforward, use your package manager of choice to install the package and some peer dependencies required to streamline model downloads. If you want to implement your custom model fetching logic, see [this document](../08-resource-fetcher/02-custom-adapter.md).
+Installation takes two steps: install the core package, then install a resource fetcher adapter that matches your project type. If you want to implement your own model fetching logic instead, see [this document](../08-resource-fetcher/02-custom-adapter.md).
 
-<Tabs>
-  <TabItem value="npm" label="NPM">
+### 1. Install the core package
+
+<Tabs groupId="package-manager">
+  <TabItem value="npm" label="npm">
 
     ```bash
     npm install react-native-executorch
-    # For Expo projects, you need to install expo resource fetcher
-    npm install react-native-executorch-expo-resource-fetcher
-    npm install expo-file-system expo-asset
-    # For bare React Native projects, you need to install bare resource fetcher
-    npm install react-native-executorch-bare-resource-fetcher
-    npm install @dr.pogodin/react-native-fs @kesha-antonov/react-native-background-downloader
     ```
 
   </TabItem>
-  <TabItem value="pnpm" label="PNPM">
+  <TabItem value="pnpm" label="pnpm">
 
     ```bash
-    pnpm install react-native-executorch
-    # For Expo projects, you need to install expo resource fetcher
-    pnpm install react-native-executorch-expo-resource-fetcher
-    pnpm install expo-file-system expo-asset
-    # For bare React Native projects, you need to install bare resource fetcher
-    pnpm install react-native-executorch-bare-resource-fetcher
-    pnpm install @dr.pogodin/react-native-fs @kesha-antonov/react-native-background-downloader
+    pnpm add react-native-executorch
     ```
 
   </TabItem>
-  <TabItem value="yarn" label="YARN">
+  <TabItem value="yarn" label="yarn">
 
     ```bash
     yarn add react-native-executorch
-    # For Expo projects, you need to install expo resource fetcher
-    yarn add react-native-executorch-expo-resource-fetcher
-    yarn add expo-file-system expo-asset
-    # For bare React Native projects, you need to install bare resource fetcher
-    yarn add react-native-executorch-bare-resource-fetcher
-    yarn add @dr.pogodin/react-native-fs @kesha-antonov/react-native-background-downloader
+    ```
+
+  </TabItem>
+</Tabs>
+
+### 2. Install a resource fetcher
+
+Pick the adapter that matches your project. We recommend the Expo adapter when your app uses Expo; use the bare adapter for projects without Expo.
+
+#### Expo projects
+
+<Tabs groupId="package-manager">
+  <TabItem value="npm" label="npm">
+
+    ```bash
+    npm install react-native-executorch-expo-resource-fetcher expo-file-system expo-asset
+    ```
+
+  </TabItem>
+  <TabItem value="pnpm" label="pnpm">
+
+    ```bash
+    pnpm add react-native-executorch-expo-resource-fetcher expo-file-system expo-asset
+    ```
+
+  </TabItem>
+  <TabItem value="yarn" label="yarn">
+
+    ```bash
+    yarn add react-native-executorch-expo-resource-fetcher expo-file-system expo-asset
+    ```
+
+  </TabItem>
+</Tabs>
+
+#### Bare React Native projects
+
+<Tabs groupId="package-manager">
+  <TabItem value="npm" label="npm">
+
+    ```bash
+    npm install react-native-executorch-bare-resource-fetcher @dr.pogodin/react-native-fs @kesha-antonov/react-native-background-downloader
+    ```
+
+  </TabItem>
+  <TabItem value="pnpm" label="pnpm">
+
+    ```bash
+    pnpm add react-native-executorch-bare-resource-fetcher @dr.pogodin/react-native-fs @kesha-antonov/react-native-background-downloader
+    ```
+
+  </TabItem>
+  <TabItem value="yarn" label="yarn">
+
+    ```bash
+    yarn add react-native-executorch-bare-resource-fetcher @dr.pogodin/react-native-fs @kesha-antonov/react-native-background-downloader
     ```
 
   </TabItem>
@@ -120,9 +160,29 @@ Because we are using ExecuTorch under the hood, you won't be able to build iOS a
 
 Running the app with the library:
 
-```bash
-yarn <ios | android> -d
-```
+<Tabs groupId="package-manager">
+  <TabItem value="npm" label="npm">
+
+    ```bash
+    npm run <ios | android> -- -d
+    ```
+
+  </TabItem>
+  <TabItem value="pnpm" label="pnpm">
+
+    ```bash
+    pnpm <ios | android> -d
+    ```
+
+  </TabItem>
+  <TabItem value="yarn" label="yarn">
+
+    ```bash
+    yarn <ios | android> -d
+    ```
+
+  </TabItem>
+</Tabs>
 
 ## Supporting new models in React Native ExecuTorch
 

docs/docs/01-fundamentals/02-loading-models.md

@@ -2,6 +2,9 @@
 title: Loading Models
 ---
 
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
 There are three different methods available for loading model files, depending on their size and location.
 
 ## Prerequisites
@@ -10,10 +13,29 @@ In our library, you can use two different resource fetching mechanisms. One is i
 
 To use the Expo adapter, please add these libraries:
 
-```bash
-yarn add react-native-executorch-expo-resource-fetcher
-yarn add expo-file-system expo-asset
-```
+<Tabs groupId="package-manager">
+  <TabItem value="npm" label="npm">
+
+    ```bash
+    npm install react-native-executorch-expo-resource-fetcher expo-file-system expo-asset
+    ```
+
+  </TabItem>
+  <TabItem value="pnpm" label="pnpm">
+
+    ```bash
+    pnpm add react-native-executorch-expo-resource-fetcher expo-file-system expo-asset
+    ```
+
+  </TabItem>
+  <TabItem value="yarn" label="yarn">
+
+    ```bash
+    yarn add react-native-executorch-expo-resource-fetcher expo-file-system expo-asset
+    ```
+
+  </TabItem>
+</Tabs>
 
 and then add the following code in your React Native app:
 
@@ -28,10 +50,29 @@ initExecutorch({
 
 If you cannot use Expo in your project, proceed with the following steps:
 
-```bash
-yarn add react-native-executorch-bare-resource-fetcher
-yarn add @dr.pogodin/react-native-fs @kesha-antonov/react-native-background-downloader
-```
+<Tabs groupId="package-manager">
+  <TabItem value="npm" label="npm">
+
+    ```bash
+    npm install react-native-executorch-bare-resource-fetcher @dr.pogodin/react-native-fs @kesha-antonov/react-native-background-downloader
+    ```
+
+  </TabItem>
+  <TabItem value="pnpm" label="pnpm">
+
+    ```bash
+    pnpm add react-native-executorch-bare-resource-fetcher @dr.pogodin/react-native-fs @kesha-antonov/react-native-background-downloader
+    ```
+
+  </TabItem>
+  <TabItem value="yarn" label="yarn">
+
+    ```bash
+    yarn add react-native-executorch-bare-resource-fetcher @dr.pogodin/react-native-fs @kesha-antonov/react-native-background-downloader
+    ```
+
+  </TabItem>
+</Tabs>
 
 and
 

readmes/README_cn.md

@@ -93,6 +93,8 @@ yarn add @dr.pogodin/react-native-fs @kesha-antonov/react-native-background-down
 yarn < ios | android >
 ```
 
+> npm 和 pnpm 同样适用 — 使用 `npm install` 或 `pnpm add` 安装包，使用 `npm run <ios|android>` / `pnpm <ios|android>` 运行应用。
+
 ### :two: 设置和初始化
 
 将此添加到您的组件文件中：

readmes/README_es.md

@@ -93,6 +93,8 @@ yarn add @dr.pogodin/react-native-fs @kesha-antonov/react-native-background-down
 yarn < ios | android >
 ```
 
+> npm y pnpm también funcionan — usa `npm install` o `pnpm add` para los paquetes, y `npm run <ios|android>` / `pnpm <ios|android>` para el paso de ejecución.
+
 ### :two: Configuración e inicialización
 
 Agrega esto a tu archivo de componente:

readmes/README_fr.md

@@ -93,6 +93,8 @@ yarn add @dr.pogodin/react-native-fs @kesha-antonov/react-native-background-down
 yarn < ios | android >
 ```
 
+> npm et pnpm fonctionnent aussi — utilisez `npm install` ou `pnpm add` pour les packages, et `npm run <ios|android>` / `pnpm <ios|android>` pour l'étape d'exécution.
+
 ### :two: Configuration et Initialisation
 
 Ajoutez ceci à votre fichier de composant :

readmes/README_in.md

@@ -93,6 +93,8 @@ yarn add @dr.pogodin/react-native-fs @kesha-antonov/react-native-background-down
 yarn < ios | android >
 ```
 
+> npm और pnpm भी काम करते हैं — पैकेजों के लिए `npm install` या `pnpm add` का उपयोग करें, और रन स्टेप के लिए `npm run <ios|android>` / `pnpm <ios|android>` का उपयोग करें।
+
 ### :two: सेटअप और आरंभिककरण
 
 अपने घटक फाइल में यह जोड़ें:

readmes/README_pt.md

@@ -93,6 +93,8 @@ yarn add @dr.pogodin/react-native-fs @kesha-antonov/react-native-background-down
 yarn < ios | android >
 ```
 
+> npm e pnpm também funcionam — use `npm install` ou `pnpm add` para os pacotes, e `npm run <ios|android>` / `pnpm <ios|android>` para o passo de execução.
+
 ### :two: Configuração e Inicialização
 
 Adicione isso ao seu arquivo de componente: