This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2023-01-03
Channels
- # adventofcode (2)
- # announcements (1)
- # asami (35)
- # babashka (67)
- # beginners (97)
- # cherry (3)
- # clj-yaml (3)
- # cljsrn (9)
- # clojure (44)
- # clojure-dev (34)
- # clojure-europe (13)
- # clojure-gamedev (1)
- # clojure-norway (10)
- # clojure-uk (2)
- # clojurescript (24)
- # clr (1)
- # conjure (18)
- # cursive (4)
- # datalevin (3)
- # emacs (6)
- # graalvm (9)
- # graphql (1)
- # introduce-yourself (1)
- # malli (7)
- # nrepl (3)
- # portal (1)
- # quil (2)
- # reagent (1)
- # reitit (21)
- # releases (1)
- # reveal (11)
- # ring (2)
- # shadow-cljs (17)
- # sql (24)
- # vim (4)
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.you can check all this kind of code (.-attribute object), almost all kind of such code should be turn to (goog.object/get ……..)
@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
@U01125FLA02 Thanks. It worked.
@U02TF2JU3M4 yes i am using expo.