Quantcast
Viewing all articles
Browse latest Browse all 6404

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

I'm using React Native Web in combination with Typescript and I would like to use the React Native Web Pressablecomponent 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';....<Pressable    accessibilityRole="button"    delayLongPress={750}    disabled={false}    onHoverIn={() => {      console.log('onHoverIn');    }}    onHoverOut={() => {      console.log('onHoverOut');    }}    onKeyDown={() => {      console.log('onKeyDown');    }}    onLongPress={() => {      console.log('onLongPress - 750ms delay');    }}    onPress={() => {      console.log('onPress');    }}    onPressIn={() => {      console.log('onPressIn');    }}    onPressOut={() => {      console.log('onPressOut');    }}><Text>Pressable</Text></Pressable>

Thanks for any help!


Viewing all articles
Browse latest Browse all 6404

Trending Articles



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