i have below roots in my react native project using react navigation:
https://i.stack.imgur.com/NA2gd.jpg
main is a bottomTabNavigator with 3 screens and in the Profile Screen i have a 3 screen topTabNavigator.
in the EditProfile screen i have a log out button. when i press the log out button i want to navigate to Login screen . please help me reach this out
i found it by my self
in the Profile screen i used screenProps just like this:
class Profile extends Component{
constructor(props){
super(props);
}
render(){
return(
<View style={{ flex: 1,}}>
<AppNavigator screenProps={{ rootNavigation: this.props.navigation }}/>
</View>
)
}
}
and in the EditProfile page when user touches logout button i run this code:
this.props.screenProps.rootNavigation.navigate('login')
Related
I am struggling with the
import { create Bottom Tab Navigator } from '#react-navigation/bottom-tabs';
I want re-render bottom tab after removing cart Items from cart component by dispatch action and my focused tab is cart tab,
and i am also used a custom components for getting cart Count from state below i am sharing the code of bottom tab icon.
export class Cart Badge Icon extends Component {
constructor(props){
super(props);
}
render() {
return (
<>
<Image source={this.props.is-focused ? IMP_CONT.CART_ACTIVE :
MG_CONT.CART_INACTIVE} style={{ width: scale(25), height: scale(22) }} />
{this.props.counterproductive ?
(<View
>
<Text>{this.props.cart Count}
</Text>
</View>
) : null}
</>
)
}
}
cont map State To Props = (state) => ({
cart Has Product Flag: state.cart.cart Has Product,
cart Count: state.cart.cart Count,
})
export default connect(map State To Props)(Cart Badge Icon)
and i have import this component in my bottom Tab like this <Cart Badge Icon/>
after one day's i fond the solution,
i dispatch a action for receiving cartCount and i already get cartCout in CartBadgeIcon component.
I just implemented bottom navigation bar and it seems like I need to change the way I navigate between screens now on. This is how I was doing it before:
onPress={() => this.props.navigation.navigate('my_profile')}
but now it doesn't work, it shows this message:
Do you have a screen named 'my_profile'?
If you're trying to navigate to a screen in a nested navigator, see https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigato
This is how I have implemented the bottom tab:
export default function home_customers() {
return (
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen name="Home" component={home_customer_screen} />
<Tab.Screen name="More" component={settings_screen} />
</Tab.Navigator>
</NavigationContainer>
);
}
//this class below is located in the same file with the function home_customers
class home_customer_screen extends Component{
...
}
//this class is located in a different file that's why I am exporting it
export default class settings_screen extends Component{
render() {
return (
<View>
<TouchableOpacity onPress={() => this.props.navigation.navigate('my_profile')}>
<Text>My profile/Text>
</TouchableOpacity>
</View >
);
}
}
//this is where I am trying to navigate to
export default class my_profile extends Component {
...
}
FYI: I am not using Functions but Classes!
UPDATE
I am using nested navigators. This is the createStackNavigator located in another file:
const AppNavigator = createStackNavigator({
login: {
screen: login
},
home_customers: {
screen: home_customers
},
settings_screen: {
screen: settings_screen
},
my_profile: {
screen: my_profile
},
},
{
initialRouteName: "login"
}
);
From your updated snippet, you seem to be trying to use the react-navigation V4 syntax when defining your stack navigator and the V5 syntax for the tab navigator.
I would suggest you read the stack navigation guide in order to define your screens appropriately.
Once that is done you'll be able to navigate correctly.
I'm currently developing on a react-native application and I'm stucked at something for some time.
The problem is that I have a setup like this
Home Page -> Settings Page -> Information Page
I've hidden the header on home page, made a visible header on Settings Page and what I want to do:
I want to hide the header from the settings page when I navigate to Information Page. I mean I want that the third page gets all the space from the screen.
I'll attach a snack example of what happens in my case...
Hope someone could tell me a solution.
Thank you in advance! :)
https://snack.expo.io/#sapuu_ae/example-snack-stack -> open it on android/iOS device, it won't show good on web simulator.
The problem isn't the header, it's just that your navigation setup is a bit funky. Here are two working versions which use a different navigation setup. First, we need to define our screens.
class Home extends React.Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.paragraph} onPress={() => this.props.navigation.navigate('Second')}>
Press it
</Text>
</View>
);
}
}
class Second extends React.Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.paragraph}>
Second Page
</Text>
<Text style={styles.paragraph} onPress={() => this.props.navigation.navigate('Third')}>
Press for Third Page
</Text>
</View>
);
}
}
class Third extends React.Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.paragraph}>
Third page here
</Text>
</View>
);
}
}
This one assumes that all screens are part of the same stack:
const RootStack = createStackNavigator({
Home: Home,
Second: Second,
Third : Third
});
const AppContainer = createAppContainer(RootStack);
export default class App extends React.Component {
render() {
return <AppContainer />;
}
}
This one assumes that the third screen is contained in another stack, along with the second screen.
const secondScreenStack = createStackNavigator({
Second: Second,
Third: Third
}, {
defaultNavigationOptions: {
header: null
}
});
const RootStack = createStackNavigator({
Home: Home,
Second: secondScreenStack
});
const AppContainer = createAppContainer(RootStack);
export default class App extends React.Component {
render() {
return <AppContainer />;
}
}
I am using 'react-native-router-flux' with my React Native app and I can't seem to figure out how my Custom Nav Bar should communicate with my component?
I have the following code.
NavigationRouter.js:
<Scene key='addDrillScreen' component={AddDrillScreen} navBar={AddDrillNavBar} />
AddDrillScreen.js:
class AddDrillScreen extends React.Component {
performSave() {
// Want to call performSave() when NavBar is clicked
}
}
AddDrillNavBar.js:
class AddDrillNavBar extends React.Component {
render() {
return (
<View style={styles.saveButton}>
<TouchableOpacity onPress={() => {
// ??? How do I trigger the performSave() on my AddDrillScreen?
}}>
<Text style={styles.saveButtonText}>Save</Text>
</TouchableOpacity>
</View>
)
}
I don't understand how the two communicate
You have a couple of options here
Make performSave static
Move performSave to a different class, one that could be shared and isn't a react component
Use the best practice for this kind of action in your flux library if you use one. For instance, in redux you would have included that code in an action creator.
Just implemented a login page.
After user click the login button.
How to navigate to my home page module?
The code should look like this:
login module:
class MyClient extends Component{
render() {
return (
<View style={styles.container}>
<TouchableHighlight style={styles.button}
onPress={this.login.bind(this)}>
</TouchableHighlight>
</View>
);
}
login() {
//How to switch to home view here?
}
}
module.exports = MyClient;
Home module:
class Home extends Component{
render() {
return (
<View>
<Text>This is home page</Text>
</View>
);
}
}
module.experts = Home;
I don't want to use navigator this component cuz' I think home module & login module should not be sort of parent&child relationship.
Is there a way to switch between these two page?
You have to use the navigator. You could try to use "replace" instead of "push". With this you can achieve an instant navigation between Components.
this.props.navigator.replace({
title: 'Home', component: Home
});
And just in case you want to hide the navigation bar there is the "navigationBarHidden" property of NavigatorIOS component.
<NavigatorIOS navigationBarHidden = 'true' />