Expo react native Flatlist with onClick action

ghz 8months ago ⋅ 82 views

I am new to React Native. I am trying to build an app which has categories as items from a flat list

the categories are Service, Review, About, Specialist (The display like this on the app without commas)

My goal is, when the app is opened and I navigate to the Details Screen, contents under the category "Service" should appear and the Category "Service" should have an underline underneath it.

When I click on "Review" the screen should show contents of "Review" category.

Below is the simple code I have but stuck. I AM STILL LEARNING

<View>
      <FlatList
        data={myData}
        horizontal={true}
        showsHorizontalScrollIndicator={false}
        renderItem={({ item, index }) => (
          <View>
            <TouchableOpacity>
              <Text style={styles.nameText}>{item.name}</Text>
            </TouchableOpacity>
            <View>
                <Text>{item?.description}</Text>
            </View>
          </View>
        )}
      />
    </View>

Answers

To achieve your goal, you can use state to keep track of the selected category and conditionally render the contents based on the selected category. You can also style the selected category differently, for example, by adding an underline.

Here's how you can modify your code to achieve this:

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

const myData = [
  { name: 'Service', description: 'Description for Service category' },
  { name: 'Review', description: 'Description for Review category' },
  { name: 'About', description: 'Description for About category' },
  { name: 'Specialist', description: 'Description for Specialist category' },
];

const DetailsScreen = () => {
  const [selectedCategory, setSelectedCategory] = useState('Service');

  return (
    <View>
      <FlatList
        data={myData}
        horizontal={true}
        showsHorizontalScrollIndicator={false}
        renderItem={({ item, index }) => (
          <View style={styles.categoryContainer}>
            <TouchableOpacity onPress={() => setSelectedCategory(item.name)}>
              <Text style={[styles.categoryText, selectedCategory === item.name && styles.selectedCategoryText]}>{item.name}</Text>
            </TouchableOpacity>
          </View>
        )}
      />
      <View>
        <Text>{myData.find(category => category.name === selectedCategory)?.description}</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  categoryContainer: {
    marginRight: 20, // Adjust spacing between categories
  },
  categoryText: {
    fontSize: 16,
  },
  selectedCategoryText: {
    textDecorationLine: 'underline',
  },
});

export default DetailsScreen;

In this code:

  • We use state (selectedCategory) to keep track of the selected category.
  • We conditionally render the Text component for each category with a different style (selectedCategoryText) if it matches the selected category.
  • When a category is pressed, we update the selectedCategory state to reflect the new selection.
  • We use find to get the description of the selected category and render it below the category list.
#react-native