OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How to move route files into route folders in React Native Expo

  • Thread starter Thread starter David Jentjens
  • Start date Start date
D

David Jentjens

Guest
I have a React native expo application. According to the official documentation, pretty much every file in the /app folder is supposed to be a route. So the file app/settings.tsx would map to the settings route.

This is the folder structure of my project:

folder structure of my project

In the _layout.tsx file, i have the following code:

Code:
import { Stack } from "expo-router";

export default function RootLayout() {
    return (
        <Stack initialRouteName="settings">
            <Stack.Screen name="settings" />
            <Stack.Screen name="index" options={{ headerShown: false }} />
        </Stack>
    );
}

And in the settings/index.tsx file, I have this code:

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

export default function Settings() {
    return (
        <View
            style={{
                flex: 1,
                justifyContent: "center",
                alignItems: "center",
            }}
        >
            <Text>Edit app/settings/index.tsx to edit this screen.</Text>
        </View>
    );
}

I want to be able to have a route inside a folder, so that I can keep related styles and other files organized within a route. According to the docs, this would be done using the following pattern: app/settings/index.tsx. This however, leads to an error when I try to load the routes in the stack, saying that the route does not exist.

enter image description here

What am I doing wrong here, and how can I fix it so that the route does appear? Thank you in advance for any help provided.
<p>I have a React native expo application. According to the <a href="https://docs.expo.dev/router/create-pages/" rel="nofollow noreferrer">official documentation</a>, pretty much every file in the /app folder is supposed to be a route. So the file app/settings.tsx would map to the settings route.</p>
<p>This is the folder structure of my project:</p>
<p><a href="https://i.sstatic.net/3G90OPKl.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/3G90OPKl.png" alt="folder structure of my project" /></a></p>
<p>In the _layout.tsx file, i have the following code:</p>
<pre><code>import { Stack } from "expo-router";

export default function RootLayout() {
return (
<Stack initialRouteName="settings">
<Stack.Screen name="settings" />
<Stack.Screen name="index" options={{ headerShown: false }} />
</Stack>
);
}
</code></pre>
<p>And in the settings/index.tsx file, I have this code:</p>
<pre><code>import { Text, View } from "react-native";

export default function Settings() {
return (
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
}}
>
<Text>Edit app/settings/index.tsx to edit this screen.</Text>
</View>
);
}
</code></pre>
<p>I want to be able to have a route inside a folder, so that I can keep related styles and other files organized within a route. According to the docs, this would be done using the following pattern: app/settings/index.tsx. This however, leads to an error when I try to load the routes in the stack, saying that the route does not exist.</p>
<p><a href="https://i.sstatic.net/HlYXbmYO.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/HlYXbmYO.png" alt="enter image description here" /></a></p>
<p>What am I doing wrong here, and how can I fix it so that the route does appear? Thank you in advance for any help provided.</p>
Continue reading...
 
Top