React native Question posted in
The official React Native documentation can be found here.

React native – Same content displayed on multiple pages

I’m working on a React Native project using Expo Router, and I’ve encountered an issue where the same content from my notifications.tsx page is appearing on multiple other pages like accountPrivacy.tsx, security.tsx, and appPermissions.tsx.

Each page should have its own unique content, but instead, I’m seeing the Notifications page content across all these pages. Below is the relevant code:

_layout.tsx

import { Stack } from "expo-router";

export default function Layout() {
    return (
        <Stack screenOptions={{ headerShown: false }}>
            <Stack.Screen name="userSettings" options={{ headerShown: false }} />
            <Stack.Screen name="notifications" options={{ headerShown: false }} />
            <Stack.Screen name="accountPrivacy" options={{ headerShown: false }} />
            <Stack.Screen name="security" options={{ headerShown: false }} />
            <Stack.Screen name="dataManagement" options={{ headerShown: false }} />
            <Stack.Screen name="appPermissions" options={{ headerShown: false }} />
        </Stack>
    );
}

notifications.tsx

import { Ionicons } from "@expo/vector-icons";
import { router } from "expo-router";
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";

export default function notifications() {
    const settingsPage = () => {
        router.push("/settings/userSettings");
    };

    return (
        <View style={styles.container}>
            <View style={styles.navigationBar}>
                <TouchableOpacity onPress={settingsPage} style={styles.backButton}>
                    <Ionicons name="chevron-back" size={30} color="#fff" />
                </TouchableOpacity>
            </View>
            <Text>Hello from Notifications.</Text>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#000',
        marginTop: 20
    },
    backButton: {
        position: 'absolute',
        left: 15,
        justifyContent: 'center',
        height: '100%',
    },
    navigationBar: {
        width: '100%',
        height: 60,
        backgroundColor: '#000',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        marginBottom: 10,
    }
});

accountPrivacy.tsx, security.tsx, dataManagement.tsx, appPermissions.tsx:
Each of these files is structured similarly to notifications.tsx but should have its own content. However, the content from notifications.tsx is showing up instead.

I’ve checked my layout configuration, and everything seems correct. What could be causing this issue, and how can I ensure each page displays the correct content?

Tags:

2

Answers


  1. 0

    It might be you are not using component in Stack.Screen.

    import { Stack } from "expo-router";
import Settings from "../pages/settings";

export default function Layout() {
    return (
        <Stack screenOptions={{ headerShown: false }}>
            <Stack.Screen name="userSettings" component={Settings} options={{ headerShown: false }} />
        </Stack>
    );
}
    Login or Signup to reply.
  2. 0

    There maybe some issue with you folder structure where you have placed all your pages components.

    But you can probably resolve this by dynamically importing the screens as shown below:

    <Stack.Screen
 name="notifications"
 options={{ headerShown: false }}
 component={() => require('./pages/notifications').default}
 />

<Stack.Screen
 name="accountPrivacy"
 options={{ headerShown: false }}
 component={() => require('./pages/accountPrivacy').default}
 />
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search