Flow type for specific React Native events?

user_3446870 0
Viewed 5880

In order to flowtype events, I define custom types like the following:

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

Obviously, there are several missing properties (like x and width), but I have no need for them yet.

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

import type {Event} from "react-native";

handleEvent = (e: Event) => console.log(e.inexistentProperty)  // Flow doesn't care!

Are there any existing flow types for React Native events or do I have to keep defining them myself?

Update

They seem to be scattered around the code base. Here's the layout event type:

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

export type ViewLayoutEvent = {
  nativeEvent: {
    layout: ViewLayout,
  }
}

found in ViewPropTypes.js

flowtype react-native reactjs javascript
3 Answers

You'll need to play a bit of detective (as you've noticed). There are a few event types in the following location.

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

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

"react-native/Libraries/Types"

In any other case, jump into the source code and follow from the component you're trying to find the event for. Usually it's pretty straightforward, although annoying, to find the type.

user_13311790

Since they are exported in ViewPropTypes you can use

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