3 React Native Styling Tips

Building a mobile application can feel intimidating. However, you are much closer than you realize to authoring an excellent app. React Native has made a concerted effort to help new developers dive in and getting started. I certainly recommend following their documentation as well as utilizing all that Expo has to offer in firing up your first mobile app. Both of these docs do a great job explaining the necessary steps to get up and running in a logical and sequential fashion. Two thumbs up!

That being said you can also follow their tutorials on getting started and building out simple components or even begin with one of their mobile templates. Before too long you'll be able to have a mobile app up and running and feel quite comfortable editing it to meet your own preferences.

I was first being introduced to React through building web applications and then jumped into building mobile applications with React Native. This switch illuminated some interesting differences, one of which had to do with styling. It is a common practice to have a React Native StyleSheet component at the bottom of your jsx file which handles all of the styling for that screen/component. Though this is different than how I organized my styling for a web application, I actually really enjoyed this convention as it can simplify styling by consolidating your styles and React Native code to the same file.

I also found that this practice empowers the developer to tweak the styles more readily. If you'd like to change the background color of your app to green, well it is just sitting their waiting to be changed and then immediately renders the change to your iOS simulator. Quick, easy, efficient, consolidated... I'm a fan.

However, with this convenience you might eventually find yourself in a pickle. It is not uncommon to continually and iteratively add styling to an applications not realizing that you are overriding or invalidating a previous style. Then, when you add flex: 1 to a component it oddly shrinks to an imperceivable size. Or, when you add justifyContent: flex-end and the text inside of your Text component it sits there on the left side of the screen more stubborn than you thought possible.

And now you have to start a bug hunt...

You dig and dig through your styling to figure out why your code is not reacting to your commands the way you expect it to. This can be annoying and time consuming to say the least!

So, in an effort to spare any individual from said experience: here are three tips that will help your styling remain effective and productive:

1. Be Intentional (watch for cause & effect)

Styling debacles easily occur when using a willy nilly, flippant, hacking approach. When you add styling to a component you should be able to articulate why you added what you did, and you should be able to explain what your styling is doing to that specific component.

You will find yourself in a situation where you won't know the exact name and value that you need. All you know is you want "this component" to move "over there." So you try several different styling names and values to see what will happen. This tactic is fine, and harmless, as long as you go back and immediately weed out what wasn't needed afterward.

Remaining accountable to your styling becomes extremely important when you are working with other people. If you leave styling values inside of different components that are lurking, dormant, waiting to explode and cause harm (More specifically: they are not actually doing anything at the moment because they are being overridden by another style), then this can cause a lot of confusion and frustration for someone who is trying to add to your code.

Here is an example of silly styling that unfortunately won't throw an error. You can clearly see the cause for confusion:

      const styles = StyleSheet.create({
        container: {
          backgroundColor: 'blue',
          backgroundColor: 'yellow',
        },
      });

React Native will implements the second of the two styles so you will in fact have a background that is yellow. Keep in mind the other styles you might be overriding with your additional styling.

If you are trying out a new property in your StyleSheet component then simply implement it, see if it created the desired result, and if not - remove it. Very simple, very important.

2. Keep Your Code Dry

This is a useful tip no matter what kind of code you are writing. You don't want to write the same thing multiple times (Don't Repeat Yourself). The more simple and concise your components are the easier they are for people to read and understand in the future (including yourself).

When you are first building out a component it can feel easier to write inline styling and then extract that to the StyleSheet component later on. When you begin extracting your styles out of inline, or even if you began by utilizing the StyleSheet component, keep an eye out for the opportunity to combine style properties. Think big picture. If you have several icons that all have the same styling, don't write out the same styling three times. Instead, combine their styling it a property that you can reuse:

      icon: {
        color: '#228b22',
        marginBottom: 5,
        marginHorizontal: 75,
      },

You'll thank yourself later.

3. Work Outside to Inside

This last tip can be very helpful when debugging a StyleSheet bird's nest. I have found it much easier to find bugs when I start examining the current styles from the outermost component. If you are having trouble viewing a component in your application it could be from how it is behaving inside of its containing Component. When debugging size, orientation, flex, etc. start from the outermost containing component and work in so you can know which styles are being imposed on which components. If necessary, turn the background color to a bright yellow of the component you are trying to edit so that it lights up on your simulator.

Here is an image of three different style properties with a yellow background. I first applied it to the centered container, then the outermost container of this component, and then container of the containing component. Clearly, it is very helpful to know what part of the screen you are actually editing with your StyleSheet.

And that's it! Three tips I continue to use all of the time. I hope these tips have been helpful and I hope they save you some time in your bright and colorful styling future. May all of your components and screens render as desired and your code be a joy for other people to work with!