Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

Type Annotation in react-navigation

$
0
0

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.


Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>