Fork me on GitHub
#cljsrn
<
2023-01-03
>
jewiet09:01:03

Hello, I have build a sidebar using Animated API and PanResponder. During development the sidebar works as expected. When I build an APK for production using EAS , the sidebar works for the first time then it is unresponsive. My code looks like this,

(defn sidebar []
  (let [drawer-open? (r/atom false)
        drawer-value (new rn/Animated.Value (if @drawer-open? 0 -290))
        animate-drawer (fn []
                         (-> drawer-value
                             (rn/Animated.spring #js {:toValue (if @drawer-open?
                                                                 0
                                                                 -290)
                                                      :friction 8
                                                      :useNativeDriver false})
                             (.start)))
        pan-responder (rn/PanResponder.create #js {:onStartShouldSetPanResponder (fn [arg]
                                                                                   true)
                                                   :onPanResponderGrant (fn []
                                                                          (.setOffset drawer-value drawer-value._value))
                                                   :onPanResponderMove (rn/Animated.event (clj->js [nil
                                                                                                    {:dx drawer-value}])
                                                                                          (clj->js {:useNativeDriver false}))
                                                   :onPanResponderRelease (fn [e state]
                                                                            (let [clj-value (walk/keywordize-keys
                                                                                             (js->clj state))]
                                                                              (when (> (:dx clj-value) 10)
                                                                                (reset! drawer-open? true))
                                                                              (when (< (:dx clj-value) -10)
                                                                                (reset! drawer-open? false))
                                                                              (.flattenOffset drawer-value)
                                                                              (animate-drawer)))})]
    (fn []
      [:> rn/View {:style {:alignItems :flex-start}}
       [:> menu-icon
        {:name "menu"
         :size 30
         :position :absolute
         :z-index 1
         :color :red
         :onPress (fn []
                    (swap! drawer-open? not)
                    (animate-drawer))}]]
      [:> rn/Animated.View (merge (js->clj (.-panHandlers pan-responder))
                                  {:style {:flex 1
                                           :transform [{:translateX (.interpolate drawer-value
                                                                                  #js {:inputRange #js [-280 0]
                                                                                       :outputRange #js [-280 0]
                                                                                       :extrapolateRight "clamp"})}]
                                           :backgroundColor "transparent"
                                           :position "absolute"
                                           :height "100%"
                                           :width 300
                                           :flexDirection "column"}})])))
I can't figure out the problem. Has anyone encountered similar issues? Thanks and apologies for the long code.

feng10:01:56

maybe its problem of: (.-panHandlers pan-responder) in release mode

feng10:01:20

you can check all this kind of code (.-attribute object), almost all kind of such code should be turn to (goog.object/get ……..)

jewiet10:01:30

I will try it out. Thanks!

Ulises MC12:01:24

@URNEVGYUF you are using expo, right? If so, you could run your app in release mode by first compiling shadow-cljs in release and then run expo in release mode

jewiet12:01:10

@U01125FLA02 Thanks. It worked.

jewiet12:01:48

@U02TF2JU3M4 yes i am using expo.

Ulises MC12:01:23

In the past I've had problems that only happened when shadow-cljs was compiled for release, mainly due to Clojure's dynamic types. Good to know you solved your problem!

jewiet12:01:03

@U02TF2JU3M4 Thanks for the tip. It was painful to debug the app in production.

👍 2