I'm not able to navigate to a screen-CodePudding

Home.js this is the code for my Home.js screen

import React from "react";
import { StyleSheet, Text, View, Image, FlatList, TouchableOpacity, ImageBackground } from "react-native";
import colors from "../assets/Colors/colors";
import { ScrollView } from "react-native";
import { Entypo } from '@expo/vector-icons';
import activitiesData from "../assets/Data/activitiesData";
import discoverCategoriesData from "../assets/Data/discoverCategoriesData";
import discoverData from "../assets/Data/discoverData";
import learnMoredata from "../assets/Data/learnMoredata";
import { SafeAreaView } from "react-native-safe-area-context";
import Profile from "../assets/Images/person.png";
import { MaterialIcons } from '@expo/vector-icons';
import Details from "./Details";
import {
    Lato_100Thin,
    Lato_100Thin_Italic,
    Lato_300Light,
    Lato_300Light_Italic,
    Lato_400Regular,
    Lato_400Regular_Italic,
    Lato_700Bold,
    Lato_700Bold_Italic,
    Lato_900Black,
    Lato_900Black_Italic
} from '@expo-google-fonts/lato';
import { useFonts } from "@expo-google-fonts/lato";
import AppLoading from "expo-app-loading";

const Home = ({ navigation }) => {
    const renderDiscoverItem = ({item}) => {
        return (
            <TouchableOpacity
                onPress={() =>
                    navigation.navigate("Details")
                }>
                <ImageBackground
                    source={item.image}
                    style={[
                        styles.disoverItem,
                        { marginLeft: item.id === "discover-1" ? 20 : 0 },
                    ]}
                    imageStyle={styles.disoverItemImage}
                >
                    <Text style={styles.discoverItemTitle}>{item.title}</Text>
                    <View style={styles.discoverItemLocationWrapper}>
                        <MaterialIcons name="location-pin" size={24} color="white" />
                        <Text style={styles.discoverItemLocationText}>{item.location}</Text>
                    </View>

                </ImageBackground>
            </TouchableOpacity>
        )
    }

Details.js this is the code for my Details.js screen

import React from "react";
import { Text, View } from "react-native";

const Details = () => {
    return (
        <View>
            <Text>
                Details
            </Text>
        </View>
    );
}

export default Details;

this is the code for my home and details screen I need to tap on the box then I should redirect on to the details screen

Look at this image can you help me resolve this issue fast I need to complete my project

CodePudding user response：

Use Latest React-naivation 5.0 easy to use and reduce errors.

CodePudding user response：

update this in your app.js

<NavigationContainer>
                    <AppStack.Navigator>
                        <AppStack.Screen name='Details' component={Details} />
                    </AppStack.Navigator>
    </NavigationContainer>