i m trying to use react-navigation to implement an onPress handler which allows me to navigate to a screen called tasks
the below code shows the headerRight just fine. however, when i click on the headerRight button, i get the following error
"Undefined is not an object (evaluating _this2.props.navigation) on my expo simulator".
Anyone knows what could have gone wrong with my onPress handler? Tq
static navigationOptions = {
title: 'List',
headerRight: (
<Button
title='Add Task'
onPress={() => this.props.navigation.navigate('task')}
backgroundColor='rgba(0,0,0,0)'
color='rgba(0,122,255,1)'
/>)
}
I managed to get the codes working
hope this can help those using react-navigation and wanting to render a workable headerRight
static navigationOptions = ({navigation}) => ({
title: 'List',
headerRight: <Button
title= 'Add Task'
onPress={() => navigation.navigate('task')}
backgroundColor='rgba(0,0,0,0)'
color='rgba(0,122,255,1)'
/>
});
Related
I have one button which is redirect to anothe page called SELECT_COMPANY_SCREEN.only i need to redirect to this page.
import { SELECT_COMPANY_SCREEN } from "../../constants/screen-names";
const SettingsCompanyCard = ({ navigation }) => {
<Button
onPress={() => navigation.navigate("SELECT_COMPANY_SCREEN")}
title="go to Company"
/>
}
export default SettingsCompanyCard;
but i am facing issues like below.
How can i resolve this issue?
I think I had the same issue a while ago.
If your SteeingsComapnyCard component isn't the component you set as component in your Screen-component, you can pass the prop navigation from its parent:
When defining, just do <SettingsCompanyCard navigation={navigation} />
use props.
const SettingsCompanyCard = (props) => {
<Button
onPress={() => props.navigation.navigate("SELECT_COMPANY_SCREEN")}
title="go to Company"
/>
}
You can use this.props.navigation.navigate('Your screename')
I am trying to build a mobile app in react-native and I'm having some problems setting up React Navigation.
What I want to achieve is a Bottom Tab Navigator that Navigates to the 'Home' screen and the 'Profile' Screen. From the 'Home' screen, there should be a button to navigate to the 'Settings' screen in the Header.
I have got to the point where I have a Bottom Tab Navigator that can successfully navigate between the 'Home' and 'Profile' screens, as well as a button on the header for the Settings screen using the Stack navigation header. However, I am having trouble navigating to the 'Settings' screen with this button.
My code for the Stack navigator is:
const MainStackNavigator = () => {
return (
<Stack.Navigator screenOptions={screenOptionStyle}>
<Stack.Screen
name="Home"
component={HomeScreen}
options = { ({navigation}) => ({
title: "Home",
headerStyle: {
backgroundColor: '#ff6600',
},
headerRight: () => (
<Button
onPress={() => navigation.navigate(SettingScreen)}
title="Settings"
color="#fff"
/>
)
})}
/>
<Stack.Screen name="Settings" component={SettingScreen} />
</Stack.Navigator>
);
}
When I click on the Settings button, I get the error:
"The action 'NAVIGATE' with payload undefined was not handled by any navigator.
Do you have a screen named 'SettingScreen'?"
Upon looking for a solution to this error I found this article: Nesting Navigators
It recommends keeping nested navigators to a minimal. Is my method even the right way about going for this UI design? Is there a way to achieve this with only using one navigator?
After some time trying to solve this I found the problem was quite silly of me. navigation.navigate takes the name of the screen to navigate to, but I was giving it the component.
To fix the problem I changed
onPress={() => navigation.navigate(SettingScreen)}
to
onPress={() => navigation.navigate('Settings')}
Add this below your render method!
render () {
const { navigate } = this.props.navigation;
}
And then in the onPress
onPress={() => navigate(SettingScreen)}
Hopefully this helps
Anyone know a good alternative to tabBarOnPress in react navigation v.5? I want to navigate to a modal stack when a user presses a tabIcon, (i.e. cancel its default navigation behavior) but the icon seems to navigate to the Tab Screen first, then navigates to the modal.
For clarification, here is my PostIcon TabIcon Component
export const PostStackIcon: React.FC<TabBarIconProps> = ({ size, color }) => {
const navigation = useNavigation();
const goToCreatePost = () => {
navigation.navigate('CreatePostStack', { screen: 'CreatePost'});
}
return (
<TouchableWithoutFeedback onPress={() => goToCreatePost()}>
<Icon
name="Post"
width={size * 2}
height={size}
fillOpacity={0}
stroke={color}
secondaryStroke={color}
/>
</TouchableWithoutFeedback>
)
}
Official document
You can use listeners prop of Tab.Screen, this is the closest alternative to tabBarOnPress IMHO.
Below is quoted from the documents:
Sometimes you might want to add a listener from the component where you defined the navigator rather than inside the screen. You can use the listeners prop on the Screen component to add listeners. The listeners prop takes an object with the event names as keys and the listener callbacks as values.
Example:
<Tabs.Screen
name="Chat"
component={Chat}
listeners={{
tabPress: e => {
// Prevent default action
e.preventDefault();
},
}}
/>
You can also pass a callback which returns the object with listeners. It'll receive navigation and route as the arguments.
Example:
<Tabs.Screen
name="Chat"
component={Chat}
listeners={({ navigation, route }) => ({
tabPress: e => {
// Prevent default action
e.preventDefault();
// Do something with the `navigation` object
navigation.navigate('AnotherPlace');
},
})}
/>
ReactNavigation Stack Navigator has the property HeaderRight useful to place the menu button in the header, but has not a context menu.
Is it possible to integrate the React Native Popup Menu in the Stack Navigator?
Thanks in advance.
It is definitely possible to accomplish. In your root App do the following:
import React, { Component } from 'react';
import { MenuContext } from 'react-native-popup-menu';
import MainNavigator from './components/MainNavigator';
export default class App extends Component {
render() {
return (
<MenuContext>
<MainNavigator />
</MenuContext>
);
}
}
Then the way you've implemented your headerRight should work perfectly.
I set the navigationOptions of StackNavigator setting my custom button as RightHeader
static navigationOptions = ({ navigation }) => ({
title: `${navigation.state.params.Name}`,
headerRight: (
<ContextMenuButton
/>)
I would like to know if it is possible to use the React Native Popup Menu, display and use it in combination with the headerRight
I've been wondering about this as well, and found a solution:
Generally, all the Menu parts have to be inside of the Menu tag, so the MenuTrigger as well.
You can style the MenuTrigger but I didn't get it into the top bar with that.
Good news: It's even easier than that, simply place the whole Menu into your navigationOptions like this:
static navigationOptions = ({navigation}) => ({
title: 'Uploaded Videos',
drawerLockMode: 'locked-closed',
headerRight:
<Menu renderer={SlideInMenu} style={{ zIndex: 10 }}>
<MenuTrigger text="open menu"/>
<MenuOptions style={{ flex: 1 }}>
<Text>Menu</Text>
<MenuOption onSelect={() => { console.log("clicked") text="Click me" />
</MenuOptions>
</Menu>
Caveat: navigationOptions are static, so in your menu you can't use functions of the component. But there are ways around that, see for one example this issue at react-native-navigation. Generally, you should probably use redux for that.
Hopefully this still helps you!
I add react-native-navigation-bar to my project. I want to display the left icon as a sidebar icon. I try this code but nothing is displayed :
<NavigationBar
title={'New Tech'}
height={80}
titleColor={'#fff'}
leftComponent={<Icon name="rocket"/> }
/>
ps: am installing react-native-vector-icons and import it by :
import Icon from 'react-native-vector-icons/FontAwesome';
Any help isappreciated.
It depends on your Navigation Version, but it is either called left or headerLeft (newer versions is the later):
static navigationOptions = ({ navigation }) => ({
title: `whatever`,
headerLeft: <Button title="" onPress={() => {/*do something*/}} />,
});