The one thing that is most common in react native apps is how they display text. Some of the basic apps display very little, but most of the apps show a lot. That is why it is important to integrate the right system effectively and make sure that refactoring and adding texts in your app becomes as simple as possible. Although a lot of people think that managing such simple component would not be a difficult task but you should apply properties and styles to text to make it look the way you want.
Creating amazing text styles in react native is not an easy task. You need a lot of fiddling and handling edge cases. Your goal is to create a flexible and solid React typography system that scales. The goal: Since the web has moved to more isolated modular components, we can still come up with a solution that has the flexibility. The main requirements of the old CSS classes were:
Moreover, the final solution must be scalable, simple, and dry. Let’s get started When you face such challenges, you must start with the ideal objective and reverse engineer it. Go for something like this. This example would satisfy both the requirements discussed above. This styled component has the flexibility to be modified semantically and visually. Although the above example is relatively insignificant, a few changes can be refactored to make the naming convention better and abstract the names used from the context. Practices that can be used This small section is about the conventions used as examples in the final solution, you can skip it if you are already aware of the design systems. In typography names, different conventions for naming type styles can be used, from cities to planet names, but the best one is used in GEL, it’s the front end system created by BBC which shows conventional type measuring techniques from the 15th century. This allows us to communicate the type options in the development process easily and bridges the gap between developers and designers. If we talk about color names, most of the top app development companies use name that create individual abstract names. This allows us to prevent ending up with list of different variations having the same color (green-1, green-2) Extendable Styles To satisfy this requirement, you need to make every typography styles (BodyCopy, Canon, etc.) into components having default styles but can also be overridden by using props. After trying and creating many different solutions, we came across the styled-system package. Using a styled-system, we can refactor the canon component to achieve the following:
I hope you find this article helpful, and you will end up effectively integrating a typography system in React Native.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |