{"id":13037,"date":"2025-08-01T12:21:05","date_gmt":"2025-08-01T12:21:05","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/qanda\/?p=13037"},"modified":"2025-08-01T12:21:32","modified_gmt":"2025-08-01T12:21:32","slug":"category-filter-with-touchableopacity","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/qanda\/react-native\/category-filter-with-touchableopacity","title":{"rendered":"Filter by Category Using Button or Touchableopacity"},"content":{"rendered":"

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

Solution 1:<\/h2>\n

Using a functional component with useState and filter method (Recommended for modern apps):<\/p>\n

\r\nimport React, { useState } from 'react';\r\nimport { View, TouchableOpacity, Text, FlatList, StyleSheet } from 'react-native';\r\n\r\nconst CategoryFilter = () => {\r\n const [selectedCategory, setSelectedCategory] = useState('all');\r\n const categories = ['all', 'electronics', 'clothing', 'books'];\r\n const items = [\r\n   { id: 1, name: 'iPhone', category: 'electronics' },\r\n   { id: 2, name: 'T-shirt', category: 'clothing' },\r\n   { id: 3, name: 'Novel', category: 'books' },\r\n ];\r\n\r\n const filteredItems = selectedCategory === 'all'\r\n   ? items\r\n   : items.filter(item => item.category === selectedCategory);\r\n return (\r\n   \r\n     \r\n       {categories.map(category => (\r\n          setSelectedCategory(category)}\r\n         >\r\n           {category}<\/Text>\r\n         <\/TouchableOpacity>\r\n       ))}\r\n     <\/View>\r\n      item.id.toString()}\r\n       renderItem={({ item }) => (\r\n         \r\n           {item.name}<\/Text>\r\n         <\/View>\r\n       )}\r\n     \/>\r\n   <\/View>\r\n );\r\n};\r\n\r\nexport default CategoryFilter;\r\n<\/pre>\n
This is the recommended modern approach using functional components and hooks. It provides:
\n– Clean and maintainable code structure
\n– Efficient state management with useState
\n– Reusable components
\n– Easy to extend with additional features<\/p>\n
Solution 2:<\/h2>\n
Using a class component with multiple filter categories:<\/p>\n
\r\nimport React, { Component } from 'react';\r\nimport { View, TouchableOpacity, Text, FlatList, StyleSheet } from 'react-native';\r\n\r\nclass CategoryFilter extends Component {\r\n state = {\r\n   selectedCategories: {\r\n     electronics: false,\r\n     clothing: false,\r\n     books: false,\r\n   }\r\n };\r\n\r\n toggleCategory = (category) => {\r\n   this.setState(prevState => ({\r\n     selectedCategories: {\r\n       ...prevState.selectedCategories,\r\n       [category]: !prevState.selectedCategories[category]\r\n     }\r\n   }));\r\n };\r\n\r\n render() {\r\n   const { selectedCategories } = this.state;\r\n   const items = [\r\n     { id: 1, name: 'iPhone', category: 'electronics' },\r\n     { id: 2, name: 'T-shirt', category: 'clothing' },\r\n     { id: 3, name: 'Novel', category: 'books' },\r\n   ];\r\n\r\n   const filteredItems = items.filter(item =>\r\n     selectedCategories[item.category]\r\n   );\r\n\r\n   return (\r\n     \r\n       \r\n         {Object.keys(selectedCategories).map(category => (\r\n            this.toggleCategory(category)}\r\n           >\r\n             {category}<\/Text>\r\n           <\/TouchableOpacity>\r\n         ))}\r\n       <\/View>\r\n        item.id.toString()}\r\n         renderItem={({ item }) => (\r\n           \r\n             {item.name}<\/Text>\r\n           <\/View>\r\n         )}\r\n       \/>\r\n     <\/View>\r\n   );\r\n }\r\n}\r\nexport default CategoryFilter;\r\n<\/pre>\n
This approach uses class components and is useful when:
\n– Working with legacy code
\n– Need to maintain multiple filter states
\n– Require more complex state management
\n– Need to handle multiple selected categories<\/p>\n
Solution 3:<\/h2>\n
Using a custom hook for reusable filtering logic:<\/p>\n
\r\nimport { useState } from 'react';\r\n\r\nconst useCategoryFilter = (items, categories) => {\r\n \/\/ Initialize selected category as 'all'\r\n const [selectedCategory, setSelectedCategory] = useState('all');\r\n\r\n \/\/ Filter items based on selected category\r\n const filteredItems = selectedCategory === 'all'\r\n   ? items \/\/ Return all items if 'all' is selected\r\n   : items.filter(item => item.category === selectedCategory);\r\n\r\n return {\r\n   selectedCategory,\r\n   setSelectedCategory,\r\n   filteredItems\r\n };\r\n};\r\n\r\nexport default useCategoryFilter;\r\n<\/pre>\n
This solution demonstrates:
\n– Custom hook for reusable filtering logic
\n– Separation of concerns
\n– Easy to test and maintain
\n– Can be shared across components<\/p>\n
Conclusion:<\/h2>\n
When implementing category filtering in React Native, consider these key points:<\/p>\n