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」エラーが発生した時の対処方法についてでした。
ご参考になれば幸いです。
