I'm trying to make a FlatList into a Button using React Native and Javascript, and I have no clue how to do it

Question

I'm trying to turn the elements under WordList below into buttons to click on so that when you click on them a recipe shows up, but I have absolutely 0 clue how to do that. Does anyone know how to?? I'm using a FlatList and React Navigation. I want each button to link out to a recipe for the food listed on the button.

App.js

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import WordList from './listOfRecipes.js';
import Home from './Home';
import Details from './Details';

const Stack = createNativeStackNavigator();

// export default function App() {
//   return (
//     <NavigationContainer>
//       <Stack.Navigator initialRouteName="Home">
//          <Stack.Screen name="Home" component={Home}  options={{ title: 'Words' }} />
//         <Stack.Screen name="Details" component={Details} />
//       </Stack.Navigator>
//     </NavigationContainer>
//   );
// }


export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={WordList}  options={{ title: 'Words' }}/>
      </Stack.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

listOfRecipes.js

import React, { useState, useEffect } from 'react';
import { Button, FlatList, StyleSheet, Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const WordList = ({ route, navigation }) => {
    //dataSource contains the data we want rendered as a list
    //the dataSource should contain a unique key for each item in the array
    const dataSource = [
      {key: '001', word: 'Good Old-Fashioned Pancakes', definition: 'Just like Grandma used to make! Warm and Fluffy Pancakes!'},
      {key: '002', word: 'Chocolate Croissants', definition: 'Amazing breakfast pastry to enjoy with a warm cup of coffee.'},
      {key: '003', word: 'Chicken Noodle Soup', definition: 'The comfort food of all comfort foods!'},
      {key: '004', word: 'Rice Pudding', definition: 'Sweet, delicious dessert'},
      {key: '005', word: 'Chicken Stir-Fry', definition: 'Warm, comforting, and delicious!'},
      {key: '006', word: 'Chocolate Chip Cookies', definition: 'This is the BEST chocolate chip cookie recipe you could have!'},
      {key: '007', word: 'Beef Bulgogi', definition: 'Savory, fresh dinner for everyone'},
      {key: '008', word: 'Pizzelles', definition: 'Classic winter cookie to enjoy the holidays!'},
      {key: '009', word: 'Mashed Potatoes', definition: 'Smooth and fluffy mashed potatoes'},
      {key: '0010',word: 'Thanksgiving Turkey', definition: 'Enjoy this turkey this Thankgiving with your whole family!'},
  ];    
      const [listData, setListData] = useState(dataSource);
      
      useEffect(() => {
        if (route.params) {
            //can declare route.params like this (object destructuring)
            //const { newWord, newDefinition } = route.params;
            //or can declare like this
            const myParams = route.params;
          setListData([...listData, {key:12, word: myParams.newWord, definition: myParams.newDefinition}]);
        }
      }, [route.params]);
  
      //the renderItem prop takes a function. The function has a parameter which
      //is an item in the data source. Place the item in a component to display the item.

      const [updateList, setUpdateList] = useState(false);
    return (
      <View style={styles.container}>
        <FlatList
          data={listData}
          extraData={listData}
          renderItem={({item}) => 
          <View style={styles.border}>
            <Text style={styles.itemName}>{item.word}</Text>
            <Text style={styles.itemDesc}>{item.definition}</Text>
          </View>
        }/>
    </View>
  );
}

const styles = StyleSheet.create({
    container: {
     flex: 1,
     paddingTop: 50,
     paddingBottom: 50,
    },
    itemName: {
      padding: 10,
      fontSize: 18,
      height: 44,
    },
    itemDesc: {
        padding: 10,
        fontSize: 10,
        height: 44,
      },
      border: {
        borderWidth: 1,
        borderColor: "gray",
      },
  });
  

export default WordList;

Answer 1

Wrap item with TouchableHighlight or something similar.

<FlatList
  ...
  renderItem={({ item, index, separators }) => (
    <TouchableHighlight
      onPress={() => this._onPress(item)}>
      ...
    </TouchableHighlight>
  )}
/>