はじめに

react NativeはOS(Android,iOS)に依存しないアプリをかけるので、筆者の中での勉強の優先順位をじわじわと挙げている。

そんな中で、タイトルにもなっている
Invariant Violation: Text stringa must be rendered within a componet

が出てきた時の対応方法を書いておく。

コード

App.js

~~~~~(中略)~~~~~

export default class App extends React.Component {

  constructor(props){
    super(props);
    this.state = {
      todo: [
        {index: 1, tilte: "原稿を書く", done: false},
        {index: 2, tilte: "犬の散歩をする", done: false}
      ],
      currentIndex:2
    }
  }
  render() {
    return (
      <View style={styles.container}>

        <View style={styles.filter}>
          <Text>Filterがここに配置されます</Text>
        </View>
        <ScrollView style={styles.todolist}>
          <FlatList data={this.state.todo}
            renderItem={({item}) => <Text>{item.title}</Text>}
            keyExtractor={(item, index) => "todo_" + item.index} 
          />
        </ScrollView>}
        <View style={styles.input}>
          <Text>テキスト入力がここに配置されます</Text>
        </View>
      </View>
    );
  }
}


~~~~~(中略)~~~~~

解決

コードを書いてみてわかった。

の後ろの}が余計だった。

削除して実行してみると、エラーなく実行できた。