Stream type for specific Response events?

Question

For streaming events, I define custom types, such as the following:

export type OnScrollEvent = { nativeEvent: { contentOffset: { y: number }, contentSize: { height: number } } } 

Obviously, there are several missing properties (for example, x and width ), but I do not need them yet.

I tried to find similar types for RN, but found only an Event type that does not seem particularly useful:

 import type {Event} from "react-native"; handleEvent = (e: Event) => console.log(e.inexistentProperty) // Flow doesn't care! 

Are there any existing stream types for React Native events, or should I continue to define them myself?

Refresh

They seem to be scattered throughout the code base. Here is the layout event type:

 export type ViewLayout = { x: number, y: number, width: number, height: number, } export type ViewLayoutEvent = { nativeEvent: { layout: ViewLayout, } } 

located in ViewPropTypes.js

Answer 1

Take a look at SyntheticEvent . There are basic definitions for PressEvent and ScrollEvent. You can pass the type to the generic SynthenticEvent type to define everything you need. The nativeEvent user gets your own type.

 function handler(e: SyntheticEvent<CustomType>): void { // e.nativeEvent... } 

I have not played with this yet, but I will probably do it soon.

There is documentation as part of ReactJS by type there, and a search for your own code base should appear if any of them are defined.

Support seems to be limited compared to v0.53, so you may have to check what you get and roll.

Leyland Richardson supports Gist with RN types, but this does not cover events.

Answer 2

Since they are exported to ViewPropTypes you can use

 import type { ViewLayoutEvent } from 'react-native/Libraries/Components/View/ViewPropTypes'; 

Answer 3

You will need to play a little detective (as you noticed). In the following place there are several types of events.

import {type ScrollEvent} from "react-native/Libraries/Types/CoreEventTypes";

And it looks like a good place to search is the folder;

"react-native/Libraries/Types"

In any other case, go to the source code and follow from the component for which you are trying to find the event. It is usually quite simple, although annoying, to find the type.