【Android】Unexpected view type nested under text node というエラーの理由

はじめに

React Nativeでアプリ開発中に、ずっとiOSのシミュレータで動作確認をしていて、
Androidで動かそうとしたら

Unexpected view type nested under text node: class com.facebook.react.uimanager.LayoutShadowNode

というエラーに遭遇しました。

エラーの原因

このエラーは、<Text></Text> タグの中に <View> や <TouchableOpacity> などが入っていると起こるようです。
（<Text>タグの入れ子はエラーになりません）

今回のエラーの該当箇所のコードは

<Text>
  <TouchableOpacity>
    …
  </TouchableOpacity>
</Text>

となっていました。

おわりに

このエラーはAndroidでしか出ず、iOSでは正常に表示されてしまいます。

iOSのシミュレータで確認しつつ開発→ある程度出来上がったらAndroidで確認、という開発方法を取っていたので、Androidで起動した際にエラーになって、しかもエラー該当箇所が表示されないため場所を特定するのがとても大変でした…。

これからReact Nativeで開発する際は、 <Text> タグの中には <Text> 以外入れないように気をつけようと思います。