【ESLint】「Component definition is missing display name」エラーの対処方法

ESLint のエラーがだいぶ減ってきましたが、今回は「Component definition is missing display name」というエラーについて。
こちらは、関数に名前がないと発生するエラーです。

修正の際に参考にさせていただいた記事がこちら。

Stateless Functional Component には関数名に名前を付ける – Qiita
https://qiita.com/acro5piano/items/1cffa8c6b52a36e6bb73

上記の記事によると、アロー関数ではダメで、関数名をつけるように修正する必要があるとのこと。
コードを確認したところ、react-native-tab-view ライブラリを実装する際にバッチリ使っていました…！
ので、こちらを修正していきます。

まず、アロー関数で指定していた処理を名前付き関数で指定しなおします。

import Ionicons from 'react-native-vector-icons/Ionicons';

const renderTabButton = (color, iconName) => {
  return <View style={styles.tabIcon}><Ionicons name={iconName} color={color} size={25} /></View>
}

あとは、上記の関数を無名関数と置き換えればOKです。

上記のようにコードを修正後、再度 ESLint でチェックしたところ、無事にエラーが解消されていました！

以上、ESLint のコードチェックで「Component definition is missing display name」エラーが発生した時の対処方法についてでした。
ご参考になれば幸いです。