Fork me on GitHub
#fulcro
<
2022-07-15
>
Patrick Brown12:07:00

I’ve got an issue with a react-native component using forward-ref. Even though I’m not making any use of any ref in my code. I don’t think it uses forward ref under the hood from a code search, but it’s embedded in a webview and there are callbacks so the component can still get touch data in. The react-factory function for native is https://github.com/fulcrologic/fulcro-native/blob/develop/src/main/com/fulcrologic/fulcro_native/alpha/components.cljc#L79. Docs for the library are https://github.com/tomLadder/react-native-echarts-wrapper#properties. My simple test code is cribbed from the docs and simplified a bit…

(echart {:option
         {:xAxis {:type "category"
                  :data ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]}
          :yAxis {:type "value"}
          :series [{:data [820, 932, 901, 934, 1290, 1330, 1320]
          :type "line"}]}})
This causes a warning: I would expect an error, but a warning and a blank screen is what I get.
index.js:1 Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of `ECharts`.
    at WebView
    at div
    at 
    at ECharts ()
    at div
    at 
    at 
    at Box ()
    at $704cf1d3b684cc5c$export$9f8ac96af4b1b2ae ()
    at ToastProvider ()
    at PortalProvider ()
    at HybridProvider ()
    at ResponsiveQueryProvider ()
    at div
    at 
    at NativeSafeAreaProvider ()
    at SafeAreaProvider ()
    at Provider ()
    at NativeBaseProvider ()
    at net.drilling.app.gateway.aec/Root
    at <anonymous> ()
    at ExpoRootComponent ()
    at div
    at 
    at div
    at 
    at AppContainer ()
Any points on how I can get this forward ref thing sorted would be appreciated greatly! CHEERS!

Jakub Holý (HolyJak)12:07:19

I guess it complains about this line https://github.com/tomLadder/react-native-echarts-wrapper/blob/master/src/index.js#L162 ? You can see from https://github.com/react-native-webview/react-native-webview/blob/2e79a031c81a5d29784a3f57f9a9b44f91f92279/src/WebView.tsx#L9 that WebView is indeed a functional component and thus cannot be passed a ref =&gt; the echarts wrapper makes a mistake IMO. But this is dummy webview only used in Expo SDK "web" platform - is that your case? You can see the real one is wrapped in forwardRef https://github.com/react-native-webview/react-native-webview/blob/ff08b11e500334198e1cf2cc02724ef10fb18c91/src/WebView.android.tsx#L43 => I would open PR with react-native-webview that wraps also the dummy web view with forwardRef.

Patrick Brown12:07:01

@U0522TWDA Well, that was an interesting adventure. Thanks for the help! I’m going to file a feature request anyways, but after your post I realized my issue was with the native shadow config. Things are now working as expected on the platforms that matter. WELL DONE!

❤️ 1
Jakub Holý (HolyJak)20:07:11

Please consider contributing to the relevant docs to make it easier for the next person, if relevant.

roklenarcic13:07:34

fulcro uses timbre also on frontend?

Mark Wardle14:07:32

Hi all. I would like to show an avatar, and have tried two approaches. The first was a new HTTP endpoint that simply provides the image dynamically [it may come from a database or LDAP or somewhere else], but there is some trickiness with security and I'll have to pass a token mitigating some of the advantages such as browser caching. The second was to simply pass the binary data via a pathom resolver and transit. The data is then effectively cached in the app db and there is no complexity regarding security as it uses the existing /api endpoint. Being new to React, I have written this : On mount, I create a Blob, and then a URL. On unmount, I revoke the URL. The image does not disappear from the Chrome resources tab, which initially concerned me, but I think that is by their design. (defsc UserPhoto [this {:t_photo/keys [data mime_type]}] {:query [:t_photo/data :t_photo/mime_type] :componentDidMount #(let [{:t_photo/keys [data mime_type]} (comp/props %)] (comp/set-state! % {:url (js/URL.createObjectURL (js/Blob. (clj->js [data]) #js {:type mime_type}))})) :componentWillUnmount #(when-let [url (comp/get-state % :url)] (js/URL.revokeObjectURL url))} (dom/img {:src (comp/get-state this :url)})) (def ui-user-photo (comp/factory UserPhoto)) Does this look right? Are they other examples available? Should I use componentDidUpdate to revoke and then create a new image based on updated props? Many thanks,

tony.kay18:07:41

Other than the “yuck” factor (which is inherent to web dev), it looks “ok” to me.

tony.kay18:07:17

You might consider using the new React hooks stuff instead, it’s easier to get this kind of stuff right with useState and useEffect

Mark Wardle21:07:42

Thank you. I have been putting off reading about hooks, but I will take your advice. Thank you. Have a good weekend.

Marcus16:07:52

What is the state of Fulcro at the moment? Is it still under active development? I am considering using Fulcro in a new project.

tony.kay18:07:38

I’m using it in more than one commercial project, and actively maintaining it.

Mark Wardle21:07:57

I am converting a re-frame project which had started easily, but got mired in managing state and full stack operations, and I was already using pathom, so switching to fulcro has been very good. I think the best thing is to focus on the core as there are a lot of new things that are unfamiliar.

Dave23:07:12

Thanks @U0CKQ19AQ for maintaining Fulcro (Sponsor ❤️). We are using (committed long term) Fulcro, Pathom, and Datomic for the https://edgewoodsoftwarecorp.s3.us-east-2.amazonaws.com/CoalesceIntroduction.mp4 we're building.

👍 3
Marcus12:07:42

Thanks for taking the time to reply. I started on Fulcro a while back but had to stop because of other projects. I will give it a try again. 🙂

👍 1