How to Effectively Integrate a Typography System in React Native

The Problem

If there is one thing that most react native apps have in common, it is how they display text. Some simple apps show very little, but most apps display a lot. That is why it’s vital to put the right system in place, to ensure adding and refactoring texts in your app is as simple as possible.

Now, you might be thinking – why am I reading an article on how to manage such a simple component?

It’s just text, right? Yes, but more often than not, you need to apply styles and properties to said text to make it look the way you want.

When you have to do it for all the texts in your app, it adds up. This, of course, begs the question – how can I reduce the amount of code repetition?

Over the years, I have seen my fair share of attempts at solving this problem, and I can finally say that I have landed on one solution that left me quite pleased.

The Solution

The solution is quite simple, but it’s based on following best UI practices. What do I mean? Have predefined styles for headings, paragraphs, and other texts that you might need.

What is important is that all the texts of your app fall into one of those definitions and that the amount doesn’t get out of hand.

It’s good to keep the number of definitions short, so it’s easier to remember what to put when coding and that your app is consistent in its respective styling, which in turn, gives you usability and accessibility points.

Without any further ado, here is the aforementioned code of the component and supplementary files:

Once you have all of that in place, you can simply import the component and use it as follows:

It’s as simple as that, and usually, you will only have to apply extra styles to a particular text component instance if you need to add spacing, color, or wrapping.

Taking the naming convention and hierarchy of text components from the web makes it very easy to understand and remember.

As you may have noticed, with the use of prop-types, it is very easy to notice if you misspelled a type when setting it on an instance of said component.

Although adding custom fonts to your React Native project is out of scope for this article, you might find this article useful where we cover that exact subject.

Conclusion

As you can see, the solution is very clean and simple, but it fixes a problem in a component that is so basic that it is also often overlooked.

Putting a bit of time and thought into these kinds of components that make up the core DNA of our apps can go a long way.

I hope you find this article helpful and that you end up effectively implementing this solution in your projects.

Want to work with Agustina Chaer?
We are hiring :)

Thanks to the creation of blockchain technology in 2008, a lot of developments have occurred since. For example, the creation […]
June 15
5 min read
One of the most important western philosophers of all time, Aristotle once said – “Man is by nature a social […]
December 7
5 min read
Month-over-month growth is a key metric for measuring the growth of your business.
June 18
5 min read
DevOps describes the integration of software production, development, and operations, with a focus on increasing the speed of software delivery. […]
August 4
5 min read
For those of you looking to transition from graphic design to product design, I’d like to start out by saying […]
August 3
5 min read
Any contemporary financial system must include channels for people to lend and borrow valuable assets. Using these financial mediums, asset […]
August 2
5 min read
Marketing today depends heavily on digital advertising to reach consumers and many digital businesses rely upon revenue from personalized ads. […]
August 1
5 min read
Quality assurance (QA) serves an essential role in product development, improving the software for the customers, and reducing defect repair […]
July 26
5 min read