How to correctly add the onHoverIn TS type for the React Native Web Pressable component?

user_5232122 0
Viewed 185

I'm using React Native Web in combination with Typescript and I would like to use the React Native Web Pressable component from the lib.

However, I faced a problem when the VSCode blames the React Native Web prop types like onHoverIn. The main issue in this situation is that the React Native prop types definition doesn't contain the enhanced props from RNWeb

Could someone, please, give to me a tip on how it could be solved in the right way?
I wouldn't like to disable TS checking in every file where I'd like to use Pressable

Here is the Error message:

type '{ 
children: Element; 
accessibilityRole: "button"; 
delayLongPress: number; 
disabled: false; 
onHoverIn: () => void; 
onHoverOut: () => void; 
onKeyDown: () => void; 
onLongPress: () => void; 
onPress: () => void; 
onPressIn: () => void; 
onPressOut: () => void; }' is not assignable to type 
  'IntrinsicAttributes & PressableProps & RefAttributes<View>'.

Property 'onHoverIn' does not exist on type
  'IntrinsicAttributes & PressableProps & RefAttributes<View>'.ts(2322)

The code example:

import React from 'react';
import {
  Text, Button, ScrollView, StyleSheet, View, Pressable 
} from 'react-native'; // in webpack conf I have an alias that fetches data from the React Native Web

....

 <Pressable
    accessibilityRole="button"
    delayLongPress={750}
    disabled={false}
    onHoverIn={() => {
      console.log('onHoverIn');
    }}
    onHoverOut={() => {
      console.log('onHoverOut');
    }}
  >
    <Text>Pressable</Text>
  </Pressable>

Thanks for any help!

react-native-web react-native typescript reactjs
1 Answers

I managed to solve this problem in only one "not-bad" way. It's just creating the Component wrapper that re-exports the original Pressable but contains the enhanced props.

I'm not sure this is the "best one" solution because we must physically create some React Component as a wrapper but our problem is relative to types only

The working example:

// This file is mainly for extending the basic Pressable RN props type
// by the React Native Web-specific properties to avoid TS blaming
import * as React from 'react';
import {
  Pressable as RNWebPressable,
  PressableProps as RNWebPressableProps
} from 'react-native';

export type PressableProps = RNWebPressableProps & {
  // RNWeb properties
  onHoverIn: (e: MouseEvent) => void;
  onHoverOut: (e: MouseEvent) => void;
}

export function Pressable(props: PressableProps) {
  return (
    <RNWebPressable {...props} />
  );
}
user_52321220
Related