Skip to main content

My top three React Native bugs 2020-2022

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.


//react-native-fs
const imagePath = '/somewhere/image.jpeg';
const imageFile = await RNFS.stat(imagePath)
const response = await fetch('file://'+imagePath);
const imageBody = await response.blob();
// Android returns true, iOS false :/
console.log(imageBody.size === imageFile.size)
view raw file-size-mismatch.ts hosted with ❤ by GitHub


I must emphasize that this is not a rant against React Native. I will save that for later.

Labels

Labels:

Comments

Post a Comment

Popular posts from this blog

I'm not a passionate developer

A family friend of mine is an airlane pilot. A dream job for most, right? As a child, I certainly thought so. Now that I can have grown-up talks with him, I have discovered a more accurate description of his profession. He says that the truth about the job is that it is boring. To me, that is not that surprising. Airplanes are cool and all, but when you are in the middle of the Atlantic sitting next to the colleague you have been talking to past five years, how stimulating can that be? When he says the job is boring, it is not a bad kind of boring. It is a very specific boring. The "boring" you would want as a passenger. Uneventful.  Yet, he loves his job. According to him, an experienced pilot is most pleased when each and every tiny thing in the flight plan - goes according to plan. Passengers in the cabin of an expert pilot sit in the comfort of not even noticing who is flying. As someone employed in a field where being boring is not exactly in high demand, this sounds pro...
Post a Comment
Read more

Canyon Precede:ON 7

I bought or technically leased a Canyon Precede:ON 7 (2022) electric bike last fall. This post is about my experiences with it after riding for about 2000 km this winter. The season was a bit colder than usual, and we had more snow than in years, so I properly put the bike through its paces. I've been cycling for almost 20 years. I've never owned a car nor used public transport regularly. I pedal all distances below 30km in all seasons. Besides commuting, I've mountain biked and raced BMX, and I still actively ride my road bike during the spring and summer months. I've owned a handful of bikes and kept them until their frames failed. Buying new bikes or gear has not been a major part of my hobby, and frankly, I'm quite sceptical about the benefits of updating bikes or gear frequently. I've never owned an E-bike before, but I've rented one a couple of times. The bike arrived in a hilariously large box. I suppose there's no need to worry about damage durin...
Post a Comment
Read more

Emit structured Postgres data change events with wal2json

A common thing I see in an enterprise system is that when an end-user does some action, say add a user, the underlying web of subsystems adds the user to multiple databases in separate transactions. Each of these transactions may happen in varying order and, even worse, can fail, leaving the system in an inconsistent state. A better way could be to write the user data to some main database and then other subsystems like search indexes, pull/push the data to other interested parties, thus eliminating the need for multiple end-user originating boundary transactions. That's the theory part; how about a technical solution. The idea of this post came from the koodia pinnan alla podcast about event-driven systems and CDC . One of the discussion topics in the show is emitting events from Postgres transaction logs.  I built an utterly simple change emitter and reader using Postgres with the wal2json transaction decoding plugin and a custom go event parser. I'll stick to the boring ...
Post a Comment
Read more