Define Your Refs with React ElementRef Flow Type

If you’re using flow in your React project, chances are that you are probably using refs. In this case, you’ll need to define your ref types.

Let’s say we have ref on a FlatList component from React Native:

import React from 'react'
import { FlatList } from 'react-native'
import data from './data.json'

class MyList extends React.Component {
  renderItem = () ={
    // rendering stuff
  }
  render() {
  return(
    <FlatList
      ref={l => (this.l = l)}
      data={data}
      renderItem={this.renderItem}
    />)
  }
}

Instead of being lazy and just using any, we’ll use the React.ElementRef flow type. It takes an additional typeof argument, which is the component type of your ref.

// @flow
import * as React from 'react'
import { FlatList } from 'react-native'
import data from './data.json'

class MyList extends React.Component {
  l: React.ElementRef<FlatList>
  renderItem = () ={
    // rendering stuff
  }
  render() {
  return(
    <FlatList
      ref={l => (this.l = l)}
      data={data}
      renderItem={this.renderItem}
    />)
  }
}

Flow docs - ref functions