- Breaking up the profile

app/components/Profile/ProfileInputs/PhoneListItem.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Button } from 'react-native-elements';
+import { Alert, Text, View } from 'react-native';
+
+import styles from '../Profile.styles.js';
+
+export default function PhoneListItem({
+    hideDelete,
+    index,
+    label,
+    number,
+    handleDelete,
+    handleEdit,
+    handleEditStart,
+}) {
+
+    const _onLongPressDelete = () => {
+        handleDelete(index);
+    };
+
+    const _onPressDelete = (isLongPress = false) => () => {
+        if (isLongPress) {
+            handleDelete(index);
+            return;
+        }
+
+        Alert.alert(
+            'Delete this number?',
+            'Are you sure you want to delete this number?',
+            [
+                { text: 'Cancel', style: 'cancel' },
+                { text: 'OK', onPress: () => handleDelete(index) },
+            ],
+            { cancelable: true },
+        );
+    };
+
+    return (
+        <View style={styles.listItem}>
+            <View style={styles.listValue}>
+                <Text style={styles.value}>{number}</Text>
+                <Text style={styles.label}>{label}</Text>
+            </View>
+            <View style={styles.listActions}>
+                {handleEdit !== null && <Button accessibilityLabel={`Edit`} onPress={() => handleEditStart()} />}
+                {!hideDelete && (
+                    <Button
+                        accessibilityLabel={`Delete`}
+                        onLongPress={_onPressDelete(true)}
+                        onPress={_onPressDelete()}
+                    />
+                )}
+            </View>
+        </View>
+    );
+}
+
+PhoneListItem.propTypes = {
+    hideDelete: PropTypes.bool,
+    index: PropTypes.number.isRequired,
+    label: PropTypes.string.isRequired,
+    number: PropTypes.string.isRequired,
+    handleDelete: PropTypes.func.isRequired,
+    handleEdit: PropTypes.func,
+    handleEditStart: PropTypes.func.isRequired,
+};
+
+PhoneListItem.defaultProps = {
+    hideDelete: false,
+    handleEdit: null,
+};
+
+
+