React Nativeで「テキスト文字列は<Text>コンポーネント内にレンダリングする必要があります」エラーを解決する方法

React Nativeでアプリを開発していると、「テキスト文字列は<Text>コンポーネント内にレンダリングする必要があります（Text strings must be rendered within a <Text> component）」というエラーに遭遇することがあります。本記事では、このエラーが発生するコード例をもとに、その原因と具体的な解決方法をわかりやすく解説します。

エラーが発生するコード例

import React from "react";
import { Image, Text, View, StyleSheet } from "react-native";
export default class App extends React.Component {
    render() {
        return (
            <View style={styles.container}>
                <Image
                    style={styles.stretch}
                    source={{
                        uri:
                            'https://pbs.twimg.com/profile_images/486929358120964097/gNLINY67_400x400.png',
                    }}
                />
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        paddingTop: 50,
        paddingLeft: 50,
    },
    stretch: {
        width: 200,
        height: 200,
        resizeMode: 'stretch',
    },
});

このコードを実行すると、画面には次のようなエラーが表示されます。

エラーが発生する主な原因

このエラーは、主に以下の2つの原因によって発生します。コーディングの際には、これらのミスを避けるように心がけましょう。

原因1：インデント（字下げ）の崩れ

1つ目の原因は、インデントが正しくないことです。JSXでは、各コンポーネントを適切にインデントし、子要素を親コンポーネントの中できちんと揃えて記述することが非常に重要です。インデントが崩れていると、意図しないテキストノードが生成され、このエラーの引き金となります。

原因2：行末に残った余分な空白文字

2つ目の原因は、各行の末尾に空白が残っていることです。行末の不要なスペースをすべて削除してから再度ビルドすると、正常に動作するようになります。特に、Web上のサンプルコードなどをコピー＆ペーストした場合にこの問題が発生しやすいため、注意が必要です。

修正後のコード

それでは、コードを修正して、もう一度出力を確認してみましょう。

import React from "react";
import { Image, Text, View, StyleSheet } from "react-native";
export default class App extends React.Component {
    render() {
        return (
            <View style={styles.container}>
                <Image style={styles.stretch} source={{ uri:
                    'https://pbs.twimg.com/profile_images/486929358120964097/gNLINY67_400x400.png'
                }} />
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        paddingTop: 50,
        paddingLeft: 50,
    },
    stretch: {
        width: 200,
        height: 200,
        resizeMode: 'stretch',
    }
});

出力結果

まとめ

「テキスト文字列は<Text>コンポーネント内にレンダリングする必要があります」というエラーは、インデントの崩れや行末の余分な空白といった一見些細なミスが原因で発生します。Prettierなどのコード整形ツールで自動フォーマットを行ったり、エディタの「末尾の空白を削除」機能を活用したりすることで、こうしたエラーを未然に防ぐことができます。