Проблема с открытием экрана с onPress в React Native

Question

У меня нет ошибок, но я все еще не могу открыть нужный экран. Вот мой элемент FlatList:

let categories = [ 
        {
            screenName : Player,
            name : "Category 1",
            img : require("../Assets/Slika.jpg"),
        },

Вот TouchableOpacity с onPress

return (
            <View style={styles.container}>
                <FlatList
                    data={categories}
                    showsHorizontalScrollIndicator={false}
                    numColumns={categories.length / 5}
                    showsVerticalScrollIndicator={false}
                    keyExtractor={(item, index) => index.toString()}
                    renderItem = {({item, index}) => {
                        return (
                        <TouchableOpacity onPress={() => item.screenName}>
                        <Surface style={styles.surface}>
                            <ImageBackground
                            source={item.img} 
                            style={styles.img}
                            blurRadius={0.5}>
                        <Icon name="music" color="#fff" size={22}/>
                        <Text style={styles.name}>{item.name}</Text>
                            </ImageBackground>
                        </Surface>
                        </TouchableOpacity>
                        );
                    }}
                />
            </View>

Answer 1

Вы должны использовать навигацию:

import { useNavigation } from '@react-navigation/native';
...
export default function ClassName() {
const navigation = useNavigation();

function navigateTO(pageName) {
 navigation.navigate(pageName);
}
<TouchableOpacity onPress={navigateTO(item.screenName})>