Adding title text edit functionality to a react native flatlist

Issue

How do I add the title edit functionality to my code in the same way the ios voice memo app does it as seen in the picture below.

enter image description here

The code I have below renders a flatlist with three data titles (https://snack.expo.dev/leWOwbvd5?platform=web). What I need is that when the user touches the touchable opacity "file-edit" icon, the corresponding title to the left of the icon gets highlighted (the same way the voice ios memo app does it) and allows you to edit the title text. What I'm thinking is to have a function be called when the "file-edit" icon is pressed to handle what I just described: onPress={() => {edit_title()}}

I need help with defining the function edit_title().

import React from 'react';
import {SafeAreaView, View, FlatList, Text, TouchableOpacity} from 'react-native';
import { MaterialCommunityIcons } from '@expo/vector-icons'; 


const DATA = [
  {
    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
    title: 'recording 20',
  },
  {
    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
    title: 'recording 21',
  },
  {
    id: '58694a0f-3da1-471f-bd96-145571e29d72',
    title: 'recording 22',
  },
];

function renderItem({item}){
    return(
    <View style={{flexDirection: 'row'}}>
      <Text style={{ flex: 0, marginHorizontal: 10}}>{item.title}</Text>
      <TouchableOpacity style={{flex: 1}}>
        <MaterialCommunityIcons   name="file-edit" size={24} color="black"  />
      </TouchableOpacity>
    </View>
      

    )
  }

const App = () => {
  return (
    <SafeAreaView>
      <FlatList
        data={DATA}
        renderItem={renderItem}
        keyExtractor={item => item.id}
      />
    </SafeAreaView>
  );
};

export default App;

Solution

Following your own example, here is the solution:

import {useState} from 'react';
import {SafeAreaView, View, FlatList, Text, TouchableOpacity, TextInput} from 'react-native';
import { MaterialCommunityIcons } from '@expo/vector-icons'; 


const DATA = [
  {
    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
    title: 'recording 20',
  },
  {
    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
    title: 'recording 21',
  },
  {
    id: '58694a0f-3da1-471f-bd96-145571e29d72',
    title: 'recording 22',
  },
];

const EditableText = ({title,id, userData,setUserData}) => {
  const [isEditable, setIsEditable] = useState(0);
  const [inputValue, setInputValue] = useState(title);
  
  const changeDataTitle = () => {
    isEditable!==id ? setIsEditable(id) : setIsEditable(0);
    const dataToUpdate = userData.find(val=>val.id===id);
    newData = Object.assign(dataToUpdate,{title:inputValue});
    setUserData(userData.map(val=>val.id===id?newData:val));
  }

  return (
    <>
    {isEditable===id ? (
    <TextInput
        onChangeText={setInputValue}
        value={inputValue}
      />): (<Text style={{ flex: 0, marginHorizontal: 10}}>{title}</Text>)}
      <TouchableOpacity style={{flex: 1}} >
        <MaterialCommunityIcons  onPress={() => changeDataTitle()} name="file-edit" size={24} color="black"  />
      </TouchableOpacity>
    </>
  )
}

const renderItem = ({item},userData,setUserData) => {
  return(
  <View style={{flexDirection: 'row'}}>
    <EditableText title={item.title} id={item.id} userData={userData} setUserData={setUserData} />
  </View>
  )
}

const App = () => {
  const [userData, setUserData] = useState(DATA);
  return (
    <SafeAreaView>
      <FlatList
        data={userData}
        renderItem={(renderProps)=>renderItem(renderProps,userData,setUserData)}
        keyExtractor={item => item.id}
      />
    </SafeAreaView>
  );
};

export default App;

Answered By - Samil Abud