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

Merge incompatible types. ex: type '{}' is not assignable to type '{}'

$
0
0

How do I merge the types

type TheseTypes = typeof TouchableNativeFeedback &    typeof TouchableWithoutFeedback &    typeof TouchableHighlight &    typeof TouchableOpacity;const Button: React.FC<CustomProps> = (props) => {  const ButtonInstance: TheseTypes =    props.highlight      ? TouchableHighlight      : props.nativeFeedback      ? TouchableNativeFeedback      : props.withoutFeedback      ? TouchableWithoutFeedback      : TouchableOpacity;  return (<ButtonInstance      {...props}      activeOpacity={props.opacity}>      {props.children}</ButtonInstance>  );};

I already tried using both union, intersection, Partial<T>, a custom type Subtract<T, K> = Pick<T, Exclude<keyof T, keyof K>>

Case 0 - Props incomplete.

activeOpacityfrom Touchable Highlight/Opacity is not recognized.

Result on type inference (without assigning a type to RenderButton)

(JSX attribute) activeOpacity: numberNo overload matches this call. Overload 1 of 2, '(props: Readonly<TouchableNativeFeedbackProps>): TouchableWithoutFeedback | TouchableNativeFeedback', gave the following error. Type '{ children: ReactNode; disabled: any; activeOpacity: number; style: any; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<TouchableWithoutFeedback | TouchableNativeFeedback> & Readonly<...> & Readonly<...> & Readonly<...> & Readonly<...>'. Property 'activeOpacity' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<TouchableWithoutFeedback | TouchableNativeFeedback> & Readonly<...> & Readonly<...> & Readonly<...> & Readonly<...>'. Overload 2 of 2, '(props: TouchableNativeFeedbackProps, context?: any): TouchableWithoutFeedback | TouchableNativeFeedback', gave the following error. Type '{ children: ReactNode; disabled: any; activeOpacity: number; style: any; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<TouchableWithoutFeedback | TouchableNativeFeedback> & Readonly<...> & Readonly<...> & Readonly<...> & Readonly<...>'. Property 'activeOpacity' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<TouchableWithoutFeedback | TouchableNativeFeedback> & Readonly<...> & Readonly<...> & Readonly<...> & Readonly<...>'.ts(2769)

Result on |

Same as above.

Case 1 - Props OK, Error line 5

On declaring const RenderButton, I receive these errors below, but VSCode Intellisense recommends the right props.

Result on &

Type 'TouchableWithoutFeedback' is missing the following properties from type 'TouchableHighlight': measure, measureInWindow, measureLayout, setNativeProps, and 2 more.ts(2322)

Result on Partial<>&

Types of property 'prototype' are incompatible. Type 'TouchableWithoutFeedback' is missing the following properties from type 'TouchableHighlight': measure, measureInWindow, measureLayout, setNativeProps, and 2 more.ts(2322)

Result on Partial<>|

Type 'typeof TouchableNativeFeedback' is not assignable to type 'Partial<typeof TouchableWithoutFeedback> | Partial<typeof TouchableHighlight> | Partial<TouchableNativeFeedback> | Partial<...>'. Type 'typeof TouchableNativeFeedback' is not assignable to type 'Partial<typeof TouchableOpacity>'. Types of property 'prototype' are incompatible. Type 'TouchableNativeFeedback' is missing the following properties from type 'TouchableOpacity': setOpacityTo, setTimeout, clearTimeout, setInterval, and 11 more.ts(2322)


Viewing all articles
Browse latest Browse all 6212

Trending Articles



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