in with React Native Navigation, is there a way to navigate to a point from different components/routes, from the main layer?
In my example:
I am located "NavigationController -> Drawer -> ToursStackNavigator -> TourScreen -> List -> User" and I want to navigate from there, to "NavigationController -> Drawer -> UserStackNavigation -> UserDetail with ID.
Here my Navigation Structure:
- StackNavigation (Root)
- Auth
- Login
- Register
- Portal
- Drawer
- TourStackScreens
- TourList
- TourDetail
- UserStackScreens
- UserScreens
- UserDetail
...
In TourDetails I have a component called Userpill (Participants list), this same component is in UserDetail (Friends list).
I do manage to get from the TourDetails userpill list to the UserDetails of the user - but not, with the same statement of UserDetails, because useNavigation always passes only the next possible navigation.
Is there somehow the possibility to navigate from the very first element?
Example:
navigation.goBackToRoot().navigate('Portal', {
screen : 'Drawer',
params : {
screen : 'UserStackScreens',
params : {
screen : 'UserDetail',
params : {
user_id : user.id
}
}
}
})
I have already tried to set a reference to the NavigationContainer with useRef and to control something from there - but it did not work.
With useNavigation, unfortunately, only the current navigation is output.
If I create a continuous loop with getParent(), up to the last element, I can still not specify the complete path.
I'm running out of ideas - I'm still very new to React Native.
Related
I am using react native 0.64, I want to load my profile screen from home screen without using navigation. Is it possible? Can anyone help?
You should use a state for represent home or profile.
for ex:
function HomeScreen() {
const [screenName, setScreenName] = useState('home')
if (screenName == 'profile') {
return <ProfileScreen/>
}
return {
...
// handling the event to go Profile screen
setScreenName('profile')
...
}
}
I am developing a react-native project. Here is my main screen which can receive route parameters from child screen.
(User can navigate from MainScreen to ChildScreen and vise versa.)
const MainScreen = ({route, navigation}) => {
if (route?.params) {
//do something
} else {
//do something else
}
...
}
When navigating back from child screen to main screen, inside ChildScreen, I have:
//this is inside Child screen
onPress={() =>
navigation.navigate("MainScreen", {data: 'foo'})
}
Above code snippet is a illustration of how I pass route parameter from child screen to main screen.
Overall, it works well. However there is one issue. That's inside the MainScreen, once navigating back from ChildScreen to MainScreen, the value of the parameter inside route?.params is preserved. I mean if I kill the app's process and launch the app again which shows MainScreen again, the
if (route?.params) {
//do something
}
is executed because the route?.params contains the previously passed parameters from child screen. That is bad since I expect a clean start for my main screen. How to get rid of this issue?
Try navigation.push instead of navigation.navigate.
I want to create via createBottomTabNavigator. It has 5 tabs. Each tab is a StackNavigator.
One of these tabs has a top tab bar. I create the top tab bar via createMaterialTopTabNavigator
But I know tab count after http request. How can I add tab dynamically? The doc says that
There are workarounds if you absolutely need dynamic routes but you can expect some additional complexity
I am confused about this task.
How can I do that?
Related react-navigation issue: https://react-navigation.canny.io/feature-requests/p/dynamic-routes-for-navigators
I think you can create a component that returns a tabNavigator. You can then access props or do whatever you want to dynamically add or remove tabs. Here I am using the latest version of react-navigation.
import React, { Component } from 'react-native';
import { createAppContainer, createMaterialTopTabNavigator } from 'react-navigation';
class DynamicTabs extends Component {
render() {
// I am using a prop here to update the Tabs but you can use state to update
// when the network request has succeeded or failed
const { shouldRenderTab } = this.props;
const TabNavigator = createMaterialTopTabNavigator({
Tab1: Tab1Component,
Tab2: Tab2Component,
// Create a tab here that will display conditionally
...(shouldRenderTab ? { Tab3: Tab3Component } : {}),
});
const ContainedTabNavigator = createAppContainer(TabNavigator);
return <ContainedTabNavigator />;
}
}
export default DynamicTabs;
This is the current solution I am using adapted from the original solution posted on github
I wan to add Routes into my drawer navigator from an api respones.
It looks like this :
componentDidMount() {
let steps = [
{
"commonName" : "Input Configuration",
"compname" : "InputConfig"
},
{
"commonName" : "Dashboard",
"compname" : "Dashboard"
}
]
Where commonName is the name of the route and compname is the name of corresponding component name.
How to add these items into Drawer Navigator?
I would keep steps as an initial state variable, and as API responses come in, call this.setState(change steps here). It's a little difficult to say how exactly to implement that without more information on where your API calls are happening and if you're receiving the data in the same class, but that is the general process. Set the state, and set up your component to use that state, and as the state needs to change, call setState.
If you are using redux its a little easier.
I want to pass one array from first view to second view in react native. So how can I achieve this in react native ? For navigation I am using 'react-navigation'.
this.navigation.navigateWithDebounce('BlaBlaView', {title: 'BlaBla View'}).
If your'e using react-navigation's naviagte. you can pass the parameters as the second parameter, for instance:
this.props.navigation.navigate(`ROUTE_NAME`, { params: 'param value' });
And then, within the view you navigated to you can access it:
componentWillMount() {
const { param } = this.props.navigation.state.params;
}