@mlodyjesienin/example app UI #386

mlodyjesienin · 2025-06-10T12:10:05Z

Description

Migrated example apps (llm, computervision) to expo router navigation.
Added drawer navigation and menu for better UX.
Fixed small issues regarding keyboard padding.

Type of change

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)

Tested on

iOS
Android

Related issues

Issue #224

Checklist

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

msluszniak · 2025-06-10T15:43:30Z

apps/computer-vision/app/_layout.tsx

+      <Drawer.Screen
+        name="index"
+        options={{
+          drawerLabel: '  Menu',


Why is a space here?

msluszniak · 2025-06-10T15:47:20Z

apps/llm/package.json

    "react-native-safe-area-context": "5.4.0",
+    "react-native-screens": "~4.11.1",
    "react-native-svg": "15.11.2",
    "react-native-svg-transformer": "^1.5.0",
    "react-native-wheel-scrollview-picker": "^2.0.6"


I don't understand how this PR tackles #224 if scrollview-picker is still in package.json.

yes, remove scrollview-picker from each package.json and reinstall deps.

msluszniak · 2025-06-10T15:59:59Z

Calling yarn in example apps generates now new warnings:

➤ YN0002: │ computer-vision@workspace:apps/computer-vision doesn't provide @react-navigation/native (p65dbd), requested by @react-navigation/drawer.
➤ YN0002: │ llm@workspace:apps/llm doesn't provide @react-navigation/native (pe0aa0), requested by @react-navigation/drawer.

msluszniak · 2025-06-10T16:18:45Z

Could you also handle this one: #349 in this PR and disable voice chat on emulator in llm examples?

msluszniak · 2025-06-10T16:40:14Z

This seems to be a bit of redudancy:

msluszniak · 2025-06-10T16:41:58Z

~~If I'm not wrong, currently tool calling supports only calls to Google Calendar, not the regular calendar on device. So make it clear and add Google Calendar instead of calendar.~~
My bad, ignore this comment. This not work for me on emulator, so I'll create separate issue about this.

msluszniak · 2025-06-10T16:43:28Z

I guess that the icon in the chat presents a lama because the model was previously LLaMa. Now it's Qwen, so maybe think of changing this one.

msluszniak · 2025-06-10T16:45:25Z

I think that in llm examples it will be better to use simple stack navigation with back arrow to the main screen instead of drawer navigation.

msluszniak · 2025-06-10T16:57:11Z

Could you disable the button with camera on emulator for all examples in apps/computer-vision?

PS. change order of words to Top 10 Results, sounds better imho.

msluszniak · 2025-06-10T17:11:42Z

I don't understand what should present the Object Detection example in apps/computer-vision. Does it even work?

msluszniak · 2025-06-10T17:13:34Z

The fact that OCR and Vertical OCR on the list below are not two consecutive elements is unnatural for me. Maybe consider changing the name to OCR Vertical to preserve alphabetical order and force the intuitive order.

msluszniak · 2025-06-10T17:39:44Z

Maybe it is worth adding upload from device option for speech to text example?

msluszniak · 2025-06-10T17:49:38Z

There is no way now to clear automatically added sentences and user defined sentences. I think it will be nice to add such option.

msluszniak · 2025-06-10T17:55:16Z

Deactivate Find Similar when no input provided, and communicate more explicitly in this example that you need to provide sentence and use Find Similar on that particular sentence. I thought, that I should enter all context sentences by Add to list and then clicking Find Similar will generate me some text embeddings similar to the context sentences.

msluszniak · 2025-06-10T18:01:24Z

In computer-vision package.json there is "react-native-executorch": "0.4.2", while other examples use react-native-executorch from monorepo, maybe change this one.

NorbertKlockiewicz · 2025-06-11T06:39:29Z

apps/computer-vision/app.json

@@ -7,6 +7,7 @@
    "icon": "./assets/icons/icon.png",
    "userInterfaceStyle": "light",
    "newArchEnabled": true,
+    "scheme": "your-app-scheme",


I think it would be better to set scheme to "rne-computer-vision"

Do the same for other apps

NorbertKlockiewicz · 2025-06-11T06:44:43Z

apps/computer-vision/package.json

    "expo-status-bar": "~2.2.3",
    "metro-config": "^0.81.0",
    "react": "19.0.0",
    "react-native": "0.79.2",
-    "react-native-executorch": "workspace:*",
+    "react-native-executorch": "0.4.2",


Suggested change

"react-native-executorch": "0.4.2",

"react-native-executorch": "workspace:*",

NorbertKlockiewicz · 2025-06-11T06:45:34Z

apps/llm/app.json

@@ -6,6 +6,7 @@
    "orientation": "portrait",
    "icon": "./assets/icons/icon.png",
    "userInterfaceStyle": "light",
+    "scheme": "your-app-scheme",


Same as in computer vision rne-llm

NorbertKlockiewicz · 2025-06-11T06:48:09Z

apps/llm/app/llm_tool_calling/index.tsx

@@ -42,10 +38,6 @@ export default function LLMToolCallingScreen({
    tokenizerConfigSource: HAMMER2_1_TOKENIZER_CONFIG,
  });

-  useEffect(() => {


Are you ensured that it's impossible to change the route when model is generating, because if it's possible it will lead to errors when trying to load model on a different page. I think with current implementation it isn't handled.

NorbertKlockiewicz · 2025-06-11T06:48:42Z

apps/llm/app/voice_chat/index.tsx

@@ -69,7 +65,7 @@ export default function VoiceChatScreen({
    tokenizerConfigSource: QWEN3_TOKENIZER_CONFIG,
  });
  const speechToText = useSpeechToText({
-    modelName: 'moonshine',
+    modelName: 'whisper',


why this change? I think w should stay with moonshine as default

NorbertKlockiewicz · 2025-06-11T06:49:24Z

apps/llm/package.json

    "react-native-safe-area-context": "5.4.0",
+    "react-native-screens": "~4.11.1",
    "react-native-svg": "15.11.2",
    "react-native-svg-transformer": "^1.5.0",
    "react-native-wheel-scrollview-picker": "^2.0.6"


yes, remove scrollview-picker from each package.json and reinstall deps.

…voice_chat

…ating

…ddings

NorbertKlockiewicz · 2025-06-13T07:38:44Z

apps/llm/android/app/src/main/AndroidManifest.xml

+        <action android:name="android.intent.action.VIEW"/>
+        <category android:name="android.intent.category.DEFAULT"/>
+        <category android:name="android.intent.category.BROWSABLE"/>
+        <data android:scheme="your-app-scheme"/>


You need to run npx expo prebuild for a changes from app.json to be applied, but when doing that don't forget to open ios project in xcode and add increased memory capability

NorbertKlockiewicz · 2025-06-13T07:41:22Z

apps/llm/contexts/LlmContext.tsx

+  return context;
+}
+
+import { ReactNode } from 'react';


Move the import to the top of this file

NorbertKlockiewicz · 2025-06-13T07:50:55Z

I've tested it and works fine. Please apply changes requested i my two comments, fix the conflicts and you can merge.

mlodyjesienin added 2 commits June 10, 2025 13:30

feat: use expo router and add drawer to enhance ux

031f460

feat: expo routers, drawer navigation, small fixes

cda3d1b

mlodyjesienin requested a review from NorbertKlockiewicz June 10, 2025 12:10

msluszniak reviewed Jun 10, 2025

View reviewed changes

apps/computer-vision/app/_layout.tsx Outdated

<Drawer.Screen

name="index"

options={{

drawerLabel: ' Menu',

Copy link

Member

msluszniak Jun 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is a space here?

msluszniak reviewed Jun 10, 2025

View reviewed changes

msluszniak linked an issue Jun 10, 2025 that may be closed by this pull request

Find alternative for scroll picker with better UX for example apps. #224

Open

msluszniak assigned mlodyjesienin Jun 10, 2025

NorbertKlockiewicz requested changes Jun 11, 2025

View reviewed changes

mlodyjesienin added 8 commits June 11, 2025 09:58

fix: deps for apps/computer-vision

440eb5a

fix: scheme and typos, computer-vision

9a5b800

feat: disable camera on emulator for computer-vision

c92231f

fix: Change order (OCR Vertical) in computer-vision

4f97520

fix: dependecies and scheme for app/llm

c2fa80a

fix: disable voice chat on emulator and change to moonshine apps/llm/…

16dc16f

…voice_chat

fix: remove redundant llm tool calling information

3dfd1da

work in progress - fix:switching between screens while model is gener…

97efa7b

…ating

mlodyjesienin marked this pull request as draft June 12, 2025 11:40

feat: clear list button and disabled buttons logic for apps/text-embe…

75ff9ff

…ddings

NorbertKlockiewicz approved these changes Jun 13, 2025

View reviewed changes

	"react-native-executorch": "0.4.2",
	"react-native-executorch": "workspace:*",

@mlodyjesienin/example app UI #386

Are you sure you want to change the base?

@mlodyjesienin/example app UI #386

Uh oh!

Conversation

mlodyjesienin commented Jun 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Type of change

Tested on

Related issues

Checklist

Uh oh!

Choose a reason for hiding this comment

Uh oh!

msluszniak Jun 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

msluszniak commented Jun 10, 2025

Uh oh!

msluszniak commented Jun 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

msluszniak commented Jun 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

msluszniak commented Jun 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

msluszniak commented Jun 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

msluszniak commented Jun 10, 2025

Uh oh!

msluszniak commented Jun 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

msluszniak commented Jun 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

msluszniak commented Jun 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

msluszniak commented Jun 10, 2025

Uh oh!

msluszniak commented Jun 10, 2025

Uh oh!

msluszniak commented Jun 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

msluszniak commented Jun 10, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

NorbertKlockiewicz commented Jun 13, 2025

Uh oh!

Uh oh!

mlodyjesienin commented Jun 10, 2025 •

edited

Loading

msluszniak Jun 10, 2025 •

edited

Loading

msluszniak commented Jun 10, 2025 •

edited

Loading

msluszniak commented Jun 10, 2025 •

edited

Loading

msluszniak commented Jun 10, 2025 •

edited

Loading

msluszniak commented Jun 10, 2025 •

edited

Loading

msluszniak commented Jun 10, 2025 •

edited

Loading

msluszniak commented Jun 10, 2025 •

edited

Loading

msluszniak commented Jun 10, 2025 •

edited

Loading

msluszniak commented Jun 10, 2025 •

edited

Loading