5 Entry Level React Native Bugs That Might Frustrate Your Life [With Solutions]

Introduction

I started my first missionary journey in react native about 2 months ago, and so far I have seen several premium Shege (problems) on this side of the world.
Apart from struggling to install the Expo CLI that wasted a ton of data subscription and time before it was finally up and running, there were still lots of roadblocks that almost made me drop react native.

First off, I really appreciate the brilliant minds that deemed it worthwhile to come up with the Expo go app.
That have saved me lots of headache, memory consumption, and at the very least, skyrocketed my learning rate.

Initially, I thought using the official Android Studio AVD was the best, till it dawned on me that even my 4GB, AMD-powered processor can't even do 10% of the processing power that wicked .exe app needs.

I wonder how the developers of Andriod Studio felt when developing such a power-hungry, memory-guzzling, heavy software.

Trenches developers like us who are still managing their forever faithful, loyal, and low-budget 2 - 4GB RAM girlfriends were never considered.

Well, what can we do? What was that saying of when the desirable is not available yen yen yen... I can't remember and way too lazy to Google anything right now.

So, here are 5 stumbling blocks, time-wasting, head-scratching bugs (however you choose to interpret this is up to you) that I faced the very first moment I imported from "react-native".

By the way, some of these bugs or should I say lapses may not be typical with everyone due to certain differences in learning, internet connection speed, system OS or whatnot.

PS: I noticed that using the expo go app requires a very fast internet connection so it can build the necessary files required to power up your app. So make sure yours is decent.

So here it goes.

Table of Contents

• Introduction
• Table of Contents
• The Expos White Screen of Death
• Solution
• Js Map - NativeWind Styles Disagreement
• Solution
• The Wrong Style Property App Crasher
• Solution
• Image Assets Not Usable or Not Showing Up
• Scenario 1:
• Solution
• Scenario 2:
• Solution
• React Navigation Screen Naming Nightmare
• Solution
• The ScrollView Out Of View Migraine
• Solution
• Conclusion

The Expos White Screen of Death

One of the very first bugs or should say stumbling blocks that I experienced with React native is this blank screen right below.

The Expo app for some reason just freezes at the white loading screen and no matter how many times you reload the app from both the command line and the app itself, nothing seems to work.

It's kinda like the Windows Blue Screen of Death but this time, a White Screen of Death.
Most times, you will see "New update available, downloading..."
The only thing is that it never downloads. It kind of enters an infinite download void.

At first, I thought it was a bug in my code that was preventing it from loading fully but after going through my code and running it on the web by pressing "w" from the command line, it dawned on me that my code wasn't the issue here.

So, I quickly Googled it up, and the first link that popped up was good ol' Stack Overflow (What can we mere mortals do without it? Sniffs).

Cause of the error?

I read somewhere that it usually happens after you install some new dependencies on your react native app. So expo is kind of trying to rebundle your app but using the old files stored in the cache.

Solution

The solution that solved this for me was to clear the cache and data of the Expo go app.
Here is a step-by-step process on how to do it.

PS: It's worth noting that I am an android user. My Android version is 10.0 so it might be different if you are using a version higher or lower.

• First, click and hold the app. This should show you the below pop-out menu with share, app info, and remove.

• Tap on app info and it should open up your settings and config for the Expo go app.

• On the bottom of the screen, tap on clear data.

• Then proceed to tap on clear cache.

For me, I didn't want to take any chances, so I cleared everything.
Both the cache, the data, the icon, and even my brain cells. (Joking there, just clearing the data is enough)

• After this, rescan the QR code from the command line and it should work.

In a situation where it doesn't, do any of the following.

• Uninstall the application totally and reinstall it from the Google play store.

• Check your internet connection and make sure it's on 4G or at least fast enough.

Here is a StackOverflow link if you want to read more about how others were able to solve this issue.

SO link: https://stackoverflow.com/questions/64680227/new-update-available-on-expo-infinite-downloading

Js Map - NativeWind Styles Disagreement

Being a hardcore lover of Tailwindcss due to the sheer convenience it provides, I went on to integrate Nativewind into my react native app so I can write CSS styles faster.

NativeWind is a universal style system inspired by TailwindCss, in fact, it's basically a TailwindCss for react native because almost all the utility class names are the same.

NativeWind helps to write styles faster. It comes with lots of juice like pseudo-classes (hover, focus, active), dark mode, media queries, and pre-compilation.
It's also lightweight and easy to use.
If you have used Tailwindcss before, it will be a walk in the park for you.

But then, there came a problem with this. I don't know whether this is peculiar to me or not but I found out that whenever I map through a list of items to render a component, I can't be able to use NativeWindCss class in the components.
Take a peek at the code below.

{featuredCategories?.map(category => (
    <FeaturedRow 
        key = {category._id}
        title = {category.name}
        description = {category.short_description}
        id = {category._id}
     />
))}

Inside the FeaturedRow component, I can't use my favorite utility classes on this component. I will need to write raw CSS styles in exchange for that.
I don't know whether this is a design flaw or it's just me because I already googled around to check if I can see anyone with the same issue.
Nothing found so far, so I am kind of open to your thoughts on this one. Have you experienced such? Please use the comment box below. Would love to hear it.

Solution

So far so good, I haven't found anything that looks like a solution.
The only thing to do is go back to writing pure vanilla CSS.

The Wrong Style Property App Crasher

This one is not actually a bug but can be due to an individual lapse in code.
I had to add this one here because this actually gives me nightmares when it occurs especially when adding fontWeight and fontSize property names in the styles object.

When not using NativeWind, you will probably have to write your CSS styles yourself.
And one mistake that snuffs the life out of your expo app and sends it to its mama in heaven is using the wrong datatype for an object property name.

Solution

It's quite easy, just use the correct datatype for each property name. Easy peasy.

Image Assets Not Usable or Not Showing Up

Scenario 1:

One of the very few moments that left me scratching my scruffy hair was when I added a couple of images for the app I was building and after metro bundles, I got a lot of errors everywhere.
Expo bundler complaining that it can't find the image files that I am trying to pass into the image component via the source prop.

Solution

To solve this error, just stop and restart your server. Basically, react native makes use of the Metro Bundler which is similar to Babel or Webpack.
The metro bundler somehow doesn't bundle your assets folder automatically as it does to your js files, so you will have to manually restart your Metro bundler to see the latest changes in the assets folder.

Press Control + C to stop your expo CLI metro bundler.
Use expo-cli start or yarn start to restart your server.

Scenario 2:

Sometimes, when using an image from a remote URL in your Image components, the images would refuse to render on the expo go app.
Say we have a code like so:

<Image source = {{
  uri: "https://dev-to-uploads.s3.amazonaws.com/resized_logo_UQww2soKuUsjaOGNB38o.png"
}} 
/>

You might be shocked to discover that the image won't be rendered on your app.

Solution

Always add the width and height style to your Image component. It is also nice to add a resize mode to the Image.
Say:

<Image source = {{
  uri: "https://dev-to-uploads.s3.amazonaws.com/resized_logo_UQww2soKuUsjaOGNB38o.png"
}} 
  style = {{ width: 200, height: 200 }}
  resizeMode = "cover" // or contain or any option you wish
/>

React Navigation Screen Naming Nightmare

What is a react app without a navigation feature? Nothing beats that smooth screen-to-screen transition.
But from great power comes great Bugsibilities (Ben Parker 2003)
Using one of the widely trusted and most used navigation package for react native(@react-navigation/native) gave me a lot more than I expected.
It all started when I tried to navigate to a new screen using the navigation.navigate() function. And boom! Errors from the abyss of Bugtopia flooded my screen.

Check out this code snippet below of a Screen Component that gets loaded on the Screen stack.

import { View, Text } from 'react-native'
import React from 'react'

const SecondScreen = () => {
  return (
    <View>
      <Text>SecondScreen</Text>
    </View>
  )
}
export default SecondScreen;

Here is the Screen Stack Navigator.

<NavigationContainer>
    <Stack.Navigator initialRouteName='HomeScreen'>
      <Stack.Screen name = "HomeScreen" component = {HomeScreen}/>
      <Stack.Screen name = "SecondScreen" component = {SecondScreen}/>
    </Stack.Navigator>
</NavigationContainer>

Changing the name prop from "SecondScreen" to say "Second" will lead to an error.
I initially thought that the name prop can take in any arbitrary value that you wish to name your screen so as to use it with navigation.navigate() method. Turns out it isn't.

The be sincere, this stumbling block took me 6 days to find a solution. It turned into a bug for me. I didn't know why the back button wasn't working.
I racked my brains till the lines of code on VScode started to get blurry, so I angrily packed up for the night while cursing React native silently on my hostel bed.

Solution

As hard as it took me to debug this, it is actually simple.
Basically, the name prop MUST match the exact name of the component passed into the Screen component prop.
Any other thing will lead to an error, tried other alternatives and it never worked.
Also, remove whitespace if any. I read on SO during those perilous moments that it can contribute to an error.

I just saved you days of stress and Googling, you should be grateful. Big head lol.

The ScrollView Out Of View Migraine

Even though the official react native docs recommend using a FlatList over a ScrollView, yet, stubborn developers like us still prefer to use good old ScrollView to render scrollable content.
I don't know why I still prefer using ScrollView to FlatList even with all the performance gaps being touted by the Official react native docs.
Maybe the extra configuration required for the FlatList is just a little discouraging or something. I have no idea.

When using the ScrollView, you might run into a bug where the contents of the Scroll view are cut off the screen. See the picture below.

It seems like the height of the ScrollView is bigger than the device screen or something.

Solution

To fix this error, add some padding to the ScrollView like so:

contentContainerStyle = {{
      paddingBottom: 200,
      }}

This is not a state-of-the-art fix to it though. You just need to add enough bottom padding till everything is contained in view properly.

Conclusion

Some of these may not be full-time bugs but maybe some lapse in experience but they are sure going to be stumbling blocks that you might run into when learning react native for the first time.
That was why I named them entry-level bugs.

PS: That I experienced these doesn't mean you will run into bugs like this. Scenarios and reality differ from person to person but I hope you found value in this article.

Sparkles signing out.

Have a Bugderful day.