Einkaufszettel Part 3

Modal Entfernen

Stand aus Einkaufszettel Part 2 war, dass das Keyboard („soft keyboard“) beim Focus vom TextInput nicht angezeigt wird, was es aber sollte [1]. Vielleicht können wir das Problem umgehen indem wir die UI ändern. Ich mag Modals eh nicht. Wir könnten das TextInput immer anzeigen und uns somit auch den Add-Button sparen.

Remove the Modal, the TextInput and the Add-Button.

Cleanup, Import fix. Done.

Aside: List Style

Die Einträge sollen über die ganze Breite gehen.

Change the list, so its items cover the whole width of the viewport.

Der gesamte Hintergrund soll rot werden, aber damit kommt unser LLM nicht klar. Hier heisst es Doku lesen und Dinge verstehen, also stellen wir das hinten an.

Layout Ändern

Change the layout, so that the upper part is a scrollable list with the items as currently. The lower part should be a single textinput that remains at its height and never scrolls out of view.

TextInput soll hinzufügen:

On Textinput submit, add its contents to `data`.

Fast richtig, nur wurden onChangeText= und onSubmitEditing= an FlatList statt TextInput gehangen. 🤪

Delete Background Fixen

Aus https://medium.com/@ofir.zukerman/swipe-to-delete-react-native-with-reanimated-3-b593f29366ce

hat

const WIDTH_SCREEN = Dimensions.get('window').width;
[...]
  deleteButton: {
    width: WIDTH_SCREEN,
  },

geholfen.

Header Fixen

Kürzer wäre schön, ist aber involviert: react-navigation/react-navigation#10097

Aider muss das Layout verstehen können.

/add app/_layout.tsx
Set the screen title to "Einkaufszettel".

Das definiert statische Routen via Stack. Dynamische Routen für mehrere Listen werden da interessant.

Stand

Voice

Sieht auf den ersten Blick hakelig mit Expo aus

• https://stackoverflow.com/questions/65090235/expo-voice-recognition

• https://stackoverflow.com/questions/58040614/i-am-working-on-a-project-and-i-need-to-translate-speech-into-text-i-used-expo-a

react-native-voice scheint „the way to go“ zu sein.

Um react-native-voice einzubinden müssen wir uns aber von expo go verabschieden (docs:

This package cannot be used in the „Expo Go“ app because it requires custom native code.

npx expo install expo-dev-client
npx expo run:android

Führt auf meiner Kiste zu

# Android Gradle plugin requires Java 17 to run. You are currently using Java 11.
# Oops. :D
sudo apt install openjdk-21-jdk

Und jetzt sind wir in der Welt der Android-Entwicklung gelandet:

> Task :expo-modules-core:configureCMakeDebug[arm64-v8a] FAILED
[CXX5304] This version only understands SDK XML versions up to 3 but an SDK XML file of version 4 was encountered. This can happen if you use versions of Android Studio and the command-line tools that were released at different times.

Yay! \o/

cd android/
./gradlew clean
cd ..
npx expo run:android

Nächster Fehler:

> Task :expo-modules-core:configureCMakeDebug[arm64-v8a] FAILED

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':expo-modules-core:configureCMakeDebug[arm64-v8a]'.
> [CXX1416] Could not find Ninja on PATH or in SDK CMake bin folders.

Also

sudo apt install ninja-build

---

Aside:

Tensorflow JS könnte eine Option sein, e.g. nicknochnack/Speech-Command-Recognition-with-Tensorflow.JS: A lightweight React app leveraging Speech Command Recognition from Tensorflow.Js

---

react-native-voice/voice und react-native-voice/voice in components/ gelegt und <VoiceTest/> gerendert. Sprache von en-US auf de-DE. Erkennung funktioniert. \o/

---

[1]

https://reactnative.dev/docs/textinput#showsoftinputonfocus

Einkaufszettel Part 2   Einkaufszettel Part 4 - Flutter