I am quite new to typescript
and so I am struggling a bit with type annotating. I am using react-navigation and adding a custom header. Everything works fine. But I am unable to add types
for custom header props.My code looks like this:
import { DrawerHeaderProps, DrawerToggleButton } from '@react-navigation/drawer';import { FullIcon } from 'm/images';import React from 'react';import { TouchableNativeFeedback } from 'react-native';import { Colors, Image, View } from 'react-native-ui-lib';const IMGASPECTRATIO = 3.052;const HomeHeader: React.FC<DrawerHeaderProps> = ({ navigation }) => { const openModal = () => { navigation.navigate('Home', { screen: 'ListView' }) }; return (<View paddingV-s2 paddingL-s1 paddingR-s4 row centerV spread height={56}><DrawerToggleButton tintColor={Colors.white} /><Image height={20} width={20 * IMGASPECTRATIO} source={FullIcon} resizeMode="contain" /><TouchableNativeFeedback onPress={openModal}><View height={35} width={35} br100 backgroundColor={Colors.blue1}></View></TouchableNativeFeedback></View> );};export default HomeHeader;
I am not sure how can I get type checking for HeaderProps
, DrawerHeaderProps
seems to be working but it doesn't show the screen I am allowed to navigate from it.I have implemented a Drawer
navigator and nested inside it is a Stack
navigator.