Aplicar estilos en ReactNative puede ser una tarea bastante tediosa cuando hacemos un proyecto medianamente largo, y si hay muchas clases similares, también hay código que se repite. Por ende, también(o almenos, yo) pierdo algo de tiempo de desarrollo haciendo esta tarea. Hace poco tiempo encontré esta librería para estilizar componentes de forma rápida y sencilla, lo que me permite desarrollar más rápido y crear componentes estilizados listos para reutilizar.
StyledComponents es la librería de la que hablo. Y esta es la una de las maneras en las que a mí me ayuda bastante.
Aquí está la documentación para leer más Documentación
En ReactNative tenemos un componente muy usado, el componente Text al cual hay que aplicarle estilos cada vez que nosotros queramos que se vea de alguna forma. Pero… ¿y si traemos un poco más de la web a ReactNative?
Supongamos que queremos un h1 con un tamaño, y un color específico. Lo podemos crear así:

Y si necesitamos un h2, h3… podemos modificar o extender las capacidades de ese componente ya creado:

Cuando tengamos nuestros componentes estilizados, solo los tenemos que exportar para usarlos donde necesitemos.

En la primera imágen, vemos que dentro del Template Literal interpolamos una function, esto es para darle props dinámicas al componente. En el ejemplo que se muestra, hago que sea dinámico el alineamiento y el color
const H1 = styled.Text`
font-weight: bold; // El font weight siempre será bold
font-size: 40px; // El size siempre será 40px
color: ${props => props.color ? props.color : 'dimgray'}; // Es un arrow function que recibe props, si existe, le coloca ese color, si no hay props, coloca dimgray
text-align: ${props => props.alignment ? props.alignment : 'left'}; // Lo mismo pero con el text-align
`
Así podemos estilizar muy rápido Textos, Sectiones, Header… cualquier componente que sea muy utilizado en nuestro proyecto, y pueda variar dependiendo de ciertas condiciones 😄
Curso de React Native - 2018