Fork me on GitHub
#cljsrn
<
2020-04-10
>
Michel A.08:04:18

Hi guys, I’m using re-natal, re-frame and reagent for my app and would like to fix the controlled input problem (https://github.com/reagent-project/reagent/blob/master/doc/ControlledInputs.md). The way this is fixed in web react environment is by using reagents :input field (that sets manully the focus to the end of the typed input). Any advice/code examples on how to solve this in a react native environment ? Thanks

Michel A.12:04:14

the best solution I’ve found for the moment (inspired by https://github.com/reagent-project/reagent/pull/380/commits/8e137ec24a586d4529d04e222c579c61657fa85a) is to imitate the react native code examples, by setting manually a state and updating it.

(def input-value (r/atom "initial value"))

(defn my-input []
  (r/create-class
   {:display-name  "my-input-component"
    :getInitialState
    (fn [this]
      (->js (merge (->clj (.-state this))
                   {:v @input-value})))
    :should-component-update (fn [this old-argv new-argv] true)
    :reagent-render
    (fn []
      (let [this (r/current-component)]
        [ra/view
         [ra/text-input
          {:label "my input"
           :value (.. this -state -v)
           :onChangeText #(do
                            (reset! input-value %)
                            (.setState this #js {:v %}))}]]))}))