I see you’re facing an issue.

From what I can tell, the problem seems to be that you’re not rendering the data stored in the state correctly. Additionally, I noticed that you’re using an array for name, email, and phone, but these should be individual states since they hold single values, not arrays.

You should create separate states for name, email, and phone (as strings), and another state to hold the entire contact list. I’ve also tried to solve your problem by making these changes and added some styling for better visibility.

Here’s an updated version of your code:

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

const AddContactOne = () => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [phone, setPhone] = useState('');
  const [contacts, setContacts] = useState([]);

  const [modalVisible, setModalVisible] = useState(false);
  const toggleModal = () => {
    setModalVisible(!modalVisible);
  };

  const addContact = () => {
    const contact = {
      name: name,
      email: email,
      phone: phone,
    };
    setContacts([...contacts, contact]);
    setName('');
    setEmail('');
    setPhone('');
    toggleModal();
  };

  return (
    <View style={styles.container}>
      <Text style={styles.txt1}>Contact List</Text>
      {contacts.map((contact, index) => (
        <View
          key={index}
          style={{
            width: '100%',
            marginTop: 10,
            padding: 10,
            borderWidth: 1,
          }}>
          <Text style={styles.txt}>{contact.name}</Text>
          <Text style={styles.txt}>{contact.email}</Text>
          <Text style={styles.txt}>{contact.phone}</Text>
        </View>
      ))}
      <TouchableOpacity
        onPress={toggleModal}
        style={{
          height: 50,
          width: 50,
          backgroundColor: 'white',
          position: 'absolute',
          bottom: 30,
          right: 30,
          borderRadius: 30,
          shadowColor: 'black',
          elevation: 8,
          alignItems: 'center',
          justifyContent: 'center',
        }}>
        <Image
          source={{
            uri: 'https://cdn-icons-png.flaticon.com/128/748/748113.png',
          }}
          style={{
            height: 30,
            width: 30,
          }}
        />
        <Modal
          animationType="slide"
          transparent={true}
          visible={modalVisible}
          onRequestClose={toggleModal}>
          <View
            style={{
              height: 320,
              width: '85%',
              borderRadius: 10,
              alignSelf: 'center',
              alignContent: 'center',
              justifyContent: 'center',
              marginTop: 150,
              backgroundColor: 'blue',
            }}>
            <Text style={styles.txt2}>Add Contact</Text>
            <TextInput
              value={name}
              placeholder={'Enter Name'}
              placeholderTextColor={'white'}
              marginTop={10}
              onChangeText={setName}
            />
            <TextInput
              value={email}
              placeholder={'Enter Email'}
              placeholderTextColor={'white'}
              marginTop={10}
              onChangeText={setEmail}
            />
            <TextInput
              value={phone}
              placeholder={'Enter Phone Number'}
              placeholderTextColor={'white'}
              marginTop={10}
              onChangeText={setPhone}
            />
            <TouchableOpacity
              style={{
                backgroundColor: 'white',
                alignItems: 'center',
                justifyContent: 'center',
                height: 50,
                margin: 20,
                borderRadius: 10,
              }}
              onPress={addContact}>
              <Text
                style={{
                  color: 'black',
                  fontSize: 20,
                }}>
                Submit
              </Text>
            </TouchableOpacity>
          </View>
        </Modal>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    backgroundColor: 'white',
    alignContent: 'center',
    alignItems: 'center',
    marginTop: 20,
    paddingHorizontal: 20,
  },
  txt1: {
    fontSize: 25,
    fontWeight: '400',
    color: 'black',
  },
  txt2: {
    fontSize: 20,
    fontWeight: '350',
    textAlign: 'center',
    marginBottom: 6,
  },
  txt: {
    fontSize: 20,
    fontWeight: '400',
    color: 'black',
  },
});

const App = () => {
  return <AddContactOne />;
};

export default App;