Untitled

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

const App = () => {
  const [textValue, setTextValue] = useState('');
  const [noteArray, setNoteArray] = useState([]);
  const [isActive, setIsActive] = useState(false);
  const [updateIndex, setUpdateIndex] = useState(null);

  const takeText = (event) => {
    setTextValue(event.target.value);
  };

  const saveNote = () => {
    if (isActive) {
      const updatedNoteArray = [...noteArray];
      updatedNoteArray[updateIndex] = textValue;
      setNoteArray(updatedNoteArray);
      setIsActive(false);
      setUpdateIndex(null);
    } else {
      setNoteArray([...noteArray, textValue]);
    }
    setTextValue('');
  };

  const deleteItem = (item) => {
    setNoteArray(noteArray.filter((text) => text !== item));
  };

  const updateItem = (item, index) => {
    setTextValue(item);
    setIsActive(true);
    setUpdateIndex(index);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.header}>Take Notes</Text>
      <View style={styles.row1}>
        <TextInput
          placeholder="Enter Note"
          value={textValue}
          name="textarea"
          onChange={takeText}
          style={styles.textInput}
        />
        <Button title={isActive ? "Update" : "Save"} onPress={saveNote} />
      </View>
      <View style={styles.row2}>
        <FlatList
          data={noteArray}
          renderItem={({ item, index }) => (
            <View style={styles.note}>
              <Text>{item}</Text>
              <View style={styles.buttons}>
                <Button title="Delete" onPress={() => deleteItem(item)} />
                <Button title="Update" onPress={() => updateItem(item, index)} />
              </View>
            </View>
          )}
          keyExtractor={(item, index) => index.toString()}
        />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  header: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 10,
  },
  row1: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 10,
  },
  textInput: {
    flex: 1,
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    paddingHorizontal: 10,
  },
  row2: {
    flex: 1,
  },
  note: {
    padding: 10,
    borderBottomWidth: 1,
    borderBottomColor: 'gray',
  },
  buttons: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
});

export default App;