AnimatedGroupImages 🌠

AnimatedGroupImages es un componente atómico que representa un grupo de botones animados, cada uno con soporte para contenido de texto, imágenes, o fracciones matemáticas visualizadas. Este componente organiza los botones en secciones, permitiendo mostrar un conjunto de respuestas con interactividad y animaciones.

Características

AnimatedGroupImages extiende las funcionalidades de un grupo de botones con animaciones y opciones de personalización avanzadas. Este componente ofrece:

Organización en Secciones: Divide el grupo de respuestas en secciones, con hasta dos elementos por sección, ajustando la disposición de los botones para una mejor visualización.
Animaciones de Escala: Cada botón dentro del grupo tiene una animación de escala independiente, que se activa según la interacción del usuario, dándole un efecto visual atractivo.
Soporte para Fracciones: Cada botón puede mostrar una fracción con numerador y denominador de forma visual, ideal para aplicaciones educativas.
Indicador de Corrección/Incorrecto: Incluye un indicador visual opcional que muestra si la respuesta seleccionada es correcta o incorrecta, facilitando el feedback inmediato.
Soporte para Imágenes de Fondo: Permite definir imágenes de fondo en cada botón, seleccionando dinámicamente entre un conjunto de imágenes proporcionado.
Personalización de Estilos:
- Estilos de Texto: Permite personalizar el tamaño y color del texto de cada botón individualmente.
- Estilos del Contenedor: Flexibilidad en el ajuste del contenedor del grupo de botones para adaptarse a diferentes layouts.

Props 📜

Prop	Tipo	Descripción
`answers`	`{ item: string; image?: any }[]`	Arreglo de objetos que contiene los elementos de respuesta. Cada objeto puede incluir un `item` (texto o fracción) y una `image`.
`isCorrectIndex`	`number or null`	Índice de la respuesta correcta, usado para indicar visualmente si una respuesta es correcta o incorrecta.
`isCorrect`	`boolean`	Indica si la selección actual es correcta (`true`) o incorrecta (`false`).
`correctIndex`	`number`	Índice de la respuesta correcta, utilizado para activar el indicador de corrección en el botón correspondiente.
`checkAnswer`	`(index: number) => void`	Función de callback que se ejecuta al seleccionar un botón de respuesta, pasando el índice del botón como argumento.
`isfraction`	`boolean`	Controla si el contenido de cada botón se muestra como fracción (`true`) o como texto (`false`).
`arrayImages`	`any[]`	Arreglo de imágenes para fondo de los botones; se elige aleatoriamente una imagen del arreglo para cada botón si no tiene imagen propia.
`textStyle`	`StyleProp<TextStyle>`	Estilos personalizados para el texto dentro de cada botón, ajustando fuente, color, etc.
`containerStyles`	`StyleProp<ViewStyle>`	Estilos personalizados para el contenedor de cada botón, permitiendo ajustes de tamaño, padding, etc.
`correctStyles`	`StyleProp<ImageStyle>`	Estilos personalizados para el ícono que indica si la respuesta es correcta o incorrecta.

Codigo de ejemplo 🕹️

Native Versión 📱: FractionMeteorsChoice

<AnimatedGroupImages
  answers={answers.map((answer, index) => ({
    item:
      typeof answer === "string"
        ? answer
        : typeof answer === "object" &&
          answer.numerator !== undefined &&
          answer.denominator !== undefined
        ? answer
        : "",
    image:
      index === isCorrectIndex
        ? isCorrect
          ? asteroideCorrecto
          : asteroideIncorrecto
        : randomizedAsteroids[index % randomizedAsteroids.length],
  }))}
  isfraction
  checkAnswer={checkAnswer}
  correctStyles={{
    top: "10%",
    right: "10%",
  }}
  isCorrect={isCorrect}
  isCorrectIndex={isCorrectIndex}
  correctIndex={correctIndex}
  arrayImages={[...ASTEROIDS, asteroideCorrecto, asteroideIncorrecto]}
  containerStyles={{
    width: 130,
    margin: 10,
    height: 130,
    padding: 10,
  }}
  textStyle={{
    fontSize: 40,
    padding: 0,
    lineHeight: undefined,
  }}
/>

Web Versión 💻: FractionMeteorsChoice

<AnimatedGroupImages
  answers={answers.map((answer, index) => ({
    item:
      typeof answer === "string"
        ? answer
        : typeof answer === "object" &&
          answer.numerator !== undefined &&
          answer.denominator !== undefined
        ? answer
        : "",
    image:
      index === isCorrectIndex
        ? isCorrect === true
          ? asteroideCorrecto
          : isCorrect === false
          ? asteroideIncorrecto
          : randomizedAsteroids[index % randomizedAsteroids.length]
        : randomizedAsteroids[index % randomizedAsteroids.length],
  }))}
  isfraction
  checkAnswer={checkAnswer}
  isCorrect={isCorrect}
  isCorrectIndex={isCorrectIndex}
  correctIndex={correctIndex}
  arrayImages={[...ASTEROIDS, asteroideCorrecto, asteroideIncorrecto]}
  containerStyles={styles.containerStyles}
  correctStyles={{
    position: "absolute",
    bottom: 80,
    right: 7,
  }}
  textStyle={{
    fontSize: 40,
    padding: 0,
    lineHeight: undefined,
  }}
/>

Ejemplos de uso 🎨

Características​

Props 📜​

Codigo de ejemplo 🕹️​

Native Versión 📱: FractionMeteorsChoice​

Web Versión 💻: FractionMeteorsChoice​

Ejemplos de uso 🎨​