CODEWITHSUNDEEP
typescriptreact-nativetouchableopacityonpress
Krisna
Krisna

Reputation: 3423

React native Typescript Touchableopacity props error

I have created one reusable button by using Styled component and Typescript. I made onPress void. I am using this button to the headStyles. HeaderStyles have a one prop name headerLeft. headerLeft's props' onPress is optional or undefined. When I am passing this props to my Button then I got Typescript error as expected. This is the error: Type '(() => void) | undefined' is not assignable to type '() => void'. Type 'undefined' is not assignable to type '() => void'.ts(2322). Is there any way I made headerLeft props onPress void?

This is my reuseable Button component:

import React from 'react';
import styled from 'styled-components/native';


type Props = {
  onPress: () => void;
};
const BackButtonContainer = styled.TouchableOpacity`
  padding-vertical: 16px;
  padding-horizontal: 24px;
`;

const Button = ({ onPress }: Props) => {
  return (
    <BackButtonContainer
      onPress={onPress}>
   
    </BackButtonContainer>
  );
};

export default Button;

This is headerStyles

import { StackNavigationOptions } from '@react-navigation/stack';
import React from 'react';
import Button from './buttons;

export const headerStyles: StackNavigationOptions = {
  headerStyle: {
    elevation: 0,
    borderBottomWidth: 0,
    shadowOffset: { height: 0, width: 0 },
  },
  headerTitleAlign: 'center',
  headerTintColor: colors.greyGradient[800],
  headerLeft: (props) =>
    props.canGoBack ? <Button onPress={props.onPress} /> : null, //In here I am getting typescript error

};

Upvotes: 2

Views: 1561

Answers (1)

Mic Fung
Mic Fung

Reputation: 5692

If you sure you have onPress from headerLeft props, you can use ! to inform typescript there must be onPress() and it will not be undefined:

headerLeft: (props) =>
    props.canGoBack ? <Button onPress={props.onPress!} /> : null,

More on non-null assertion operator - !

Upvotes: 1

Related Questions