Define Your Refs with React ElementRef Flow Type

If you’re using flow in your React Native 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<typeof FlatList>
  renderItem = () => {
    // rendering stuff
  }
  render() {
    return(
      <FlatList
        ref={l => (this.l = l)}
        data={data}
        renderItem={this.renderItem}
      />)
  }
}

Node Version - 10.14.1 Flow-Bin Version - 0.107.0

Flow docs - ref functions

Edited: 9/11/2019 - Fix fat arrow, Add typing to MyList, Update description to React Native, Resolve syntax error for ref typing