En este post veremos c贸mo realizar un fondo degradado en react native, es algo muy sencillo y que puede dar un aspecto muy bonito a nuestra app.
Aqu铆 muestro unos ejemplos de c贸mo lo he usado en el 煤ltimo proyecto que estoy desarrollando.
Para usar esos gradientes, usaremos el componente react-native-linear-gradient, que puede ser encontrado en el siguiente enlace: https://github.com/react-native-community/react-native-linear-gradient
La instalaci贸n se la realiza de manera similar a otros componentes, as铆 que no hablar茅 de esa parte.
Veamos ahora un poco de la implementaci贸n:
<LinearGradient
start={{x: 0, y: 0}}
end={{x: 0, y: 1}}
colors={[styles.gradiente.color1, styles.gradiente.color2]}
style={{styles.gradiente}}
></LinearGradient>Este componente tiene varias propiedades, pero las principales son: start, end y colors.
En start, le indicaremos las coordenadas de inicio con X, Y.
En end, le indicaremos las coordenadas de finalizaci贸n con X, Y.
Y colors, le enviaremos un arreglo con los colores que llevar铆a nuestro degradado.
Para el caso del c贸digo del ejemplo usando un degradado de dos colores en forma vertical, adem谩s recordemos que podemos agregar cualquier estilo adicional por medio de la propiedad style.
