Render images from a category in React-Native

Question

I’m starting in React-On and I’m trying to make an application to divide images into categories, I wanted to click on an image and so it rendered on screen all images that belonged to that category but none of the methods I tried worked.

My idea is to store the images locally and to make this division by categories - when clicking on an image referring to category render on the screen all the images referring to that category

Data.js file

const data = [{
    id: '0',
    nome: 'Categoria 1',
    source: require('./data/1.jpg'),
    imagens: [{
        id: '1',
        nome: 'imagem 2',
        source: require('./data/2.jpg')
      },
      {
        id: '2',
        nome: 'imagem 3',
        source: require('./data/3.jpg')
      },
    ]
  },
  {
    id: '3',
    nome: 'Categoria 2',
    source: require('./data/4.jpeg')
  },
]

export default data

index.js file

import React, { Component } from 'react';
import { View, Text, Image, StyleSheet, FlatList, TouchableOpacity  } from 'react-native';
import data from './data'

export default class App extends Component{


    renderItem(obj){
      return(
        <>
        <TouchableOpacity>
          <Image style={styles.image} source = {obj.item.source} />
          <Text>{obj.item.nome}</Text>
        </TouchableOpacity>
        </>
      );

    }

  render(){
    return(
      <View>
        <FlatList 
        data={data}
        renderItem={this.renderItem}
        />
      </View>
    );
  }
}


const styles = StyleSheet.create({
  image: {
    height: 100,
    width:100,
  }
});

I wanted, for example, when I clicked on the image of Category 1 he showed on the screen the Image 1 and the Image 2

If anyone can help me, I’d be grateful

Answer 1

I believe that using state will solve your problem.

import React, { Component } from 'react';
import { View, Text, Image, StyleSheet, FlatList, TouchableOpacity  } from 'react-native';
import data from './data'

export default class App extends Component{

    constructor(props) {
        super(props);
        
        // a mágica acontece aqui
        this.state = {
            imagensCategoria = [];
        }
    }

    // Ao clicar na imagem principal da imagensCategoria
    // essa função recebe o array de imagens que pertence a ela.
    selecionarCategoria(imagens) {

        // aqui você está dizendo que o array imagensCategoria recebe as imagens
        // da categoria selecionada
        this.setState({
            imagensCategoria: imagens;
        });
    }

    renderItem(obj){
      return(
        <TouchableOpacity onPress={() => this.selecionarCategoria(obj.imagens)}>
          <Image style={styles.image} source = {obj.item.source} />
          <Text>{obj.item.nome}</Text>
        </TouchableOpacity>
        </>
      );
    }

    render(){
        return(
            <View>
                <FlatList 
                    data={data}
                    renderItem={this.renderItem}
                />

                // AQUI, você renderiza as imagens.
                // No caso, coloque no lugar do código que fique melhor para o seu layout
                <FlatList
                    data={this.state.imagensCategoria}
                    renderItem={/*função para renderizar as imagens que você quer*/}
                />
            </View>
        );
    }
}


const styles = StyleSheet.create({
  image: {
    height: 100,
    width:100,
  }
});