Here's my environment:
"react": "17.0.1",
"react-native": "0.64.0"
"@react-navigation/native": "^5.9.4"
"@react-navigation/stack": "^5.14.4"
"react-navigation-stack": "^2.10.4",
"react-native-paper": "^4.7.2",
I'm successfully implemented the integration using this guide. Here's my current inplementation for the stack navigator.
<AuthContext.Provider value={authContextValue}>
<NavigationContainer>
<Stack.Navigator
screenOptions={{
header: props => <Appbar {...props} />,
}}>
<Stack.Screen name="Verval" component={HomeScreen} />
<Stack.Screen name="ClaimForm" component={ClaimFormScreen} />
</Stack.Navigator>
</NavigationContainer>
</AuthContext.Provider>
AppBar.js
import React, {useContext} from 'react';
import {Appbar} from 'react-native-paper';
import {AuthContext} from '../../utils/authContext';
import {months} from '../../utils/helpers';
export default function CustomNavigationBar({navigation, previous}) {
const {logout} = useContext(AuthContext);
const today = new Date();
const _handleChangeMonth = () => console.log('Change month');
const _handleSearch = () => console.log('Searching');
const _handleLogout = () => logout();
return (
<Appbar.Header>
{previous ? <Appbar.BackAction onPress={navigation.goBack} /> : null}
{!previous ? (
<>
<Appbar.Content
title="My App"
subtitle={months[today.getMonth() + 1] + ' ' + today.getFullYear()}
/>
<Appbar.Action
icon="calendar-month"
color="white"
onPress={_handleChangeMonth}
/>
<Appbar.Action icon="magnify" color="white" onPress={_handleSearch} />
<Appbar.Action icon="import" color="white" onPress={_handleLogout} />
</>
) : (
<Appbar.Content
title="Claim Form Title"
subtitle="Claim Form Subtitle"
/>
)}
</Appbar.Header>
);
}
For the logout function it can be passed using auth context provider. How can I passed the props/function beetween my HomeScreen and my AppBar for the handleChangeMonth and and handleSearch function because it needed by the HomeScreen to refetch the data?
