Questions tagged [react-navigation]
An easy-to-use navigation solution to be used in React Native projects
7,711
questions
0
votes
0
answers
23
views
How can I send different functions from index in order to re use the footer code?
Im new in React, and Im starting with React native.
I'm working in my project, and in order to re-use code, I'm reading about HOC.
My use case is: I have a lot of views with a footer that have some ...
2
votes
1
answer
23
views
TypeError: undefined is not an object (evaluating 'config.props')
Reloading the application on Android emulator (google pixel 5), I am receiving the following error:
screenshot of android emulator with error
TypeError: undefined is not an object (evaluating 'config....
0
votes
0
answers
26
views
useEffect won't update code in webview automatically in React Native
I use a stack navigation from reactnavigation. When opening Screen X I want to automatically update "let userAnswer = "";" with a string within a webview. However, the code won't ...
-1
votes
2
answers
32
views
undefined is not an object (evaluating 'navigation.navigate') when trying to navigate to a file that will open camera on the phone
I'm trying to navigate to my page "CameraPage.js" but I'm getting this error "undefined is not an object (evaluating 'navigation.navigate')". Can anybody see the problem? This ismy ...
0
votes
1
answer
19
views
using a bottom tab bar from react navigation and move it to the side
Does anyone know how to use the react-navigation bottom tab and move it to the side? or if not, has anyone done that? what was the implementation you used? I'm trying to fix a side bar similar to a ...
0
votes
0
answers
5
views
When to use ResourceSavingView?
Looks like an interesting option for performance reasons. But I cant' find any guide, benchmark or motivation. Does anyone know when we should use ResourceSavingView?
0
votes
0
answers
9
views
React Native + HerderRight button update slowly
I am using React Native 0.68.1 and My Flow Structure as below:
-> Tabbar
-> Each Tab has Stack Navigation
-> Stack Navigation Screen
When i update the header right button, it is updating but ...
0
votes
2
answers
22
views
Navigate to nested screen react native
I have a bottom tab navigator like so:
const Tab = BottomTabNavigator()
const BottomTab = () => (
<Tab.Navigator>
<Tab.Screen name = "Feed" component = {FeedNavigator}/&...
0
votes
0
answers
7
views
Setting accessibility labels with React.Navigator
I am working on accessibility labels for the voice assistant, I've done most of the tags but I can not set the bottom tab navigator options, how can I use accessibility labels with the below BottomTab....
0
votes
0
answers
15
views
Typescript: get `replace` from useNavigation() in react-navigation with react-native
This question resembles this how to use navigation.replace in TypeScript? which is for react-navigation 5.
I also read the docs https://reactnavigation.org/docs/typescript/#annotating-usenavigation
...
0
votes
1
answer
10
views
react-navigation v4 TypeError: (0, _core.createNavigator) is not a function
I am trying to run a project with version 0.63.3 and these dependencies:
"react-navigation": "^4.4.3",
"react-navigation-drawer": "^1.4.0",
"react-...
0
votes
0
answers
26
views
expo typeerror: undefined is not an object (evaluating '_expomodulescore.nativemodulesproxy.exponentconstants')
I suddenly got an issue while running my react-native expo project. It was working perfectly for a week but now I am getting an error
"expo typeerror: undefined is not an object (evaluating '...
0
votes
0
answers
14
views
React Native, Drawer navigation not show, the app is closes
When I try to access the Drawer the app closes and does not show me any type of error, I have not been able to solve the problem and be able to view the Draw.
This function is the one that generates ...
0
votes
1
answer
23
views
React Native: render to the same screen with diferent params
What I want is to render the same screen with different params, if I use push action from react-navigation, this replaces all screens with the same params data on the other hand If I use replace I ...
0
votes
1
answer
36
views
React navigation call a function on each screen change
I'm looking for a way to call a function on each screen to track user interaction with each screen.
so for example:
function track(screenName){
console.log(screenName)
}
function ScreenA(){
track('...
0
votes
0
answers
14
views
Expo app crashing on android on rendering components
When i render a screen in App.js the app crashes on android but works fine on android. If i render some function defined in App.js in renders on screen.
App.js
import React from 'react';
import {...
0
votes
0
answers
23
views
REACT NATIVE firebase was successfully found, however it specifies a main module that could not be resolved
I am trying to build an app which has firebase authentication. however, I keep getting an error that says While trying to resolve module firebase, the package was successfully found. However, this ...
0
votes
0
answers
23
views
react native android release apk navigation error
const OnSignInPressed = async () => {
const formData={email,password}
const res = await loginUser(formData);
// await storeToken(res.data.token)
...
2
votes
1
answer
128
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. ...
2
votes
1
answer
30
views
React Native, passing data between screens when using BottomTabsNavigator
I am trying to make a react native application. I am using Bottom Tab Navigation, and I have 2 screens. On the first screen, a qr code is first scanned, it contains a string, which is written on the ...
-2
votes
0
answers
37
views
How to share data back and forth between multiple screens in React Native?
I want to share data between multiple pages. I can pass the data forward screen but cannot pass the new data backward.
I have an appointment screen where the patient can enter their details and select ...
0
votes
1
answer
18
views
Rerendering the screen after changing a state
I have a problem with useState and the fact that it doesn't rerender the screen after a state change :
For example, when the user logs in, I get the cookie via my api, but the main page doesn't load ...
0
votes
0
answers
35
views
Expo React native new EAS build blank white screen after splash screen
So my app.js is literally copied and pasted from the react-navigation website. I get a blank white screen after the splash screen when using any of the createStackNavigator's including the ...
0
votes
1
answer
25
views
Navigate to lower level navigator from upper level component in react native
Currently, I'm working on a react native mobile app. I have a stack navigator in the App.js file. (stack 1, stack 2, stack 3). In the stack 1 component, I have a tab navigator. (Tab 1, tab 2, tab 3). ...
0
votes
0
answers
14
views
Navigate from inner navigator to outer navigator generate extra screen slide
I have a problem during the logout in my react native app. I set many navigators to handle multiple navigation flow, but when I try to logout from the app, the login screen appears two times.
I try to ...
0
votes
0
answers
23
views
SplashScreen and Navigation for react-native for both iOS and Android (3 screens)
I am currently working on a project where I need to include SplashScreen to the main page and transitioning to navigate to another screen by using TouchableOpacity texts.
Problem is when I started ...
0
votes
1
answer
39
views
Navigation.navigate does not reset route params - React native navigation
I have a list of objects. I'm passing the selected item to another screen now in that screen. I'm pushing details of object, now going back to previous screen, and again navigate to same screen. That ...
0
votes
0
answers
19
views
Twitter like drawer in react navigator using nested drawer and tab navigator
I want to achieve twitter like tab and drawer navigation, where there is a bottom tab bar in the home page and a drawer on the side. However, in twitter when clicking on the left drawer, it opens a ...
0
votes
2
answers
36
views
which function is called when screen is returned from other screen in react native?
I can see the React native component life cycle. componentDidMount, UNSAFE_componentWillMount, etc
I thought UNSAFE_componentWillMount is called when screen is resumed. But it is not called.
I use ...
0
votes
0
answers
22
views
React Native Google Fonts - Pass the custom font to the WHOLE app
After a lot of error messages, especially the following one
If this is a custom font, be sure to load it with Font.loadAsync.
I managed to add Google font to a react native app with the following ...
0
votes
1
answer
56
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?
0
votes
0
answers
14
views
The react-navigation header button function I Set in setOptions cannot get the latest state
When using react-Navigation, I want to set the header button in the page component and call back some page methods in the setOptions function, but these methods will use multiple existing states. ...
0
votes
0
answers
54
views
Component renders with old props and then updates to new ones
I have a chat header component which shows the profile picture of the user and their name, and when I leave the chat window and go to another one, it still briefly shows the old header until updating ...
0
votes
0
answers
26
views
Error While I am using Drawer Navigation in Expo
When I am using Drawer Navigation in Expo Projects. I don't have any index.js folder in my expo project.
ERROR Invariant Violation: "main" has not been registered. This can happen if:
* ...
0
votes
0
answers
14
views
Access protecting routes in react native
Solved
I'm developing an app to organize daily tasks, but when i try to login or register it does not access the protected page.
The code is the following:
import {useState,useEffect,useContext} from '...
0
votes
2
answers
23
views
How to reduce the number of requests in React Navigation TopTabNavigator using expo?
i'm pretty new on React Native and currently i am developing an app using expo. I am using TopTabNavigator from react navigation 6 and i don't understand how to reduce the no of the requests. ...
0
votes
0
answers
18
views
"RNSScreenStackHeaderConfig" was not found in the UIManager Wont go away
I'm on Mac OS 12 and trying to build an IOS app, but for some reason the error:
Invariant Violation: requireNativeComponent: "RNSScreenStackHeaderConfig" was not found in the UIManager. ...
0
votes
0
answers
20
views
Next.js Navbar gives a warning of Target Element not found when clicked
I am currently working on a next.js app, which contains a connect wallet button found to the right of the navbar, with the navigation links to the left of the navbar.
This is what it looks like ...
0
votes
1
answer
22
views
How to fix the first Screen in a Tab Navigator?
I am using a Stack Navigator inside a Tab Navigator like this:
tab1
-> Stack
-screen1
-screen2
tab2
-> Stack
-screen1
-screen2
And only screens1 should have the tab navigation ...
0
votes
1
answer
27
views
cannot read property navigate of undefined
I am getting this error cannot read the property of navigate when try to navigate to the SignInScreen
this is the splash screen that have created
import React from 'react';
import {
View,
...
0
votes
0
answers
16
views
Navigation error: Null is not an object (evaluating '_navigation$getParam.id')
I don't know why my navigation isn't working properly, it throws me the following error every time I want to navigate back to my EventAssistants screen from my UserProfile screen:
TypeError: Null is ...
0
votes
0
answers
19
views
How to stop running old screen on React Native Expo
I use React Navigation for moving the screen.
I set stack screen like this:
<Stack.Screen name="camera" component={Opencamera} options={{headerShow: false}} />
<Stack.Screen name=&...
-1
votes
1
answer
31
views
How to navigate with react native expo?
I know it is a basic question but when I search on the web the answer is always a single file mith multiple functions link here for exemple.
What I want is to use one function per file and multiple ...
0
votes
0
answers
17
views
React Navigation : native Stack Navigator / native-stack is much slower on Android since React Native 0.68.1
Since I updated to Expo 45 and RN 0.68, @react-navigation/native-stack StackActions.push() animation is very smooth but much slower on Android (I didn't notice that on IOS), is it a part of the ...
0
votes
2
answers
51
views
On React-native, on Android, canOpenURL fails & OpenURL throw an error: Could not open URL
On a React-Native mobile app Linking.canOpenURL and Linking.openURL fail if the URL refers to an app screen, while it works when referring to an HTTPS URL. I suspect it is a problem with Android ...
0
votes
0
answers
29
views
Deep Link and Stripe redirect
So I am trying to redirect my react-native application from a stripe checkout page back to the application.
app.post('/create-checkout-session', async (req, res) => {
const prices = await stripe....
0
votes
2
answers
38
views
How to conditionally render headerLeft using React Native navigation?
I have a component that returns a <Stack.Navigator> that contains a couple of screens. I also have a custom headerLeft element that executes a function on click. Now I am trying to hide the ...
0
votes
1
answer
39
views
Conditional navigation inside Tabs
i want to show a screen depending on a state.
So when I click on the bottom left tab, if there is a valid user, I want to be redirected to the UserProfile-screen, else redirect to the LoginScreen.
The ...
1
vote
1
answer
18
views
Is there a way to make tab unactive from nested stack?
I have Tab navigation in place and each tab has it's own stack navigation.
However, on certain screens inside stack navigations I would want to make the tab button inactive or at least change it's ...
0
votes
1
answer
21
views
Add SVG as background to React Navigation tabBar React Native
I have an SVG component (react-native-svg) that I would like to put behind a custom React Navigation tabBar component to act as a background for the bottom tabs navigator. I've tried a few different ...