Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flow type for specific React Native events?

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

like image 490
Palisand Avatar asked Jun 30 '17 00:06

Palisand


2 Answers

Since they are exported in ViewPropTypes you can use

import type { ViewLayoutEvent } from 'react-native/Libraries/Components/View/ViewPropTypes';
like image 173
Fabio Crisci Avatar answered Sep 30 '22 20:09

Fabio Crisci


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.

like image 22
marcusstenbeck Avatar answered Sep 30 '22 20:09

marcusstenbeck