I trying to add right navigation header button directly on from Component, and implementation steps have been changed navigation 5.0 version, there is one method that provide add button with method
function HomeScreen({ navigation }) {
const [count, setCount] = React.useState(0);
navigation.setOptions({
headerRight: () => (
<Button onPress={() => setCount(c => c + 1)} title="Update count" />
),
});
return <Text>Count: {count}</Text>;
}
but need to implement on it
export default class HomeScreen extends Component {
constructor() {
super()
}
render() {
return ()
}
}
You can do this in your component constructor
this.props.navigation.setOptions({
headerRight: () => <Button />
});
Try this
<Stack.Screen
code..//
options={{
code...//
headerRight: () => (
<Button
onPress={() => alert('This is a button!')}
title="Info"
color="#fff"
/>
),
}}
/>
Related
The documentation here https://reactnavigation.org/docs/header-buttons says I need to use useLayoutEffect to trigger a function from another file but I am using a class component and have no plan to switch to that other type.
How do I re write this file so I can get access to navigation.getParam because now it's undefined
export default class Dashboard extends React.Component {
constructor() {
super();
this.state = {
};
}
onLogout = () => {
alert.alert('Alert', 'Testing...')
}
componentDidUpdate(){
this.props.navigation.setParams({ onLogout: this.onLogout});
}
componentDidMount() {
this.props.navigation.setParams({ onLogout: this.onLogout});
}
render() {
return (
<View style={styles.container} />
);
}
}
Navigation code
<BottomTab.Screen
name="Dashboard"
component={Dashboard}
options={({ route, navigation }) => ({
// title: "Dashboard",
tabBarIcon: () => <Icon name="printer" size={20} color="black" />,
headerLeft: () => (
<Icon style={{ marginLeft: 14 }} name="user" size={20} color="black" />
),
headerRight: (
<Button
onPress={navigation.getParam('onLogout')}
/>
)
})}
/>
According to the React-Navigation docs (https://reactnavigation.org/docs/header-buttons/), in the header, we can interact with screen's state:
function StackScreen() {
return (
<Stack.Navigator>
<Stack.Screen
name="Home"
component={HomeScreen}
options={({ navigation, route }) => ({
headerTitle: props => <LogoTitle {...props} />,
})}
/>
</Stack.Navigator>
);
}
function HomeScreen({ navigation }) {
const [count, setCount] = React.useState(0);
React.useLayoutEffect(() => {
navigation.setOptions({
headerRight: () => (
<Button onPress={() => setCount(c => c + 1)} title="Update count" /> // <===== SET STATE
),
});
}, [navigation]);
return <Text>Count: {count}</Text>;
}
It works fine when I set screen's state from header. But when I try to get screen's state from header, it's always return the initial value of state.
<Button
onPress={() => {
setCount(c => c + 1);
alert(count)
}}
title="Update count" />
How can I get the current state of screen from header?
I've had the solution:
Problem is in the React.useLayoutEffect() function.
I need to pass [count] to the second argument of this function instead of [navigation]:
React.useLayoutEffect(()=>{
...
}, [count]);
Then, it works fine
Previously I have set the headerRight option in the root component that renders child component with Screen options like this
export default function App() {
return (
<RecipeProvider>
<NavigationContainer>
<Stack.Navigator initialRouteName="Recipes">
<Stack.Screen
name="Recipes"
component={RecipeList}
options={({ navigation }) => ({
headerRight: () => (
<TouchableOpacity
style={styles.button}
onPress={() => navigation.navigate("New Recipe")}
>
<FontAwesomeIcon icon={faPlus} size={20} />
</TouchableOpacity>
),
})}
/>
and now I would like to move the headerRight inside the component definition (so I don't end up with a huge App file with details that are only relevant to the screen component themselves)
I have read other solutions and tried the following
export default function RecipeList({ navigation }) {
const { recipes } = useContext(RecipeContext);
return (
<View style={styles.container}>
<FlatList
numColumns={2}
data={recipes}
keyExtractor={(recipe: Recipe) => recipe.id}
renderItem={({ item }) => {
return (
<RecipeItem
name={item.name}
minutes={item.minutes}
image={item.image}
title="Go to Detail Screen"
onPress={() => {
navigation.navigate("Recipe Details", { item });
}}
/>
);
}}
/>
</View>
);
}
RecipeList.navigationOptions = ({ navigation }) => ({
headerRight: () => (
<TouchableOpacity
style={styles.button}
onPress={() => navigation.navigate("New Recipe")}
>
<FontAwesomeIcon icon={faPlus} size={20} />
</TouchableOpacity>
),
});
But the headerRight button doesn't show no more ... any ideas ?
Thank you all <3
My headerRight is below and it works for me
EditScreen.navigationOptions = navData => {
const submitFn = navData.navigation.getParam('submit');
return {
headerTitle: 'Edit Data'
headerRight: (
<HeaderButtons HeaderButtonComponent={HeaderButton}>
<Item
title="Save"
iconName={
Platform.OS === 'android' ? 'md-checkmark' : 'ios-checkmark'
}
onPress={submitFn}
/>
</HeaderButtons>
)
};
};
I want to create a header on top with title for each screen and button on the right to open the drawer in react navigation 3.x
In the code below the header does not show.
//Updated with Current code
import React, { Component } from 'react';
import { Button } from 'react-native';
import {
createStackNavigator,
createDrawerNavigator,
createAppContainer
} from 'react-navigation';
import MyHomeScreen from './components/HomeScreen';
import MyNotificationsScreen from './components/ProfileScreen';
const MyDrawerNavigator = createDrawerNavigator(
{
Home: {
screen: MyHomeScreen
},
Notifications: {
screen: MyNotificationsScreen
}
},
{
initialRouteName: 'Home',
navigationOptions: navigationOptionsHeader
}
);
const navigationOptionsHeader = ({ navigation }) => {
return {
headerTitle: 'MY Home',
headerRight: (
<Button
onPress={() => navigation.toggleDrawer()}
title="Info"
color="#222"
/>
)
};
};
const AppContainer = createAppContainer(MyDrawerNavigator);
class App extends Component {
render() {
return <AppContainer />;
}
}
export default App;
Use this inside your screen class
static navigationOptions = ({ navigation }) => {
return {
title: 'Home',
headerLeft: (
< Icon name="menu" size={30} style={{marginStart:10}} backgroundColor="#000000" onPress={() => navigation.openDrawer()} > < /Icon>
),
};
};
try this
const MyDrawerNavigator = createDrawerNavigator(
{
Home: {
screen: MyHomeScreen
},
Notifications: {
screen: MyNotificationsScreen
}
},
{
initialRouteName: 'Home'
navigationOptions: navigationOptionsHeader,
}
);
const navigationOptionsHeader=({navigation})=>{
return {
headerRight: (
<Button
onPress={() => navigation.toggleDrawer();
}
title="Info"
color="#222"
/>
)
};
}
you can also add other stuffs in header like this
const navigationOptionsHeader=({navigation})=>{
return {
headerRight: (
<Button
onPress={() => navigation.toggleDrawer();
}
title="Info"
color="#222"
/>
)
headerLeft : <headerLeft/>,
title: //Header Title
headerStyle: { backgroundColor: '#161616', height:48, },
headerTitleStyle:{ color:'#cd9bf0', fontWeight: '400', alignSe
};
}
The navigationoptions had been renamed as defaultNavigationOptions in v3.
Please refer the documentation from https://reactnavigation.org/docs/en/headers.html
For React Navigation 5
Use the prop options as a function:
<Stack.Screen
name="screen name"
component={ScreenComponent}
options={({ navigation }) => ({
headerRight: (props) => {
return <Button onPress={() => navigation.toggleDrawer() }} />
}
})}
/>
https://reactnavigation.org/docs/upgrading-from-4.x/#configuring-the-navigator
For react navigation 5.x
<Stack.Screen
name="Home"
component={HomeScreen}
options={{
headerLeft: () => (
<View>
<Icon
onPress={() => navigation.toggleDrawer()}
name="menu"
/>
</View>
),
}}
/>
While writing the code, not in render function the button is not navigating to the page/screen.
it is showing cannot find variable 'this.navigation.navigate'
OnPressfunction is just giving out error
static navigationOptions = {
headerTitle: 'Review Jobs',
headerRight: (
<Button
onPress={() => this.navigation.navigate('settings')}
title="Settings"
color="#fff"
/>
),
}
You shold use a fat arrow function and pass the {navigation} az props to the static navigationOptions.
Your desired code would be:
static navigationOptions = ({ navigation }) => {
headerTitle: "Review Jobs",
headerRight: (
<Button
onPress={() => navigation.navigate("settings")}
title="Settings"
color="#FFF"
/>
),
}
You need pass the navigation in parameter, like this.
static navigationOptions = ({navigation}) => {
headerTitle: 'Review Jobs',
headerRight: (
<Button
onPress={() => navigation.navigate('settings')}
title="Settings"
color="#fff"
/>
),
}
do it like this:
render() {
return (
<View>
<Button title="show me settings" onPress={this.GoToSettings} />
</View>
);
}
GoToSettings= () => {
this.props.navigation.navigate('Settings');
};
edit 1
oh sorry i think i misunderstood it in the first place
you need to pass the values (({navigation})) through the Fat Arrow funktion otherwise the onPress function cant work with it
this i hopefully what you are searching for:
static navigationOptions = ({ navigation}) => ({
title: "Review Jobs",
headerRight: <Button title="Settings" onPress={()=>{
navigation.navigate('settings'); }} />,
});