This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2022-01-19
Channels
- # announcements (14)
- # babashka (16)
- # beginners (81)
- # calva (18)
- # chlorine-clover (8)
- # cider (4)
- # clj-kondo (11)
- # cljdoc (4)
- # cljsrn (5)
- # clojure (163)
- # clojure-europe (30)
- # clojure-nl (3)
- # clojure-spec (7)
- # clojure-uk (4)
- # cursive (3)
- # emacs (12)
- # events (1)
- # figwheel-main (3)
- # fulcro (60)
- # introduce-yourself (3)
- # jackdaw (12)
- # juxt (3)
- # lsp (77)
- # malli (23)
- # mid-cities-meetup (9)
- # music (2)
- # off-topic (12)
- # portal (6)
- # releases (2)
- # shadow-cljs (3)
- # spacemacs (7)
- # sql (1)
- # tools-deps (2)
- # vim (3)
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.
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))
@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