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: