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

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

• javascript
• reactjs
• react-native
• flowtype

• Yeah, type definitions would be useful. I looked at the source code, but did not see any. It seems that events are defined in Java code; for example, github.com/facebook/react-native/blob/master/ReactAndroid/src/…. The place to contribute type definitions is github.com/flowtype/flow-typed. I am sure they would welcome your custom definitions if you want to take the time to package them and put together a pull request. – Jesse Hallett Commented Nov 16, 2017 at 14:28

3 Answers 3

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.

Take a look at the SyntheticEvent type. There are basic definitions for PressEvent and ScrollEvent. You can pass a type to the generic SynthenticEvent type to define anything else you need. The member 'nativeEvent' gets your custom type.

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

I've not played about with that much yet, but will probably be doing so shortly.

There is documentation as part of ReactJS on the types there, and searching Native codebase should turn up if any of those are defined.

It looks like support is limited as of v0.53, so you might have to inspect what you get and roll your own.

Leyland Richardson maintains a Gist with RN types, but this doesn't cover Events.

Since they are exported in ViewPropTypes you can use

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