Skia es una popular biblioteca de gráficos 2D de código abierto utilizada por las principales plataformas como Google Chrome, Chrome OS, Android y Flutter como su motor gráfico por defecto. La biblioteca está patrocinada y gestionada por Google, mientras que el desarrollo está supervisado por el equipo de ingenieros de Skia.
Índice de contenido
1. ¿Qué es React Native Skia?
2. Instalación de React Native Skia
3. Uso de React Native Skia en una aplicación React Native
4. Añadir filtros a las imágenes en React Native Skia
5. Creación de una interfaz de usuario neumorphic con React Native Skia
6. Incorporación de glassmorphism con React Native Skia
7. Conclusión
¿Qué es React Native Skia?
Gracias a Shopify, William Candollin, Christian Falch, y todo el equipo de desarrollo detrás de react-native-skia, ahora podemos utilizar Skia en nuestras aplicaciones React Native para dibujar gráficos impresionantes y crear conceptos de interfaz de usuario de moda como Neumorphism y Glassmorphism.
NOTA: La librería está todavía en fase alfa y aún no está disponible en npm, por lo que aún no es completamente estable.
Instalación de React Native Skia
Vamos a empezar con la instalación de la librería en un proyecto React Native. Debido a que la biblioteca aún no está publicada en npm, tenemos que descargarla desde su repositorio de GitHub.
Empecemos por inicializar un nuevo proyecto react native.
Después de configurar nuestro proyecto, vamos a añadir React Native Skia.
Ejecuta lo siguiente en tu terminal:
O bien, si utiliza npm:
la última versión alfa es la 0.1.106, que es la que se utilizará en este tutorial.
NOTA: Cuando se publiquen nuevas versiones, es probable que haya algunos cambios y nuevas funciones.
Una vez descargado e instalado el paquete, tenemos que configurar el proyecto en nuestros proyectos nativos de iOS y Android.
En el caso de iOS, esto es bastante sencillo: sólo tenemos que instalar la dependencia de cocoa pods.
Utilice este comando para hacerlo:
Ahora, tenemos que reconstruir nuestro proyecto iOS para poder utilizar Skia en nuestros proyectos React Native iOS.
Construye el proyecto desde la terminal o directamente desde Xcode:
Configurar nuestro proyecto en Android puede ser un poco complejo si no estás familiarizado con el entorno. Dado que la mayor parte de la lógica de renderizado gráfico de React Native Skia está escrita en C++, necesitaremos algo conocido como NDK (Android Native Development Kit) para la comunicación entre el código Java y el código C++.
"El kit de desarrollo nativo (NDK) es un conjunto de herramientas que permite utilizar código C y C++ con Android" - Documentación de Android
Para instalar el NDK de Android, puedes seguir estos pasos desde los documentos oficiales de Android. Ahora que se ha configurado nuestra biblioteca tanto en iOS como en Android, podemos empezar a crear una bonita interfaz de usuario y gráficos.
Uso de React Native Skia en una aplicación React Native
React Native Skia ofrece dos tipos de API para dibujar gráficos:
- Una API declarativa, que utiliza el renderizador por defecto de React Native.
- Una API imperativa que funciona con JSI (interfaz de JavaScript)
React Native JSI es un cambio central en la re-arquitectura de React Native. Se trata de una capa que ofrece comunicación "sincrónica" entre JavaScript y el código nativo. Reemplazará el puente de React Native por defecto. (Fuente)
La API declarativa es similar a la forma en que actualmente creamos UI en React Native utilizando la sintaxis JSX. Si queremos crear una forma rectangular con esquinas redondeadas, entonces la sintaxis para ello se verá así:
La salida del código anterior será:
Los propietarios de la biblioteca prefieren que los usuarios utilicen la API declarativa, ya que es fácil de usar y el código es legible. Esto es lo que se ha hecho en el código anterior. En primer lugar, necesitábamos un lienzo para dibujar gráficos, así que envolvimos nuestros componentes con un componente Canvas y le dimos un estilo de flex:1 para que ocupe todo el espacio de la pantalla. Luego, usamos el componente Fill para llenar nuestro Canvas con el color #222.
También declaramos una variable center, que es un vector con dos claves, X e Y. Finalmente, para dibujar nuestra forma de Rectangule con esquinas redondeadas, usamos el componente RoundedRect y le damos los siguientes props:
- Altura: 180, para dar al rectángulo una altura de 180 píxeles
- Ancho: 300, para dar al rectángulo un ancho de 300 píxeles
- X = centro.x: 150 que es la posición del rectángulo desde el eje X. En React Native Skia, las posiciones X e Y parten de la sección superior izquierda
- Y = center.y: 90, esta es la posición del rectángulo desde el eje Y
- color = #eee: da a nuestro rectángulo un color blanco
- rx = 12: da a nuestro rectángulo un radio de esquina de 12
Ahora, vamos a ver cómo podemos crear la misma interfaz de usuario utilizando la API imperativa, que tiene este aspecto:
La salida de lo anterior es idéntica a la creada por la API declarativa.
Aquí, creamos una SkiaView, que es esencialmente nuestro Canvas, y estamos usando su callback onDraw para definir qué dibujar en la vista. Luego, está el método onDraw, que utiliza el hook useDrawCallback y devuelve un callback memoizado. En la función, estamos inicializando Paint, y luego usando esa pintura como el color de nuestro rectángulo redondeado que dibujamos en el canvas.
Añadir filtros a las imágenes en React Native Skia
Ahora, vamos a ver cómo se puede mostrar una Image utilizando el componente de imagen de Skia, así como la forma de añadir filtros interesantes a la imagen en tiempo real.
Escribamos primero el código para mostrar la imagen.
En el código anterior, inicializamos la variable de image utilizando el hook useImage de react-native-skia.
Podemos usar este hook para inicializar activos de imagen locales con la ayuda de la función require helper, o también podemos usar imágenes remotas de la red, así:
Luego, envolvemos el componente Image de Skia en un Canvas y añadimos estilos a los componentes. La salida del código anterior será:
Ahora que nuestra imagen es visible, vamos a añadirle algunos filtros utilizando color matrix, que es una matriz (2D-Array) con valores para los colores RGBA. La sintaxis es algo así:
Para ello utilizaremos el componente de filtro ColorMatrix de React Native Skia.
En primer lugar, vamos a crear matrices para todos los filtros que vamos a utilizar:
También puede crear su propio color matrix personalizada, hay muchos campos de juego disponibles. Observe que hemos creado un objeto con siete claves, cada una de las cuales apunta a un valor de ColorMatrix.
Después de añadir algo de código para manejar nuestra UI, el código final para esto será:
La salida del código anterior en iOS y Android son:
Ya está. Ahora hemos añadido filtros a nuestras imágenes en React Native.
Creación de una interfaz de usuario neumorphic con React Native Skia
Con Skia, podemos crear UI neumorphic en React Native. React Native Skia proporciona un componente DropShadow para crear sombras, de forma similar a como lo haríamos en las aplicaciones web para crear un patrón de diseño neumorphic.
A continuación se muestra el código para crear una lista neumorphic:
Arriba, estamos mapeando a través de un array de datos aleatorios, y, para cada elemento, estamos renderizando un componente NeumorphicCard. También estamos usando el hook useFont para cargar fuentes personalizadas.
En el componente de la tarjeta, tenemos un RoundedRect con un borde de 1 unidad, que hemos creado utilizando Paint con el estilo de stoke. A continuación, hemos añadido dos componentes DropShadow para crear una sombra en la parte superior izquierda e inferior derecha del rectángulo.
Aquí está la salida del código anterior en iOS y Android:
Interfaz:
Incorporación de glassmorphism con React Native Skia
Por último, vamos a crear un diseño inspirado en glassmorphism en nuestra aplicación React Native. Para crear este diseño glassmorphic, necesitaremos el componente BackDropBlur. Crearemos un RoundedRect, y luego daremos al fondo un desenfoque utilizando el componente BackDropBlur. También veremos cómo podemos animar los gráficos.
Escriba el siguiente código para crear una tarjeta animada glassmorphic:
El resultado será el siguiente:
Conclusión
Ahora ya has visto lo potente que es React Native Skia, cambiará la forma de crear UI en React Native. Como la librería utiliza todo el potencial de la nueva arquitectura de React Native (JSI) y el nuevo renderizador, seguramente aumentará el rendimiento de nuestra aplicación React Native.
¡Gracias por llegar hasta aquí!