Writing React Native code from nine to five for almost three years has led me to face some truly baffling bugs. So much so that I decided to write this memo that hopefully gives me a good chuckle in a decade or two. Do not interpret this list as a criticism against any mentioned libraries but rather an enumeration of funny remarks. I have uncovered plenty of others, but there is something about top-three lists, isn't there?
1. Serving static HTML
So you want to render a static file from the device file system on Android? Not so fast - literally! There is a race condition in the RN WebView native implementation, so you must set the URL after the first render.
https://github.com/react-native-webview/react-native-webview/issues/656#issuecomment-551312436
PS. there was also a bug where you must unmount the WebView on Android before back navigation! In our codebase, there are three variables suffixed with "hack" in the WebView wrapping file only 🥇
2. Transition animations
Wouldn't it be pleasant for components just not to appear awkwardly on the screen without a smooth transition animation? Sorry, only possible on iOS at the moment! The renowned combination of react-navigation and react-native-reanimated libraries will mess up the header height if you use layout animations. Put a layout animation prop in place (even undefined will do) and catch your top components disappearing from the view.
https://github.com/software-mansion/react-native-reanimated/issues/2906
3. File size mismatch
Uploading a photo to a signed URL in S3? That is super easy; all you have to do is to fetch the blob from the filesystem. This can be done without any external dependencies and no native code. How cool is that!
Except, there is a caveat, in iOS, fetching an image and reading the blob will return a file of a different size compared to the size on the disk.
I must emphasize that this is not a rant against React Native. I will save that for later.
Comments
Post a Comment