ContactList.js

import * as React from 'react';
import { Text, View, ScrollView, Button, StyleSheet } from 'react-native';

//let contacts = [...Array(10).keys()].map(i => {
//  return { id: i, name: "Eric " + i , phoneNumber: "000000000" + i }
//})

let contacts = [{ id: 1, name: "Eric", phoneNumber: "00000" }]

const stylesheets = StyleSheet.create({
  contactName: {
    fontSize: 19,
    fontWeight: 'bold'
  },
  contactPhoneNumber: {
    fontStyle: 'italic'
  }
})

const Contact = props => {
  return (
    <View>
      <Button title="delele" onPress={() => props.onDeletePress(props.person.id)} />
      <Text style={stylesheets.contactName}>{props.person.name}</Text>
      <Text style={stylesheets.contactPhoneNumber}>{props.person.phoneNumber}</Text>
    </View>
  );
}

class ContactList extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      contacts: props.contacts,
      showContacts: true
    }
  }
  
  toggleContacts = () => {
    this.setState((prevState) => { 
      return { ...prevState, showContacts: !this.state.showContacts };
    });
  }

  deleteContact = (id) => {
    this.setState((prevState) => {
      return {...prevState, contacts: [...prevState.contacts.filter(c => c.id != id)]}
    });
  }

  render() {
    return (
      <View>
        <Button title="Toggle" onPress={this.toggleContacts} />
        {this.state.showContacts && 
        <ScrollView>      
          {this.state.contacts.map(c => <Contact person={c} onDeletePress={this.deleteContact} />)}
        </ScrollView>
        }
      </View>
    )
  }
}

export default class App extends React.Component {
  render() {
    return (
      <ContactList contacts={contacts} />
    );
  }
}