Today I Learned

A Hashrocket project

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

Looking for help? At Hashrocket, our JavaScript experts launch scalable, performant apps on the Web, Android and iOS. Contact us and find out how we can help you.