Evento onPress en FlatGrid react-native-super-grid

Pedro Lara 16:44:00 No hay comentarios

Pedro Lara

Trabajar con Grid puede ser una ventaja ya que permite construir interfaz mas amigables. En ese sentido un grid muy usado en React Native es FlatGrid. Este grid permite diseñar pantallas bastantes decentes y con clares agradables los cuales puedes ajustar a tu preferencia.

En esta ocasión tengo un Screen creado con FlatGrid

Aquí un código de ejemplo:

import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import { FlatGrid } from 'react-native-super-grid';

export default function Example() {
  const [items, setItems] = React.useState([
    { name: 'TURQUOISE', code: '#1abc9c' },
    { name: 'EMERALD', code: '#2ecc71' },
    { name: 'PETER RIVER', code: '#3498db' },
    { name: 'AMETHYST', code: '#9b59b6' },
    { name: 'WET ASPHALT', code: '#34495e' },
    { name: 'GREEN SEA', code: '#16a085' },
    { name: 'NEPHRITIS', code: '#27ae60' },
    { name: 'BELIZE HOLE', code: '#2980b9' },
    { name: 'WISTERIA', code: '#8e44ad' },
    { name: 'MIDNIGHT BLUE', code: '#2c3e50' },
    { name: 'SUN FLOWER', code: '#f1c40f' },
    { name: 'CARROT', code: '#e67e22' },
    { name: 'ALIZARIN', code: '#e74c3c' },
    { name: 'CLOUDS', code: '#ecf0f1' },
    { name: 'CONCRETE', code: '#95a5a6' },
    { name: 'ORANGE', code: '#f39c12' },
    { name: 'PUMPKIN', code: '#d35400' },
    { name: 'POMEGRANATE', code: '#c0392b' },
    { name: 'SILVER', code: '#bdc3c7' },
    { name: 'ASBESTOS', code: '#7f8c8d' },
  ]);

  return (
    <FlatGrid
      itemDimension={130}
      data={items}
      style={styles.gridView}
      // staticDimension={300}
      // fixed
      spacing={10}
      renderItem={({ item }) => (
        <View style={[styles.itemContainer, { backgroundColor: item.code }]}>
          <Text style={styles.itemName}>{item.name}</Text>
          <Text style={styles.itemCode}>{item.code}</Text>
        </View>
      )}
    />
  );
}

const styles = StyleSheet.create({
  gridView: {
    marginTop: 10,
    flex: 1,
  },
  itemContainer: {
    justifyContent: 'flex-end',
    borderRadius: 5,
    padding: 10,
    height: 150,
  },
  itemName: {
    fontSize: 16,
    color: '#fff',
    fontWeight: '600',
  },
  itemCode: {
    fontWeight: '600',
    fontSize: 12,
    color: '#fff',
  },
});

Sin embargo, el problema es cuando deseamos agregar un evento onPress a cada una de las cuadrillas de este Grid. Si seguimos la practica tradicional, lo que haríamos seria colocar un TouchableOpacity

y dentro de este agregar un onPress. No obstante, si se hace de esta manera no va a funcionar. Po ejemplo, supongamos que deseamos navegar hacia otra pantalla al hacer un onPress dentro de una de las cuadrillas de nuestro Grid.

<TouchableOpacity
          onPress={()=>navigation.navigate('Search')}
        >

De esta manera no va a funcionar

¿ Cómo logramos agregar el evento onPreess, entonces ?

Para esto, debemos seguir algunos pasos extras, veamos:

Debemos crear una constante donde colocaremos los datos que deseamos renderizar dentro de cada cuadrilla.

  renderItem = ({ item, index }) => {
    return (
      <TouchableOpacity
      onPress={() =>       alert(
        'Haz seleccionado' + item.name
      )}
    >
    <View style={[styles.itemContainer, { backgroundColor: item.code }]}
    >
      <Text style={styles.itemName}
      >{item.name}</Text>
    </View>
    </TouchableOpacity>
    );
  };

Dentro del TouchableOpacity que hemos colocado en el interior de la función renderItem colocamos el evento onPress. Luego, sustituimos todo el código que tenemos dentro del parámetro renderItem por la llamada a nuestra función renderItem . Veamos:

Sustituimos esto:

renderItem={({ item }) => (
        <TouchableOpacity
          onPress={()=>navigation.navigate('Search')}
        >
        <View style={[styles.itemContainer, { backgroundColor: item.code }]}
        >
          <Text style={styles.itemName}
          >{item.name}</Text>
        </View>
        </TouchableOpacity>
      )}