1. Use Fast Refresh for Fixing Your UI

One of the areas where React Native really lacks when compared to the web is in the UI inspection department. None of the tools available now come even close to the ease of use and helpfulness of the Inspect Element tool in browsers.

But React Native has a trick up its sleeve: Fast Refresh.

React Native’s Fast Refresh feature is one of the hottest implementations out there when it comes to previewing code changes. If done right, it can work just as if you had an Inspect Element window open. Try this:

Make a bred snippet that creates a red border, use it inside any element, hit CMD+S and see your element pop on screen. You can then adjust or enhance your element’s styling to your liking.

Live Reload demo gif


It might seem simple and limited, but it turns out to be just what you need 95% of the time.

This method will also mean you don’t have to open inspect pop-ups and menus and disrupt your coding workflow, so in a way, it's.. even better than web's way? Up to you to decide.

2. Use Fast Refresh for Inspecting Data

An even more useful trick when using Fast Refresh is the ability to check the value of any variable from the current frame. Consider this example:

iOS Simulator top part

This “Player Stats” screen is supposed to show stats of a player. But it looks like something is broken, and we need to find out what it is.

The code looks like this:

                
  <View>
    {stats.map(stat => 
      <Stat {...stat} />
    )}
  </View>
  
  ...

  export const Stat = ({ value = '', name }) => ...
            

In the screenshot, the stat's value seems to aways be “-”. This indicates that the stat variable’s structure has changed. We need to inspect it.

But instead of firing up the remote debugger and going through all the hassle associated with it, we can do this much, much easier with Fast Refresh.

Just add this in your markup:

                
  <View>
  {stats.map(stat => 
    <Stat dog={console.log(stat)} {...stat} />  
  )}
  </View>
            

Due to the nature of the render function, each and every time it is called, every attribute of every element is evaluated to be then sent down as props.

Assigning console.log(stat) to a completely arbitrary and non-existent attribute (in this case “dog” — a random string that I’ve found handy) and then saving to trigger Fast Refresh, our render function will trigger an evaluation of our dog attribute.

Console with code

And now we can easily see that we actually need to spread stat.content and not stat, as our data got nested under content.

Enjoy!