flatlist

El componente flatlist es ideal para mostrar listas largas de datos de forma eficiente. Diseñado para manejar grandes volúmenes de datos, flatlist renderiza solo los elementos visibles y algunos adicionales para optimizar el rendimiento de la aplicación. Esto lo convierte en una opción perfecta cuando necesitas mostrar listas de datos dinámicos, como productos, mensajes, o cualquier otro tipo de contenido que requiera desplazamiento. Solo puede contener un único listitem que se repetirá por cada valor del array de data. Dentro del listitem se podrá acceder a cada elemento del array por medio de la prop item.

Props

`data`

El array de datos que se va a renderizar. Debe ser un array de JavaScript (JSON) convertido a String.

`style`

backgroundColor: hexadecimal con el color de fondo.
borderBottomColor: hexadecimal con el color del border inferior.
borderRadius: indica el radio de los borders
borderBottomEndRadius: indica el número de radio que se debe aplicar al borde inferior
borderBottomLeftRadius: indica el número de radio que se debe aplicar al borde inferior izquierdo
borderBottomRightRadius: indica el número de radio que se debe aplicar al borde inferior derecho
borderBottomWidth: indica el tamaño del borde inferior
borderWidth: indica el ancho del borde
borderColor: indica el color del border en hexadecimal
borderRightColor: indica el color del borde derecho
borderRightWidth: indica el ancgi del borde derecho
borderStyle: indica el tipo de borde. enum(‘solid’, ‘dotted’, ‘dashed’)
padding: indica la distancia entre el borde del box y los elementos contenidos.
paddingHorizontal: indica la distancia horizontal del box y los elementos contenidos.
paddingVertical: indica la distancia vertical del box y los elementos contenidos.
border: indica la distancia entre el box y los elementos al rededor
margin: margen

`key`

Función para generar claves únicas para cada elemento.

`horizontal`

boolean que indica si la lista es horizontal

`numColumns`

el número de columnas a utilizar cuando la lista está con horizoltal="false"

Example

Hidratación desde el server

<screen>
  <meta>
    <header>Flatlist Example</header>
  </meta>
  <body>
    <box>
      <flatlist
        data="[{'id': '1', 'name': 'Goku', 'image': 'https://dragonball-api.com/characters/goku_normal.webp', 'ki': '60.000.000', 'Affiliation': 'Z Fighter'}]"
        key="id"
        >
        <listitem>
          <box shadow="16">
            <image uri="{{item.image}}" />
            <text>Nomre: {{item.name}}</text>
            <text>Base KI: {{item.ki}}</text>
            <text>Affiliation: {{item.Affiliation}}</text>
          </box>
        </listitem>
      </flatlist>
    </box>
  </body>
</screen>

Example

Hidratación desde frontend

<screen scroll="true" paddingHorizontal="16">
  <meta>
    <header>Home</header>
  </meta>
  <body>
     <box style="padding:'10'; flexDirection:'row'; justifyContent:'space-between'">
      <text>Hidratar desde frontend</text>
      <action >
      <virtuallist id="personajes" key="{{item.id}}">
        <listitem>
          <box shadow="16">
            <image uri="{{item.image}}" />
            <text>{{item.name}}</text>
            <text>{{item.ki}}</text>
            <text>{{item.description}}</text>
          </box>
        </listitem>
      </virtuallist>
    </box>
  </body>
  <fetch uri="https://dragonball-api.com/api/characters" method="get" target="personajes" name="getCharacters" />
</screen>