Implementando la librería de Explorax

La libería es una herramienta bastante extensa hecha con el objetivo de mejorar la legibilidad y la accesibilidad de los muchos de los componentes de la aplicación. Por lo que es vital que como desarrolladores sepamos cómo utilizarla y cómo implementarla en explorax. En esta sección se explicará cómo en su momento se implementó la librería de Explorax en la aplicación. Y tips para su uso.

3DContainer (ThemedContainer) 🎨

El componente ThemedContainer es un contenedor personalizable que funciona de base a muchos de los componentes de la librería de Explorax. Este componente permite mostrar contenido interactivo con un estilo visual atractivo y dinámico, que se adapta a diferentes temas y estilos de la aplicación.

Pero dado que se puede usar para muchos componentes, es necesario entender cómo funciona y cómo se puede usar.

Implementación del ThemedContainer

1. Uso de los temas para definir estilos: La integración con el archivo themes.js se da principalmente a través de la prop colorCombination, que permite seleccionar un tema predefinido. El componente utiliza la función obtainThemesType para obtener los colores y estilos asociados a dicho tema.

   Ejemplo de cómo se obtiene el tema:

   const themes = colorCombination instanceof Object ? colorCombination : obtainThemesType(colorCombination);

   Aquí, si colorCombination es un objeto ThemeTemplate, se usa directamente. Si es un string que representa un tema predefinido, se llama a obtainThemesType para obtener el objeto de tema y usarlo.

   Si el tema que deseamos usar no está definido en themes.js, se puede crear un nuevo tema usando el objeto ThemeTemplate y agregarlo a themes.js o directamente usarlo en el componente.

   const tema: ThemeTemplate = {
     frontColor: "#000000",
     depthColor: "#000000",
     fontColor: "#000000",
     ...
   }

   💡Una tecnica usual al usar el componete y no se quiere que tenga todo el estilo del contenedor en general, o usar una imagen de fondo, es usar el tema "none". Este tema no aplica ningún estilo visual al contenedor y lo vuelve completamente transparente. Lo cual es bastante útil si quieres usar las demás propiedades del contenedor como showIndicator, onPress, etc.

2. Estilos dinámicos y animación: El componente utiliza animaciones, dado que internamente es un Animated.View. Usando el outerContainerStyles se puede aplicar animaciones a la vista. Que afecta a la vista principal del contenedor.

   Esto es bastante útil para crear animaciones de expansión y contracción, o para crear efectos de hover.

   Ejemplo de uso de outerContainerStyles:

   <ThemedContainer outerContainerStyles={{ transform: [{ scale: scaleAnim }] }}>

   Por defecto, el contenedor tiene un estilo de animación al momento de aparecer. Como un estilo de pop-up. Este estilo se puede desactivar usando el prop animated, seteandolo en false.

3. Colores del tema: El estilo del contenedor cambia dependiendo de si el usuario está presionando el contenedor o no. Los colores de fondo del contenedor se definen utilizando los colores frontColor y depthColor que se extraen del tema seleccionado.

   • Si el contenedor está presionado, usa el depthColor y otros estilos específicos.

   • Si no está presionado, usa el frontColor.

   💡Aunque es posible cambiar estos colores usando el estilo containerStyles y outerContainerStyles. Se recomienda cambiar esos estilos en formato de tema con el prop colorCombination, dado que es más fácil de mantener y más intuitivo.

4. Indicador de correcto/incorrecto: Si se habilita showIndicator, el componente mostrará un indicador visual (CorrectIncorrectIndicator) que dependerá de si isCorrect es true o false.

   {showIndicator && (
     <CorrectIncorrectIndicator isCorrect={isCorrect} indicatorStyles={indicatorStyle} />
   )}
   ``
   
   En muchas misiones se puede ver este componente usado para mostrar la respuesta correcta o incorrecta de una mision. Y muchas veces es necesario ajustar la posición del indicador, para que se se vea bien sobre el contenedor. 
   
   Para esto, se puede usar el estilo `indicatorStyles`, que permite ajustar la posición del indicador.
   

Bugs conocidos

• De momento solo se conoce un bug relacionado con el ThemedContainer. Y es que a pesar de estar en un contenedor con justifyContent: "center", no se centra. Para solucionar esto, se debe colocar en un View que contenga el ThemedContainer y centrarlo.

💡Sin embargo también se puede utilizar el estilo outerContainerStyles para centrar el contenedor de forma más sencilla. 🫠 La mayor recomendación para la vida, es verificar si le tenes que agregar un flex: 1 o quitarselo en los estilos.

Para más información sobre el componente, se puede ver la documentación del componente.

BaseButton 🔘

El componente BaseButton es un botón personalizable que funciona de base a muchos de los botones de la librería de Explorax. Este componente permite mostrar contenido interactivo con un estilo visual atractivo y dinámico, que se adapta a diferentes temas y estilos de la aplicación.

Este componente es bastante sencillo de usar, y se puede usar para crear botones personalizados para la aplicación.

💡En general, es un ThemedContainer especializado en botones. Por lo que las recomendaciones para usar el ThemedContainer, son las mismas para este componente.

Como tal tiene una animación extra incluida, que se activa al momento de presionar el botón. Y tiene entre los props elementos para agregar el texto del botón y un icono. Para rellenarlo en caso se vea necesario. Cada uno de estos elementos te permite modificar su estilo.

Para más información sobre el componente, se puede ver la documentación del componente.

Recomendaciones

• De momento cuando se implementó el componente. Lo que se encontró es que normalmente vas a tener que ajustar el brillo/estrellitas que salen del botón cuando tenes una respuesta correcta, especialmente en Native, que es donde las estrellitas se ven más pequeñitas. Para esto podes usar dos props, brilloStyle y lottieStyle. Que permiten modificar el estilo del lottie de las estrellitas y el de su contenedor.

SimpleChoiceButtonGroup 🔘

Este componente suele pasar bastante desapercibido, pero es bastante útil para crear grupos de botones de selección simple.

Imagina que queres crear una pantalla en que necesitas que el usuario elija una opción entre varias. Puede ser algo asi:

Lo cual es como una cuadrícula de botones para realizar la selección. Este componente se encarga de crear esa cuadrícula de manera automática. Y manejar de forma dinámica la selección de los botones. De forma que tu solo tengas que pasarle el tipo de botón que queres usar y un array con las opciones que queres mostrar. Y este se encarga de armar la cuadrícula y manejar la lógica de selección.

💡Este componente se puede usar para crear misiones de selección, como por ejemplo elegir una respuesta de una pregunta. Es ampliamente recomendado al momento de crear misiones de este estilo.

Para más información sobre el componente, se puede ver la documentación del componente.

💡Aunque lo usual es implementarlo a su vez que se usa el base button. Es posible implementarlo con un componente propio, ya que de esta forma es posible sacar mayor provecho de las ventajas que ofrece.