Lately, I have been working on some side projects. For turning some of the ideas into reality I am learning (a bit of) new programming languages and frameworks.

One of these projects requires building a smartphone app. After talking with some friends and fellow coders the decision ended up on React Native, also for its slogan “Learn once, write anywhere”. After reading a little of documentation I turned to YouTube to start a tutorial. One of the best rated tutorial was Mosh’s React Native Tutorial for Beginners - Build a React Native App that gives you the basis (plus the environment set up) in two hours. It leverages the Expo framework to write the app even more easily. After an hour intro, it begins by showing how to implement a couple of screens of a demo app, starting from login.

The bug

I implemented the login screen as explained in the tutorial, with a green button for login and a red button for register. Then out of curiosity I decided to switch the red button to gold. And I got a brown one!

First, I asked my friends to check the output on their smartphones but it looked like it was only a problem of mine. Then I started to navigate Stack Overflow to find a solution. After some research, I found out that on Android devices (expecially Xiaomi), showed this kind of issue when in dark mode. Of course, as the majority of programmers I prefer dark mode on my devices, including my Redmi on which I was testing the code via Expo Go app. For confirming that was the case, I tried to switch to light mode (I had to wear sunglasses!), and you can see the comparison between light (left) and dark (right):

So that was the cause of the problem! Unfortunately, replicating the code proposed on Stack Overflow did not solve the problem for me.

The next step for finding a solution was to look for some help on social networks. And it turns out that there was more than I expected.

Repro and kind people

First I posted on Bluesky asking if anyone could help me:

I am playing with React Native with an Expo project. I have an issue rendering colors on Android. Any expert here?😎

Even if it was Friday night, Giorgia Lodi one of the Italian leading the open data movement, tagged Diego Betto deeply experienced in React world (among other topics). In a matter of minutes he replied asking for a repo so he could take a look. Well, I should I have thought to make one instead of just describing the problem with only words. Back at home, I managed to write a (minimal) reproducible example, a.k.a. repro, of the issue and shared the link.

Saturday I was going through the issues on expo/expo to look for something similar to my situation. When I was close to open a new one, I found out that there was a Discord server for discussing problems. Therefore I decided to jump in and see if anyone had already encountered the same bug. In under an hour I got several ideas on how to solve the issue, and the following morning Wodin opened a PR to fix the code on a branch where I implemented one of the workarounds suggested on Stack Overflow (for lack of experience I wrongly configured the app.json). Unfortunately, the corrected configuration did not fix the problem on my phone.

Back to Bluesky I started to follow one of the people strictly involved in Expo development and also he started to chime in, proposing solutions after taking a look at my repro. After a couple of replies he suggested opening an issue on expo repo pointing out the Android version.

Software updates

While I was getting this information from my phone settings, I found out that it was running Android 10 and updates were available. So I updated the phone and tried again to run the code. The issue was still there. Some hours later I found out that another RedMi/Android update was available. As a last resort, I decided to install it and try the app. And guess what? Colors rendered in the right way even with dark mode!

In the meanwhile Diego submitted a PR proposing a solution and introducing the concept of Pressable (to be preferred to Button). Even if the software updates solved the issue, it was nice to learn a new concept on the specific use case I proposed.

As soon as I was sure that everything worked as expected I informed everyone that helped me on the solution found.

Lessons Learned

What I learned from this experience:

• It’s full of kind people, some of them might not even know you, that take the time to help you just because they can. Thanks in particular to Diego and Wodin for the pull requests and Giorgia for “connecting people”. I look to pay it forward!
• A repro says more than one thousand words. Probably the quote was not quite like this but you got the idea. Sharing a minimal reproducible example, with a README.md, makes the work of people helping you easier.
• Make the freaking software updates! Even though now my phone Bluetooth refuses to connect to my car, but this is another story.