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}
/>)
}
}
Tweet