Fork me on GitHub
#cljsrn
<
2022-01-19
>
FlorianK13:01:59

I'm struggling with TextInput fields using clojurescript, Krell and react-native. I've tried two approaches: 1. set the value based on a ratom and update the ratom for a keystroke: [rn/text-input {:on-change-text #(swap! state assoc :goal %) :value (:goal @state}] . This works, except that when I type too quickly (which doesn't even have to be very quick) the screen flickers and text is inputted in somewhat reverse order. I guess the event succeed eachother too quickly for the update to complete before the next event is handled. There's something about this in the value docs (https://reactnative.dev/docs/textinput#value), but neither of the proposed solutions there seem to work for me (well, technically setting {:editable false} prevents the issue, but it also prevents me changing the text) 2. Trying to just let the value be, set a placeholder, and save the resulting text on submit: [rn/text-input {:placeholder "Please type your goals" :on-submit_editing #(swap! state assoc :goal (get-in % ["nativeEvent" "text"])}]. However, I can't seem to extract the text from the event. According to the docs of react native I'd expect them either to be in "nativeEvent" "text", or in :native-event :text, or something similar. However, no luck finding them. Trying to inspect it in my repl also has no success: My attempt to print all attributes of the object resulted in: {"__hash": null, "cljs$lang$protocol_mask$partition0$": 32374988, "cljs$lang$protocol_mask$partition1$": 1, "fn": [Function anonymous], "meta": null, "s": null} Any ideas of how to fix this? Googling did not help me with this and I've been struggling with this for a while. For now I'll probably go for option 1 and just not typ too quickly, but it would be great if someone knows better.

FlorianK14:01:16

I managed to solve it. I needed to use aget, as in : (aget % "nativeEvent" "text"). Key to figuring it out was to fix my logging utility function, which is now: (defn logger [x] (do (doseq [k (js-keys x)] (do (js/console.log k) (js/console.log (aget x k)))) x))

FlorianK14:01:49

Alternatively: (-> % .-nativeEvent .-text)

🎯 1
joshmiller20:01:15

@U0244NA9H27 You can use on-change-text as an event and you won’t need to extract the value. See here: https://increasinglyfunctional.com/2019/03/28/why-clojurescript-react-native-text-input-slow.html

FlorianK16:01:36

Ah, thanks!