Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I am trying to load my login form after the splash screen but it is giving an error as
Error: Looks like you have nested a 'NavigationContainer' inside another. Normally you need only one container at the root of the app, so this was probably an error. If this was intentional, pass 'independent={true}' explicitly. Note that this will make the child navigators disconnected from the parent and you won't be able to navigate between them.
my app.js file
As far as my understanding is concerned. I can see some place of improvements, and one of them would be:
Using replace() correctly with the help of StackActions reference
import { StackActions } from '#react-navigation/native';
navigation.dispatch(StackActions.replace('Home'));
Use useEffect hook, to perform setTimeOut() operation in your SplashScreen component
import React, { useEffect } from 'react';
useEffect(() => {
const timer = setTimeout(() => {
navigation.dispatch(StackActions.replace('Home'));
}, 1500);
return () => clearTimeout(timer);
}, []);
I hope, you will be good after following that in your code.
If LoginForm has a separate NavigationStack configured inside it this issue will occur, please try after removing it.
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
I add this code at mounted()
mounted() {
fetch('http://127.0.0.1/logined')
.then(
function(response) {
if (response.status !== 200) {
console.log('Looks like there was a problem. Status Code: ' +
response.status);
return;
}
// Examine the text in the response
response.json().then(function(data) {
console.log(data);
});
}
)
.catch(function(err) {
console.log('Fetch Error :-S', err);
});
}
It's not fixing, API works well.
API returns
{'result':'false'}
Console Log
This problem not fixing for me, I tried at another PC but same.
Axios is not working too so I changed to fetch.
There is no problem with your code, the error you showed in your screenshot says you cannot get any result from the URL.
It looks like your browser is under CORS policy and this is why it doesn't work or you use GET instead of POST.
I'm currently attempting to get my head round how to build out my React Navigation stack with v5, and not using a switchNavigator.
My basic app structure is such (will post an image of a flow below):
check Auth
-> signed in yes
-> tab navigation (with stack navigators nested within)
-> signed in no
-> nested stack navigator
But I just can't figure out how I should build the root of my app. I don't know how to combine my tab navigator and stack navigator together to make my app function from start to finish.
(It's worth noting, the 'check Auth' is an actual screen, not a conditional)
Here's my illustration showing my project layout:
Can someone advise please how I can build this out? Any tips or general structure / advice on how best to do it would be really appreciated!
So what I've typically done in the past is the render either or, not both. So as an example, the root navigation could look as follows:
import { NavigationContainer as RootNavigationContainer } from "#react-navigation/native";
const Navigation = () => {
const { someToken } = useContext(SomeContext);
return (
<RootNavigationContainer>
{!someToken ? <AuthStack /> : <MainStack />}
</RootNavigationContainer>
);
};
The determining of the user's authenticated state should be done while the Splash Screen is being shown, using a separate component just confuses the flow IMO. If the user is authenticated, you can set some state (in the example a token is set on the context) which will then drive which navigation stack is shown.
In my example, AuthStack would contain all of the screens where you user is unauthenticated - so your login, registration etc. MainStack would contain the screens that should only be shown to authenticated users.
Things like FaceID should be included in your Login flow.
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 years ago.
Improve this question
I'm creating a simple Vue Laravel CRUD
So in my component's script I have
export default {
data: function() {
return {
items: []
}
},
method: {
getList() {
axios.get('api/items')
.then( response => {
this.items = response.data
})
.catch(error => {
console.log(error)
})
}
},
created() {
this.getList();
}
}
I have created a method getList() to get the data which then I want to call in the create(). But the Vue keeps prompting an error, that my getList() is not a function.
app.js:21339 [Vue warn]: Error in created hook: "TypeError: this.getList is not a function"
Then I tried to put my request directly inside the create() without calling my method, and it works just fine I was able to get the data.
I'm still learning and I'd appreciate any help :)
You have a typo - method should be methods.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I couldnt find and example or snippets of how to use tabBarOnLongPress on react navigation v5.If somebody's done it already,help?
If you are using standard TabNavigator, just subscribe to tabLongPress event in your screen components.
const unsubscribe = navigation.addListener('tabLongPress', (e) => {
// Do something
});
Example on Snack: https://snack.expo.io/HewmpqPQD
If you are using custom Tab Navigator, don't forget to emit tabLongPress event.
const onLongPress = () => {
navigation.emit({
type: 'tabLongPress',
target: route.key,
});
};
More info here: https://reactnavigation.org/docs/material-top-tab-navigator/
I have a react-native app with two screens, Home and Details. Using react-navigation, Ive set the Stack navigator as following
const RootStack = createStackNavigator(
{
Home: FormComponent,
Details: DetailScreen
},
{
initialRouteName: "Home",
headerMode: "none"
}
);
Home contains a form, which once submitted, navigates to the Details screen with relevant data (using navigation.navigate("Details",{some data})). At this point, if I exit the app, and then open it again, the Details screen loads, with all the data preserved(Instead of the Home screen). I logged the navigation object data (this.props.navigation.) and it prints like the app was never closed.
Am I missing something here? Im new to React Native and Navigation, but from what I understand this is not expected behaviour.
Tried uninstalling app and rebuilding. This resets the app and Home screen loads. If I try reinstalling without uninstalling, back to same behaviour.
Tried also manually forcing navigation.goBack() on ComponentWillUnmount() but no difference.
This should've been a comment but sadly i don't have enough reputation.
Could you check if you haven't accidentally set a persistenceKey as a navigator prop?
https://reactnavigation.org/docs/en/state-persistence.html