All Questions
Tagged with expo react-navigation
623
questions
358
votes
38
answers
493k
views
Hide header in stack navigator React navigation
I'm trying to switch screens using both stack and tab navigator.
const MainNavigation = StackNavigator({
otp: { screen: OTPlogin },
otpverify: { screen: OTPverification},
...
- 3,811
42
votes
6
answers
16k
views
'Stack.Navigator' cannot be used as a JSX component
There is a type issue using react navigation, when use Stack.Navigation or Stack.Group from createNativeStackNavigator
The issue saids that the types dont match with JSX.element at the end of the ...
- 643
35
votes
6
answers
47k
views
Re-render component when navigating the stack with React Navigation
I am currently using react-navigation to do stack- and tab- navigation.
Is it possible to re-render a component every time the user navigates to specific screens? I want to make sure to rerun the ...
- 3,757
34
votes
4
answers
81k
views
Change navigation header background color
Struggling to understand how to change the navigation header bar background color.
I'm Using react navigation and Expo to build my app.
backgroundColor does not seem to do anything. Any idea how to ...
- 2,690
28
votes
8
answers
50k
views
React navigation 5 hide tab bar from stack navigator
I wanted to know how to hide the bottom tab bar from a specific screen inside my stack navigator that is nested on a material bottom tab bar
This is my code for my stack navigator
import React from '...
- 612
17
votes
4
answers
8k
views
Expo SDK 45 splash screen with react navigation
I just upgraded to Expo SDK 45 and i got a warning: "expo-app-loading is deprecated in favor of expo-splash-screen: use SplashScreen.preventAutoHideAsync() and SplashScren.hideAsync() instead. ...
- 268
13
votes
1
answer
5k
views
React Navigation v6 NavigationContainer linking attribute with nested navigation typescript issue
I am using react navigation 6 with a root stack navigator containing a tab navigator. My linking attribute config looks like this in the App component:
export default function App() {
const ...
- 1,197
12
votes
7
answers
3k
views
Expo.io - Module JSTimersExecution is not a registered callable module
I setup a React-Native app using the React Native offical docs. But I keep getting this error message Module JSTimersExecution is not a registered callable module when viewing the app from Expo app in ...
- 1,191
11
votes
2
answers
5k
views
Attempted import error: 'shouldUseActivityState' is not exported from 'react-native-screens'
I'm getting this error :
C:/Users/Mobile/node_modules/@react-navigation/drawer/lib/module/views/ResourceSavingScene.js
Attempted import error: 'shouldUseActivityState' is not exported from 'react-...
- 325
9
votes
2
answers
27k
views
Error: Couldn't register the navigator. Have you wrapped your app with 'NavigationContainer'?
I am learning to code with this video https://youtu.be/1hPgQWbWmEk , I did exactly what the guy did, but when I run expo start and then go to run in web browser what appears is this error:
Couldn't ...
- 93
9
votes
3
answers
44k
views
is there a 'fixed header' or 'sticky header' for react native?
Is there a way to have fixed and permeant top-titlebar(I think it's called as Header?) for react native?
Almost like a status bar, it's always there. But it needs to be at the top (even before the '...
- 363
8
votes
2
answers
11k
views
React Navigation pass params to nested stackNavigator
In react navigation 3.0 they added the feature to pass default params to screen. The problem is that I want to pass those params to a nested stackNavigator but I can't figure out how to do so.
These ...
- 769
8
votes
2
answers
11k
views
Prevent default back navigation when using expo-router
I'm currently using expo and expo-router for the first time and have a question about the default back navigation. What I mean by that is for example swiping from the left edge to the middle of the ...
- 185
8
votes
2
answers
24k
views
warn Package undefined has been ignored because it contains invalid configuration. Reason: Cannot find module 'undefined/package.json'
In my app.json folder, I have everything bundled nicely, but I have one undefined package at the bottom of the install list:
"undefined": "react-navigation/bottom-tabs"
I tried ...
- 956
7
votes
2
answers
2k
views
React Navigation Typescript namespace not found
When I'm trying to create any navigator( tab/ stack/ drawer) I get this typescript error: Cannot find namespace 'Tab' even when it's defined in the file itself.
What's the problem and what's the ...
- 105
7
votes
2
answers
3k
views
SafeAreaView not working with MaterialTopTabNavigator at root
We use MaterialTopTabNavigator (https://reactnavigation.org/docs/en/material-top-tab-navigator.html) at the root of our application. According to the react-navigation documentation, there should be a ...
- 1,618
7
votes
2
answers
11k
views
Typescript StackNavigatonProps and Screen props in react-navigation v5
What is the best way to define type for screen's navigation prop, when screen is in different file that router? Let's say I have one file, in which I define routes:
//Router.tsx
type ...
- 259
7
votes
0
answers
5k
views
expo install vs npm install
I'm just getting started with Expo -- but I've done RN development using the CLI. One of the first things I noticed is that I am supposed to install third party packages using expo install <package-...
- 29.2k
6
votes
1
answer
13k
views
How do you structure components and screens when using expo, native-base and react-navigate?
Just starting out with trying to build an app with React Native. I decided to use expo + react-navigate + native-base as a baseline, however I am having trouble setting up my project because each ...
- 63
6
votes
1
answer
3k
views
How to use StackNavigator with DrawerNavigator (ReactNavigation v5)? I'm using classes for every screen
P.S: Most of the Youtube videos or articles on the web aren't using ReactNavigation v5, they are using older versions.
Can someone show a dummy project when user can click button to navigate to a ...
- 663
6
votes
1
answer
10k
views
you need to specify name or key when calling navigate with an object as the argument
i'm having an messages screen and i need to navigate to a "single message" when tapping to the List item of messages but i get this error "you need to specify name or key when calling ...
- 628
6
votes
1
answer
2k
views
Set swipe area width for react-navigation DrawerNavigator
I'm using the DrawerNavigator in an Expo app and while it works great, I don't see an option for customizing the width of the area in which swipes will trigger the drawer opening.
Currently it's a ...
- 4,537
6
votes
2
answers
1k
views
React-Navigation - Header interaction with its screen component, Failed prop type
I am following the React-Navigation tutorial, and got stuck on the section titled Header interaction with its screen component. The code in the tutorial work fine in the emulator provided at snack, ...
- 301
6
votes
1
answer
8k
views
How to pass parameters to routes using a Tab Navigator NOT stack navigator
Im using the react navigation library, specifically createBottomTabNavigator
The docs at https://reactnavigation.org/docs/en/params.html explain how to pass parameters between routes using a stack ...
- 799
5
votes
4
answers
12k
views
how to hide TabBar when keyboard is open in expo react-native
Currently, the TabBarBottom is placed above the keyboard for few seconds and after that it goes down.
i want to completely hide the TabBar when keyboard is open.
expo sdk :- 38
react-navigation&...
5
votes
2
answers
14k
views
What is the best way to change the Status Bar color for all screens using nested navigation in React Native?
I am currently using Expo and React Navigation to toggle between Dark Theme and Light Theme for my app. The only issue is that I’m not able to change the status bar color on iOS based on the theme.
I ...
- 51
5
votes
1
answer
5k
views
React navigation/native property doesn't exist on type props
I'm having troubles adding a prop to my page using React Navigation in my TypeScript React Native app. I have tried to follow the instructions in https://reactnavigation.org/docs/typescript, notably ...
- 177
5
votes
3
answers
7k
views
React Native Expo app crashes only (!) in Testflight, but not on Expo Development Server and only when navigating with certain params
I'm trying to create my first React Native App using Expo and am currently stuck at a problem that only occurs on the Apple Testflight App, not in normal development mode (when executing the app on ...
- 84
5
votes
1
answer
5k
views
What are the equivalent variables for ReactDOM and document.body in React Native? (Expo)
I'm building a Modal component based on which I used for ReactJS on the web. I attach the Modal to document.body as a child and mount/unmount as needed.
Here is the diagram (Stephen Grider's Udemy ...
- 4,545
5
votes
1
answer
6k
views
Setting an Expo LinearGradient as background of the whole react native app
I am using react-navigation and I have a drawerNavigator with a stackNavigator nested in it, how can I set a gradient background to the whole application using Expo LinearGradient without having to ...
- 235
5
votes
1
answer
2k
views
Can't scroll with react-native-paper and @react-navigation/bottom-tabs
I have:
<PaperProvider theme={theme}>
<NavigationContainer>
<Tab.Navigator initialRouteName="Feed">
<Tab.Screen
name="Home"
component={Conversations}
...
- 42.8k
5
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 ...
- 51
5
votes
1
answer
210
views
Responsive Navigator in React Navigation
I've been using expo & react-navigation for developing on both mobile & desktop and so far it's awesome! However, I need to display bottom tab in mobile & drawer in desktop. I've been ...
- 168
5
votes
0
answers
1k
views
ReactNative - invariant violation: requireNativeComponent: "RNCSafeareview" was not found in the UI Manager
I have created a react native package with expo-bare-workflow. I have also added the packages like,
npm install --save react-navigation
npm install --save react-native-gesture-handler
npm install --...
- 7,010
5
votes
1
answer
4k
views
Expo-Router Tab Navigator, missing page transition and missing back button
In my Expo app using expo-router, there should be 3 screens:
Home
Settings
User
and 2 tabs
Home
Settings
This is my current file structure
app
├── (main)
│ ├── _layout.js
│ ├── home.js
│ ├── ...
- 1,343
4
votes
2
answers
9k
views
React-Navigation v5 - transparency between stack navigators
Hey I have a problem with transparency when using more than one Stack.Navigator.
I create 2 Stack.Navigators -> one for Screens, and one for Popups.
The issue is, that my Popups has transparent ...
- 41
4
votes
1
answer
6k
views
React Navigation, how to go back to specific screens?
I'm using react-navigation:^1.0.0-beta.9 is there a way to go back to specific screen (not the previous one to the current)? I've also integrated my react-navigation with redux. I've looked into the ...
- 5,069
4
votes
2
answers
7k
views
React navigation 5 really slow and dropping JS FPS on Expo
I am currently working on a React Native (Expo) App and I am facing some performance issues. I have not found any answer yet for my problem so I hope someone can help me.
My problem is that whenever I ...
- 494
4
votes
1
answer
7k
views
How to make a transparent modal with React Navigation 6 and expo
I have just upgraded from React navigation 5 to 6 and looked at the doc for transparent modals. Unfortunately, I cannot get the previous screen to show under the modal. Instead, I get a gray ...
- 4,948
4
votes
5
answers
7k
views
How to access the react-navgiation inside of a functional component or class component which doesnt have access to this.props.navigation?
Im doing this inside the react native platform using expo.
I want to display the list of items ( ListItems.js) All_Employees_screen.js . These items are being rendered via a functional component, ...
- 1,075
4
votes
2
answers
12k
views
WARN ViewPropTypes will be removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'
Expo version: 45
Using Stack Navigation and Native Base.
I am using props but I am getting this warning.
Why I am getting this warning?
4
votes
1
answer
4k
views
Setting background color for all Views using Expo-Route in React Native
I am relatively new to React Native and have been exploring the expo-route. I am struggling to determine how to globally set the background color of all views using expo-router.
I've referred to React ...
- 85
4
votes
1
answer
6k
views
React Native's useNavigation hook inside of a custom hook?
Im using React Navigation's useNavigation hook:
In MyComponent.js:
import { useNavigation } from "@react-navigation/native";
const MyComponent = () => {
const navigation = ...
- 23.7k
4
votes
2
answers
13k
views
Undefined is not a function near _reactNavigation.StackNavigator
I want to setup a React Native app with a side menu and a tab menu at the same time.
I was following this tutorial.
My code.
I get the error:
undefined is not a function (near '...(0 , ...
- 3,923
4
votes
1
answer
5k
views
Unable to resolve module @react-native-masked-view/masked-view 2021
I have already tried all of the answers in this previous thread and they have not worked
Unable to resolve "@react-native-community/masked-view
I have been unable to build my app in any capacity. ...
- 194
4
votes
1
answer
6k
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
2
answers
4k
views
Is it possible to add swipe down when using react navigation presentation fullscreenmodal?
I use react navigation and want to show a full screen modal. Then I have seen this post:
Modal navigation
it works great, but can I close the modal when swiping down ? is it possible ? And when yes ...
- 933
4
votes
2
answers
2k
views
react-navigation header collapse animation with Expo
I am investigating if the header in react-navigation can be animated similar to the most widely used social applications like Twitter, etc.
For this purpose recently, I encountered coinbase's example ...
- 2,205
4
votes
2
answers
737
views
Accessing navigation parameters Expo-Go
I have got "Screen1" where I create a string "blabla". According to the documentation, I can set it as a navigation parameter:
export default function Screen1() {
const ...
- 345
4
votes
1
answer
9k
views
React-Navigation adding drawer navigation with tab
I'm using react-navigation ("^3.0.9") with expo.
This is my logic flow:
TabView(BottomTabNavigator) with StackNavigatior:
HomeStack
--HomeScreen
...
LinksStack
--LinkScreen
...
SettingsStack
-- ...
- 2,208