I have the following react native expo project code:

import React, { useEffect, useState } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, ActivityIndicator, FlatList } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { Icon } from 'react-native-elements';

const ProfileList = ({ navigation }) => {
  const [profiles, setProfiles] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchProfiles = async () => {
      try {
        const storedProfiles = await AsyncStorage.getItem('profiles');
        if (storedProfiles) {
          setProfiles(JSON.parse(storedProfiles));
          console.debug(storedProfiles);
        }
      } catch (error) {
        console.error('Failed to load profiles', error);
      } finally {
        setLoading(false);
      }
    };

    fetchProfiles();
  }, []);

  if (loading) {
    return (
      <View style={styles.loadingContainer}>
        <ActivityIndicator size="large" color="#2196f3" />
      </View>
    );
  }

  return (
    <View style={styles.container}>
      <View style={styles.mainContent}>
        <Text style={styles.title}>What are you watching?</Text>
        <View style={styles.profileContainer}>
          <FlatList
            data={profiles}
            renderItem={({ item }) => (
              <TouchableOpacity
                style={styles.profile}
                onPress={() => alert(`Selected profile: ${item.profileName}`)}
              >
                <View style={styles.profileIcon}>
                  <Icon name={item.selectedIcon} type="ionicon" color="#2196f3" size={80} />
                </View>
                <Text style={styles.profileName}>{item.profileName}</Text>
              </TouchableOpacity>
            )}
            keyExtractor={(item) => item.profileName}
            horizontal
            showsHorizontalScrollIndicator={false}
          />
        </View>
        <TouchableOpacity
          style={styles.editButton}
        >
          <Text style={styles.editButtonText}>Edit Profiles</Text>
        </TouchableOpacity>
      </View>
      <View style={styles.bottomButtons}>
        <TouchableOpacity style={styles.discordButton}>
          <Icon name="discord" type="font-awesome-5" color="#2196f3" size={24} />
        </TouchableOpacity>
        <TouchableOpacity style={styles.addButton}>
          <Icon name="add-outline" type="ionicon" color="#2196f3" size={24} />
        </TouchableOpacity>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'black',
  },
  mainContent: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  loadingContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'black',
  },
  title: {
    color: 'white',
    fontSize: 32,
    fontWeight: 'bold',
    textAlign: 'center',
    marginBottom: 20,
  },
  profileContainer: {
    flexDirection: 'row',
    justifyContent: 'center',
    marginBottom: 20,
  },
  profile: {
    alignItems: 'center',
    margin: 10,
    padding: 10,
  },
  profileIcon: {
    backgroundColor: 'black',
    borderRadius: 80,
    padding: 15,
    borderWidth: 2,
    borderColor: 'white',
  },
  profileName: {
    color: 'white',
    marginTop: 10,
    textAlign: 'center',
  },
  editButton: {
    backgroundColor: '#2196f3',
    borderRadius: 20,
    paddingVertical: 10,
    paddingHorizontal: 20,
    alignSelf: 'center',
  },
  editButtonText: {
    color: 'white',
    fontSize: 16,
  },
  bottomButtons: {
    position: 'absolute',
    flexDirection: 'row',
    justifyContent: 'space-between',
    width: '100%',
    paddingHorizontal: 20,
    bottom: 20,
  },
  discordButton: {
    backgroundColor: 'white',
    borderRadius: 30,
    padding: 15,
  },
  addButton: {
    backgroundColor: 'white',
    borderRadius: 30,
    padding: 15,
  },
});

export default ProfileList;

This page is used to load user profiles. I am using an apple tv emulator and when I try to navigate from the ‘Edit Profiles’ button to the discord button for example, it just doesn’t work. When I press the down button on my remote, it does not go anywhere. The same applies for when I try to navigate from the discord or add button to the ‘Edit Profiles’ button. I was hoping if someone could help me out a little bit.

This is how it looks inside the emulator: