Filter by Category Using Button or Touchableopacity

Here we’re providing a list of solutions to implement category filtering in React Native, ordered by best practices and common use cases.

Solution 1:

Using a functional component with useState and filter method (Recommended for modern apps):

import React, { useState } from 'react';
import { View, TouchableOpacity, Text, FlatList, StyleSheet } from 'react-native';

const CategoryFilter = () => {
 const [selectedCategory, setSelectedCategory] = useState('all');
 const categories = ['all', 'electronics', 'clothing', 'books'];
 const items = [
   { id: 1, name: 'iPhone', category: 'electronics' },
   { id: 2, name: 'T-shirt', category: 'clothing' },
   { id: 3, name: 'Novel', category: 'books' },
 ];

 const filteredItems = selectedCategory === 'all'
   ? items
   : items.filter(item => item.category === selectedCategory);
 return (
   
     
       {categories.map(category => (
          setSelectedCategory(category)}
         >
           {category}
         
       ))}
     
      item.id.toString()}
       renderItem={({ item }) => (
         
           {item.name}
         
       )}
     />
   
 );
};

export default CategoryFilter;

This is the recommended modern approach using functional components and hooks. It provides:
– Clean and maintainable code structure
– Efficient state management with useState
– Reusable components
– Easy to extend with additional features

Solution 2:

Using a class component with multiple filter categories:

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

class CategoryFilter extends Component {
 state = {
   selectedCategories: {
     electronics: false,
     clothing: false,
     books: false,
   }
 };

 toggleCategory = (category) => {
   this.setState(prevState => ({
     selectedCategories: {
       ...prevState.selectedCategories,
       [category]: !prevState.selectedCategories[category]
     }
   }));
 };

 render() {
   const { selectedCategories } = this.state;
   const items = [
     { id: 1, name: 'iPhone', category: 'electronics' },
     { id: 2, name: 'T-shirt', category: 'clothing' },
     { id: 3, name: 'Novel', category: 'books' },
   ];

   const filteredItems = items.filter(item =>
     selectedCategories[item.category]
   );

   return (
     
       
         {Object.keys(selectedCategories).map(category => (
            this.toggleCategory(category)}
           >
             {category}
           
         ))}
       
        item.id.toString()}
         renderItem={({ item }) => (
           
             {item.name}
           
         )}
       />
     
   );
 }
}
export default CategoryFilter;

This approach uses class components and is useful when:
– Working with legacy code
– Need to maintain multiple filter states
– Require more complex state management
– Need to handle multiple selected categories

Solution 3:

Using a custom hook for reusable filtering logic:

import { useState } from 'react';

const useCategoryFilter = (items, categories) => {
 // Initialize selected category as 'all'
 const [selectedCategory, setSelectedCategory] = useState('all');

 // Filter items based on selected category
 const filteredItems = selectedCategory === 'all'
   ? items // Return all items if 'all' is selected
   : items.filter(item => item.category === selectedCategory);

 return {
   selectedCategory,
   setSelectedCategory,
   filteredItems
 };
};

export default useCategoryFilter;

This solution demonstrates:
– Custom hook for reusable filtering logic
– Separation of concerns
– Easy to test and maintain
– Can be shared across components

Conclusion:

When implementing category filtering in React Native, consider these key points:

• Use functional components with hooks for modern React Native apps
• Consider using custom hooks for reusable filtering logic
• Implement proper state management for selected categories
• Use FlatList for efficient list rendering
• Style your filter buttons for a good user experience
• Handle edge cases like ‘all’ category or no items

Also Read:

React Native Offline Support