Feat/Add a React Native LLaMA demo app for iOS

Differential Revision: D66644092

Pull Request resolved: #7134

Author: hietalajulius

.lintrunner.toml

@@ -74,6 +74,7 @@ exclude_patterns = [
     # NB: Objective-C is not supported
     'examples/apple/**',
     'examples/demo-apps/apple_ios/**',
+    'examples/demo-apps/react-native/rnllama/ios/**',
     # File contains @generated
     'extension/llm/custom_ops/spinquant/fast_hadamard_transform_special.h',
     'extension/llm/custom_ops/spinquant/test/fast_hadamard_transform_special_unstrided_cpu.h',

examples/demo-apps/react-native/rnllama/.gitignore

@@ -0,0 +1,38 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+expo-env.d.ts
+
+# Native
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo
+
+app-example

examples/demo-apps/react-native/rnllama/README.md

@@ -0,0 +1,43 @@
+# React Native Llama
+
+<p align="center">
+  <img src="./assets/images/rnllama.png" width="200" alt="rnllama Logo">
+</p>
+
+A React Native mobile application for running LLaMA language models using ExecuTorch. This example is for iOS only for now.
+
+## Features
+
+- Run LLaMA models directly on device, build the UI using React Native
+- Tested using Llama 3.2 SpinQuant 1B on iPhone 12 Pro
+- The setup is heavily inspired by the [LLaMA iOS app example](https://github.com/pytorch/executorch/tree/main/examples/demo-apps/apple_ios/LLaMA)
+
+
+## Prerequisites
+
+- Node.js & npm
+- Xcode
+
+## Installation
+
+1. Clone the repository: `git clone [email protected]:pytorch/executorch.git`
+
+2. Navigate to the root of the repository: `cd executorch`
+
+3. Pull submodules: `git submodule sync && git submodule update --init`
+
+4. Install dependencies: `./install_requirements.sh --pybind xnnpack && ./examples/models/llama/install_requirements.sh`
+
+5. Follow the instructions in the [README](https://github.com/pytorch/executorch/blob/main/examples/models/llama/README.md#option-a-download-and-export-llama32-1b3b-model) to export a model as `.pte`
+
+6. Navigate to the example: `cd examples/demo-apps/react-native/rnllama`
+
+7. Install dependencies: `npm install && cd ios && pod install && cd ..`
+
+8. Run the app: `npx expo run:ios --device --configuration Release` and select a USB connected iOS device
+
+9. Find the device in finder, and place the exported `.pte` model and the downloaded tokenizer under the app
+
+10. Select the model and tokenizer in the app to start chatting:
+
+[![rnllama]](https://github.com/user-attachments/assets/b339f1ec-8b80-41f0-b3f6-ded6698ac926)

examples/demo-apps/react-native/rnllama/app.json

@@ -0,0 +1,43 @@
+{
+  "expo": {
+    "name": "rnllama",
+    "slug": "rnllama",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/images/rnllama.png",
+    "scheme": "myapp",
+    "userInterfaceStyle": "automatic",
+    "splash": {
+      "image": "./assets/images/rnllama.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "ios": {
+      "supportsTablet": true,
+      "bundleIdentifier": "com.hietalajulius.rnllama"
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/images/rnllama.png",
+        "backgroundColor": "#ffffff"
+      }
+    },
+    "web": {
+      "bundler": "metro",
+      "output": "static",
+      "favicon": "./assets/images/rnllama.png"
+    },
+    "plugins": [
+      "expo-router",
+      [
+        "expo-document-picker",
+        {
+          "iCloudContainerEnvironment": "Production"
+        }
+      ]
+    ],
+    "experiments": {
+      "typedRoutes": true
+    }
+  }
+}

examples/demo-apps/react-native/rnllama/app/_layout.tsx

@@ -0,0 +1,5 @@
+import { Stack } from "expo-router";
+
+export default function RootLayout() {
+  return <Stack screenOptions={{ headerShown: false }} />;
+}