Skip to content

Commit effbfff

Browse files
rizalibnumsluszniakclaudeNorbertKlockiewicz
authored
feat: add bare React Native LLM chat example app (#763)
## Description Adds a new bare React Native example application demonstrating LLM chat functionality using Executorch. This example provides a complete reference implementation for running local LLM inference on mobile devices through a simple chat interface. **Key features:** - Local LLM inference using Executorch - Simple chat UI with message history - Model loading and inference pipeline - Error handling and user feedback - Compatible with both iOS and Android ### Introduces a breaking change? - [ ] Yes - [x] No ### Type of change - [ ] Bug fix (change which fixes an issue) - [x] New feature (change which adds functionality) - [ ] Documentation update (improves or adds clarity to existing documentation) - [ ] Other (chores, tests, code style improvements etc.) ### Tested on - [x] iOS - [x] Android ### Testing instructions 1. Navigate to the example directory: `cd apps/bare_rn` 2. Install dependencies: `yarn install` 3. Run on iOS: `npx pod-install` `yarn ios` Or run on Android: `yarn android` 4. Verify the app launches and displays the chat interface 5. Test message sending and model inference (requires model file setup) ### Screenshots [ <img width="1040" height="1037" alt="Screenshot 2026-01-28 at 02 06 29" src="https://github.com/user-attachments/assets/3774f4d2-ccc0-414b-85e7-3e26b06249ad" /> ](url) ### Related issues This PR provides an example app for PR #759 ### Checklist - [x] I have performed a self-review of my code - [x] I have commented my code, particularly in hard-to-understand areas - [x] I have updated the documentation accordingly - [x] My changes generate no new warnings ### Additional notes This example app was generated using `npx @react-native-community/cli@latest init bare_rn --version 0.81.5 --pm yarn` and follows bare React Native project structure (not Expo). It serves as a foundational example for developers to understand how to integrate Executorch for on-device LLM inference in their React Native applications. **Why this example is not included in the yarn workspace:** The bare React Native example is maintained outside the yarn workspace structure due to fundamental architectural differences and specific technical issues: 1. Native Module Resolution Issues with Background Downloader: Using the workspace monorepo breaks the Android app's integration with `@kesha-antonov/react-native-background-downloader`. The monorepo's package hoisting and workspace resolution interferes with the native module's ability to properly register and resolve its native components. This causes runtime failures when attempting to download AI models in the background, which is a critical feature for this LLM chat example. 2. Dependency Isolation: Bare React Native projects have distinct native dependency chains (iOS Pods, Android Gradle) that conflict with the monorepo's package management. The monorepo uses workspaces and hoisting strategies optimized for JavaScript/TypeScript packages, which can interfere with native module resolution. --------- Co-authored-by: Mateusz Słuszniak <mateusz.sluszniak@swmansion.com> Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com> Co-authored-by: Mateusz Sluszniak <56299341+msluszniak@users.noreply.github.com> Co-authored-by: Norbert Klockiewicz <Nklockiewicz12@gmail.com>
1 parent 920ebf4 commit effbfff

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

70 files changed

+6324
-245
lines changed

.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,9 @@ lib/
8888
ios/generated
8989
android/generated
9090
apps/*/ios/
91+
!apps/bare_rn/ios/
9192
apps/*/android/
93+
!apps/bare_rn/android/
9294

9395
# generated TypeDoc API reference (regenerated at build time)
9496
docs/docs/06-api-reference/

README.md

Lines changed: 29 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -38,20 +38,24 @@ React Native ExecuTorch bridges the gap between React Native and native platform
3838
[![CI](https://github.com/software-mansion/react-native-executorch/actions/workflows/ci.yml/badge.svg)](https://github.com/software-mansion/react-native-executorch/actions/workflows/ci.yml)
3939

4040
<details>
41-
<summary><strong> :blue_book: Table of Contents </strong></summary>
42-
43-
- [:yin_yang: Supported Versions](#yin_yang-supported-versions)
44-
- [:earth_africa: Real-world Example](#earth_africa-real-world-example)
45-
- [:llama: Quickstart - Running Llama](#llama-quickstart---running-llama)
46-
- [:calling: Demo Apps](#calling-demo-apps)
47-
- [:robot: Ready-made Models](#robot-ready-made-models)
48-
- [:books: Documentation](#books-documentation)
49-
- [:balance_scale: License](#balance_scale-license)
50-
- [:soon: What's Next?](#soon-whats-next)
41+
<summary><strong>Table of Contents</strong></summary>
42+
43+
- [Supported Versions](#supported-versions)
44+
- [Real-world Example](#real-world-example)
45+
- [Quickstart - Running Llama](#quickstart---running-llama)
46+
- [:one: Installation](#one-installation)
47+
- [:two: Setup \& Initialization](#two-setup--initialization)
48+
- [:three: Run the Model!](#three-run-the-model)
49+
- [Demo Apps](#demo-apps)
50+
- [Ready-made Models](#ready-made-models)
51+
- [Documentation](#documentation)
52+
- [License](#license)
53+
- [What's Next?](#whats-next)
54+
- [React Native ExecuTorch is created by Software Mansion](#react-native-executorch-is-created-by-software-mansion)
5155

5256
</details>
5357

54-
## :yin_yang: Supported Versions
58+
## Supported Versions
5559

5660
The minimal supported version are:
5761
* iOS 17.0
@@ -61,17 +65,17 @@ The minimal supported version are:
6165
> [!IMPORTANT]
6266
> React Native ExecuTorch supports only the [New React Native architecture](https://reactnative.dev/architecture/landing-page).
6367
64-
## :earth_africa: Real-world Example
68+
## Real-world Example
6569

6670
React Native ExecuTorch is powering [Private Mind](https://privatemind.swmansion.com/), a privacy-first mobile AI app available on [App Store](https://apps.apple.com/gb/app/private-mind/id6746713439) and [Google Play](https://play.google.com/store/apps/details?id=com.swmansion.privatemind).
6771

6872
<img width="2720" height="1085" alt="Private Mind promo" src="https://github.com/user-attachments/assets/b12296fe-19ac-48fc-9726-da9242700346" />
6973

70-
## :llama: **Quickstart - Running Llama**
74+
## Quickstart - Running Llama
7175

7276
**Get started with AI-powered text generation in 3 easy steps!**
7377

74-
### :one: **Installation**
78+
### :one: Installation
7579

7680
```bash
7781
# Install the package
@@ -86,10 +90,10 @@ yarn add @react-native-executorch/bare-resource-fetcher
8690
yarn add @dr.pogodin/react-native-fs @kesha-antonov/react-native-background-downloader
8791

8892
# Depending on the platform, choose either iOS or Android
89-
yarn expo run:< ios | android >
93+
yarn < ios | android >
9094
```
9195

92-
### :two: **Setup & Initialization**
96+
### :two: Setup & Initialization
9397

9498
Add this to your component file:
9599

@@ -113,7 +117,7 @@ function MyComponent() {
113117
}
114118
```
115119

116-
### :three: **Run the Model!**
120+
### :three: Run the Model!
117121

118122
```tsx
119123
const handleGenerate = async () => {
@@ -128,44 +132,39 @@ const handleGenerate = async () => {
128132
};
129133
```
130134

131-
## :calling: Demo Apps
135+
## Demo Apps
132136

133137
We currently host a few example [apps](https://github.com/software-mansion/react-native-executorch/tree/main/apps) demonstrating use cases of our library:
134138

135139
- `llm` - Chat application showcasing use of LLMs
136140
- `speech` - Speech to Text & Text to Speech task implementations
137141
- `computer-vision` - Computer vision related tasks
138142
- `text-embeddings` - Computing text representations for semantic search
143+
- `bare_rn` - LLM chat example for bare React Native (without Expo)
139144

140-
If you would like to run demo app, navigate to its project directory and install dependencies with:
141-
142-
```bash
143-
yarn
144-
```
145-
146-
Then, depending on the platform, choose either iOS or Android:
145+
If you would like to run a demo app, navigate to its project directory. Then install dependencies and run app with:
147146

148147
```bash
149-
yarn expo run:< ios | android >
148+
yarn && yarn < ios | android >
150149
```
151150

152151
> [!WARNING]
153152
> Running LLMs requires a significant amount of RAM. If you are encountering unexpected app crashes, try to increase the amount of RAM allocated to the emulator.
154153
155-
## :robot: Ready-made Models
154+
## Ready-made Models
156155

157156
Our library has a number of ready-to-use AI models; a complete list is available in the documentation. If you're interested in running your own AI model, you need to first export it to the `.pte` format. Instructions on how to do this are available in the [Python API](https://docs.pytorch.org/executorch/stable/using-executorch-export.html) and [optimum-executorch README](https://github.com/huggingface/optimum-executorch?tab=readme-ov-file#option-2-export-and-load-separately).
158157

159-
## :books: Documentation
158+
## Documentation
160159

161160
Check out how our library can help you build your React Native AI features by visiting our docs:
162161
https://docs.swmansion.com/react-native-executorch
163162

164-
## :balance_scale: License
163+
## License
165164

166165
This library is licensed under [The MIT License](./LICENSE).
167166

168-
## :soon: What's Next?
167+
## What's Next?
169168

170169
To learn about our upcoming plans and developments, please visit our [milestones](https://github.com/software-mansion/react-native-executorch/milestones).
171170

apps/bare_rn/.bundle/config

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
BUNDLE_PATH: "vendor/bundle"
2+
BUNDLE_FORCE_RUBY_PLATFORM: 1

apps/bare_rn/.eslintrc.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
module.exports = {
2+
root: true,
3+
extends: '@react-native',
4+
parserOptions: {
5+
requireConfigFile: false,
6+
},
7+
};

apps/bare_rn/.gitignore

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
# OSX
2+
#
3+
.DS_Store
4+
5+
# Xcode
6+
#
7+
build/
8+
*.pbxuser
9+
!default.pbxuser
10+
*.mode1v3
11+
!default.mode1v3
12+
*.mode2v3
13+
!default.mode2v3
14+
*.perspectivev3
15+
!default.perspectivev3
16+
xcuserdata
17+
*.xccheckout
18+
*.moved-aside
19+
DerivedData
20+
*.hmap
21+
*.ipa
22+
*.xcuserstate
23+
**/.xcode.env.local
24+
25+
# Android/IntelliJ
26+
#
27+
build/
28+
.idea
29+
.gradle
30+
local.properties
31+
*.iml
32+
*.hprof
33+
.cxx/
34+
*.keystore
35+
!debug.keystore
36+
.kotlin/
37+
38+
# node.js
39+
#
40+
node_modules/
41+
npm-debug.log
42+
yarn-error.log
43+
44+
# fastlane
45+
#
46+
# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
47+
# screenshots whenever they are needed.
48+
# For more information about the recommended setup visit:
49+
# https://docs.fastlane.tools/best-practices/source-control/
50+
51+
**/fastlane/report.xml
52+
**/fastlane/Preview.html
53+
**/fastlane/screenshots
54+
**/fastlane/test_output
55+
56+
# Bundle artifact
57+
*.jsbundle
58+
59+
# Ruby / CocoaPods
60+
**/Pods/
61+
/vendor/bundle/
62+
63+
# Temporary files created by Metro to check the health of the file watcher
64+
.metro-health-check*
65+
66+
# testing
67+
/coverage
68+
69+
# Yarn
70+
.yarn/*
71+
!.yarn/patches
72+
!.yarn/plugins
73+
!.yarn/releases
74+
!.yarn/sdks
75+
!.yarn/versions
76+
77+
# Custom
78+
!/ios/
79+
!/android/
80+
/assets/ai-models/

apps/bare_rn/.prettierrc.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
arrowParens: 'avoid',
3+
singleQuote: true,
4+
trailingComma: 'all',
5+
};

apps/bare_rn/.watchmanconfig

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{}

0 commit comments

Comments
 (0)