Questions tagged [expo-router]
A file-based router for React Native and web applications.
182
questions
14
votes
2
answers
16k
views
Passing Object Using Expo Router
I need to pass an object from one screen to another using expo-router
I have a screen that shows a FlatList with items and a detail screen that would show more information about the item. The ...
- 2,458
9
votes
2
answers
2k
views
trouble navigating with file based router on Dynamic route
The file based routing hasn't exactly clicked all the way for me. The earlier NextJS pages file routing worked easily. I haven't made the conversion to Expo Route file based for some reason. ...
- 3,476
6
votes
2
answers
3k
views
Typed routes with object parameters on new Expo-Router v2
I am moving my app from react-navigation to expo-router, but I didn't find a solution to typed routes yet.
I know there is a feature that automatically types your routes following the files routes and ...
- 61
6
votes
1
answer
608
views
how to make expo router keep the same page after devmode fast refresh
When we change something when using the expo router, the expo GO android app auto-refresh feature will redirect us to the first page. How can we make it keep the same route we were working on?
5
votes
3
answers
7k
views
Expo-Router Bottom tabs with nested Stack Screen
I am trying the new Expo-Router with a complex nesting navigation, currently i'm trying to display a screen with a presentation of modal, which itself is a part of a bottom tab navigation, but it is ...
- 1,609
5
votes
2
answers
1k
views
Passing params with router.back()
I'm using expo-router and need to pass some params back. How to do that?
I use router push here:
<TouchableOpacity style={styles.qrButton} onPress={()=> {router.push(`/rent-bike/qr-scanner`)}}&...
- 51
4
votes
1
answer
4k
views
An issue about nested navigator in Expo Router
I am encountering an issue related to navigating in Expo Router.
image of my project's navigator hierarchy
As shown in the screenshot above, I have configured my router in the following way. I defined ...
- 51
4
votes
3
answers
2k
views
How to pass data from a modal with Expo Router using React-Native
Newbie to expo-router & React-Native
I have two screens (a & b) for example, b being a modal which is presented over a.
How would I go about passing data from screen b (the modal) back to ...
- 2,458
4
votes
2
answers
512
views
How to resolve "Using deprecated Layout Route format" error with expo-router in React Native?
I'm working on a React Native app using Expo and I've recently integrated expo-router for routing. My app's file structure is set up to have dynamic routes for groups, and it works correctly until I ...
- 640
4
votes
1
answer
1k
views
Status-bar / SafeArea issue with Expo React Native
I was using SafeAreaView for my screens and it behaved normally:
Safe areas' background color is the same as the rest of my screen
The content is simply padded within the safe area insets, just like ...
- 41
4
votes
1
answer
836
views
Custom modal/sheet is behind in react native expo router stack screen that has a representation set to modal
Im just learning react native and i used expo on top of it.
I have screen create.js that set the presentation on screen option to "modal", Now in this screen i have to use SELECT input for ...
4
votes
0
answers
1k
views
router.replace() method results in slow navigation in expo router when navigating from a 'modal' presented screen to a regular screen
I have the following folder architecture using expo router v2 and expo sdk 49
folder architecture for expo router v2 navigation
I am transitioning from several modal presented screens to a regular ...
- 41
4
votes
2
answers
2k
views
Presenting modal on tabs using React Native and Expo Router
I have an app with four tabs I want to be able to present a modal screen on any of the tab items. I'm trying to get my head around expo-router, however, it's not going through.
My file structure is:
...
- 2,458
4
votes
2
answers
661
views
React Native Expo giving; Application tried to present modally a view controller that is already being presented
Im running into an issue i cant seem to fix ... Im using Expo Router and in my layout file in checking if the user is authenticated, if they are, send them to the (app) which is a tabs layout. If they ...
- 3,905
4
votes
5
answers
3k
views
Not able to pick initialRouteName in Expo Router when using stacked navigation
I cloned the sample Expo Navigation example project:
https://github.com/expo/expo/tree/main/templates/expo-template-tabs
Official documentation: https://docs.expo.dev/routing/introduction/
And added ...
- 65
3
votes
1
answer
336
views
Multi Nested Dynamic Routes in Expo Router
I have seen similar posts like this, but all of them with no answer and my guess is that at the moment it is not possible that is why. So I would like to ask directly here whether it is possible or ...
- 41
3
votes
1
answer
2k
views
React Query with Expo Router
i am starting a react native project and using expo router.
I'm trying to use react query and I noticed that the expo router doesn't have a root file for the QueryClientProvider to wrap. Hence I am ...
3
votes
2
answers
3k
views
ValidationError: Invalid options object. expo-router config plugin has been initialized using an options object that does not match the API schema
I'm trying to migrate a project using React Navigation to Expo Router.
Got this error:
ValidationError: Invalid options object. expo-router config plugin has been initialized using an options object ...
3
votes
1
answer
601
views
Warning in Expo Router - Layout children must be of type Screen, all other children are ignored
When I was trying to make folder structure type routes and handling authentication in the main _layout.tsx file and then navigating to different folder route on the basis if the user is authenticated ...
3
votes
1
answer
518
views
Ignore an app-directory subfolder when using expo-router
I'm using expo-router for my react native app. I'm using the following type of file structure
app/
├── index.tsx
└── components/
└── header.tsx
The problem is, expo-router then generates a screen ...
- 31
3
votes
0
answers
308
views
How to nest Stack Navigation into Tab Navigation in Expo Router V2?
when I start the app my navigation tab appears at the bottom. A stack navigation should appear on one of the screens linked there (settings page). However, the tab navigation should be retained. How ...
- 31
3
votes
0
answers
342
views
ReferenceError: window is not defined in React Native project after adding Supabase call
I'm using a React Native project with Expo v49, and I added a Supabase call to read some data from the database, and it works on ios/android,
But when I open the web version, I get "...
- 31
2
votes
1
answer
2k
views
Expo Router - preserve state of screen when pushing a new one
I'm working with Expo Router in React Native. I'm noticing that when I use router.back() the previous screen is not keeping it's old state, it just re-renders.
Example:
export default ScreenA = () =&...
- 356
2
votes
2
answers
1k
views
Bottom tab navigatior with drawer navigation expo-router
This question is related to expo-router.
I'm using a Tab Navigator where I have some Stack screens inside, in the profile screen I need a burger menu which is provided by Drawer Navigator. I want to ...
2
votes
1
answer
607
views
Expo Router, Navigator at "XYZ" has no children
I am constantly having trouble having migrated to Expo 48 with File Based routing. When I add a simple route, it usually is not picked up.
I just added profile page which is from the main header.
...
- 3,476
2
votes
1
answer
270
views
How to set my LoginPage as index in Expo React Native
I have an app on React-Native (using Expo) that is pretty basic. as for now, I have an Index.js with all the logic of a login page. That works great but I want to structure it more into different ...
- 592
2
votes
2
answers
700
views
How to correctly set the initial route for nested tabs using Expo Router in React Native?
I'm building a React Native application using Expo with Expo Router for navigation and I'm encountering an issue with setting the initial tab when the app starts. Despite configuring the initial route ...
- 4,002
2
votes
0
answers
250
views
Expo Router not detecting filesystem changes
I have recently been introduced to expo router, and right now I am working on an app using it. Things have been going smooth for the first day. However, by the second day, when I wanted to add a third ...
- 66
2
votes
0
answers
207
views
Passing data form a component to layout file through expo-router
I want to pass a prop (accountInfo) from a component to the layout file of the app. The component which has the accountInfo is dynamically routed i.e. app/[accId]/index.tsx. I have different layouts ...
- 41
2
votes
2
answers
508
views
How to pop to the top of stack after navigating between tabs with nested stack navigators?
I have a situation where I have some tab screens with nested stack navigators.
Tab1: Home Screen
Tab2: Stack Navigator
The initial screen in the Stack Navigator has links to different screens within ...
2
votes
0
answers
2k
views
Use stack layout as expo-router slot child route
I am currently using expo router 2 with expo SDK49.
I would like to add a child route of a slot layout to be rendered as a stack layout - ie whole screen replaced with a back button. I can't seem to ...
- 21
2
votes
0
answers
315
views
Expo Router Issue: Navigating Between Screens Using Parentheses Grouping
Certainly, here's your initial question rephrased in English:
I have a folder named "app" containing an Expo router structure as follows:
(onboard)
_layout.tsx
experience.tsx
profile....
2
votes
0
answers
753
views
How to configure routes for auth user and unauth user in expo router?
I'm using expo SDK 49 and expo router v2. I have a route structure like this:
(main)
| dashboard.tsx
| profile.tsx
| order.tsx
| wishlist.tsx
| history.tsx
(home)
| _layout.tsx
| index.tsx
| ...
- 71
2
votes
0
answers
2k
views
How can I link to a stack screen from inside a tab layout in expo router?
My app structure is
/app
index (and others)
_layout
/settings
_layout (simple export default Stack from expo-router)
index
Root layout (app/_layout) gives bottom tabs navigation.
From here I want ...
- 2,913
2
votes
1
answer
1k
views
Correct way of passing data back to previous page with Expo Router?
I have two pages in my app currently, Page1 and Page2. On Page1, I do the following to open Page2 using Expo Router:
<Link href="/page2" asChild>
<TouchableOpacity>
<...
- 247
1
vote
1
answer
1k
views
How to ignore a folder from navigation in expo-router?
Simple and maybe dumb question, but I don't see anywhere in the doc where can I completely ignore a folder from navigation.
I have for example a src/service folder, where there are no 'pages' nor ...
- 7,711
1
vote
1
answer
112
views
Expo Router React Native setParams() not on screen error
I am having trouble using the router.setParams() method with Expo Router.
I'm trying to follow the example here:
https://docs.expo.dev/router/reference/search-parameters/#updating-search-parameters
I ...
- 13
1
vote
1
answer
544
views
How to reset navigation in expo router
I have 3 screens for forgot password. Forgot password screen starts from login page. So after successfully resetting the password I need user to go to login page. But still the user can go back to the ...
- 1,311
1
vote
1
answer
519
views
expo router: how to create stack for each tab?
Where is the equivalent documentation in expo router for this: https://reactnavigation.org/docs/tab-based-navigation#a-stack-navigator-for-each-tab
Basically id like to make nested stacks that use ...
- 33
1
vote
1
answer
2k
views
How can I use a dynamic route in an expo-router Link component using TypeScript?
I have a list of items that I can click to go to different pages. These items are stored in an array. They have the following shape:
type Item = {
label: string
path: ItemPath
}
type ItemPath = &...
- 31
1
vote
1
answer
2k
views
Expo Router - when using router.push() to a screen in a different tab, unable to return to root of push
Scenario:
A component that navigates to a specific route
This component is used in multiple screens
The component is used on screens that are not in the stack of the tab it is pushing the route to
...
- 143
1
vote
1
answer
921
views
Versel TurboRepo has got a conflict with expo router installation
I'm using TurboRepo to build a monorepo and the react-native-web example for kicking off full example of expo react-native-web.
I want to install expo-router but I can't implement it properly within ...
- 31k
1
vote
2
answers
121
views
Add an event listener to bottom tab with Expo router
I would like to add an event listener to one of my bottom tabs so I can trigger events when the user clicks on that tab. React navigation had a function navigator.addListener which allowed me to ...
- 913
1
vote
1
answer
164
views
How to pass props to the screens when using Expo Router
I need to pass open and setOpen to the index screen.
function RootLayoutNav() {
const colorScheme = useColorScheme();
const [open, setOpen] = useState(false);
return (
<...
1
vote
1
answer
354
views
how to avoid double navbar in expo router?
I'm new in a mobile development and don't understand why it works this way.
I want to have different stacks, so when I push a new stack in each tab, the tab bar remains at the bottom.
folder's ...
- 11
1
vote
1
answer
255
views
Stack.Screen expo option headerLeft is not showing
import { useState } from "react";
import { Button, Text, Image } from "react-native";
import { Stack } from "expo-router";
function LogoTitle() {
return (
<...
- 11
1
vote
4
answers
893
views
Unable to pass an array by using expo router params
I want to pass an array from one screen to another. So I pass the array like this,
const navigation = useRouter();
const cars = ["Saab", "Volvo", "BMW"];
navigation.push({...
- 53
1
vote
1
answer
389
views
How to create a active Link for web using expo-router?
I am learning expo router trying to use it in a web project. I am trying to style current active link in header Bar Menu. I am looking for something like <NavLink> in case of react-router but ...
- 6,280
1
vote
2
answers
418
views
image disappears when wrapped inside expo Router Link
i am currently using expo router in my project. i have wrapped an image component inside a link tag . this causes the image to disappear, kindly assist on how to fix this.
<Link href={`${pathname}...
- 31
1
vote
3
answers
2k
views
How can we hide an entire folder of routes in expo-router?
The documentation covers how to hide a single route in Tabs. Is there a way to hide an entire folder of routes?
I get this
WARN [Layout children]: No route named "customer/[i*" exists in ...
- 2,913