DEV Community: Agustín

Cómo manejar estilos en React Native con nuestro hook useStyles

Agustín — Wed, 25 Nov 2020 14:09:03 +0000

¿Alguno tiene una idea clara de cómo manejar estilos en React Native? Yo no.

Hace unos años que trabajo con este framework y nunca pude conseguir una forma concisa de utilizar estilos. En este último año he intentado con algunas librerías con conceptos innovadores como Styled Components, las cuales no me han convencido por completo. Como resultado de esta insatisfacción con las actuales alternativas se creó la librería useStyles.

¿Qué es useStyles y cómo puede ayudarme?

Organizar los estilos en React Native puede ser complicado, un dolor de cabeza si no aplicas buenas práctias de programación. useStyles viene con la idea de alivianar dicha carga brindando las herramientas para que puedas generar aplicaciones donde los estilos tengan su propio lugar y puedan residir de forma armónica con los componentes.

Si resumimos qué hace useStyles: es un hook, el cual te permite consumir de forma sencilla, limpia y eficiente los estilos de tu aplicación. Por lo que si te atrae la idea de mejorar la forma en que escribes tus estilos y así generar aplicaciones más limpias, te invito a que pases por el repositorio y lo pruebes por ti mismo.

A continuación veremos un ejemplo de uso.

Uso

El siguiente ejemplo muestra cómo aplicaríamos estilos de forma nativa para generar un simple container con un texto dentro.

Visto de esta forma, no parece un mal código, ¿verdad? Ahora qué pasa cuando el componente empieza a crecer.

El componente unas semanas después, unas muy malas semanas después:

Como verán, nuestro lindo componente empezó a ser devorado lentamente por nuestros feos estilos. Si bien hay muchas formas de mejorar este código, dado que React Native no tiene una forma clara y sencilla de manejar estilos, estas malas prácticas se vuelven algo común.

Ahora implementemos lo mismo pero con useStyles:

Perdonen 😢. Mis ojos se llenaron de alegría al ver el código organizado. Sniff. Capaz esto les hace acordar un poco al uso de CSS. Si bien useStyles está inspirado en el uso de clases CSS, esta es una solución creada especialmente para React Native; poco tiene que ver con CSS.

Volviendo al previo ejemplo, se puede ver cómo el hook useStyles devuelve una función, que es utilizada luego para consumir nuestros estilos. Ya habrán notado algunas declaraciones peculiares, como un hook al que se le pasan dependencias, y algunos prefijos como ., &, $ y :. A continuación, cuando veamos la definición de los estilos, vamos a ver qué significan.

useStyles te provee las funciones GlobalStyles y Styles para definir estilos globales y locales.

Estilos globales:

Estilos del componente:

La idea no es analizar en detalle cada una de las funcionalidades, para eso pueden chequear el repositorio. Pero en forma resumida se pueden explicar de la siguiente manera:

Constantes ($): podemos reutilizarlas en otros estilos y componentes.
Estilos estáticos (.): estilos regulares que pueden ser reutilizados en otros estilos y componentes.
Estilos computados (&): estilos que dependen de ciertas dependencias pasadas en el hook. Si alguna dependencia cambia, estos estilos son re-computados.
Paths (:): abreviaciones de los estilos. Por ejemplo: para definir la propiedad backgroundColor: 'red' se puede utilizar el path bg:color:red.

Resumen

useStyles es una librería creada con la finalidad de solucionar un problema recurrente que solemos tener los desarrolladores en React Native: estilos desorganizados e invasivos en nuestros componentes. Con useStyles utilizamos un hook para consumir los estilos, el cual nos da una interfaz sencilla, limpia y eficiente.

Te invito a chequear el repositorio para ver qué más puedes hacer con useStyles y compruebes que esta librería realmente te facilitará tu trabajo como desarrollador. Por supuesto, cualquier contribución es bienvenida.

Lea este artículo y más contenido en el blog de Rootstrap: https://www.rootstrap.com/blog

References

[1] https://www.rootstrap.com/blog/usestyles-react-native-styles-hook/

[2] https://github.com/rootstrap/react-native-use-styles

[3] https://styled-components.com/

How to manage styles in React Native with our useStyles hook

Agustín — Wed, 25 Nov 2020 13:48:53 +0000

Does anyone know how to properly manage styles in React Native? I don't.

I have been working with this framework for a couple of years now and couldn't get a concise way of using styles. This last year I've tried some libraries with novel concepts as Styled Components, but I couldn't get used to them. As a result of this dissatisfaction with the current alternatives, useStyles was born.

What is useStyles and how can it help me?

Organizing styles in React Native can be tricky, a headache if you don't apply good programming practices. useStyles comes with the purpose of alleviating this burden by providing the tools so that you can generate applications where the styles have their own place and can reside harmoniously with the components.

If we summarize what useStyles does: it is a hook, which allows you to consume the styles of your application in a simple, clean, and efficient way. So if the idea of improving the way you write your styles and generating cleaner applications is appealing, I invite you to visit the repository and try it out for yourself.

Usage

The following example shows how we would apply styles natively to generate a simple container with text inside.

Seen this way, it doesn't look like bad code, does it? Now, what happens when the component starts to grow.

The component a few weeks later, a few very rough weeks later:

As you can see, our clean component began to be slowly eaten by our ugly styles. While there are many ways to improve this code, since React Native does not have a clear and simple way to handle styles, these bad practices get pretty common.

Now let's implement the same but with useStyles:

Excuse me 😢. My eyes were filled with joy when I saw this organized code. Sniff. Maybe this reminds you a little bit of CSS styles. Although useStyles is inspired by CSS classes, this is a solution created especially for React Native; it has little to do with how CSS works.

Going back to the previous example, you can see how the useStyles' hook returns a function, which is then used to consume the styles. You may have already noticed some peculiar declarations, like a hook to which dependencies are passed, and some prefixes like .,&,$and:. Next, when we look at the definition of the styles, we'll see what they mean.

useStyles provides you with the GlobalStyles and Styles functions to define global and local styles.

Global styles:

Component's styles:

We are not going to analyze in detail each one of the functionalities, for that, you can consult the repository. But in summary, they can be explained as follows:

Constants ($): we can reuse them in other styles and components.
Static styles (.): regular styles that can be reused in other styles and components.
Computed styles (&): styles that depend on certain dependencies passed in the hook. If any dependency changes, these styles are re-computed.
Paths (:): shortcuts to write styles; e.g., to define the property backgroundColor: 'red' you can use the path bg:color:red.

Summary

useStyles is a library created with the purpose of solving a recurring problem that developers usually have in React Native: disorganized and invasive styles in our components. With useStyles we use a hook to consume the styles, which gives us a simple, clean, and efficient interface.

You're invited to check the repository to see what else you can do with useStyles and check that this library will really ease your work as a developer. Of course, any contribution is welcome.

Read this article and more content in the Rootstrap blog: https://www.rootstrap.com/blog

References

[1] https://github.com/rootstrap/react-native-use-styles

[2] https://styled-components.com/