ReactNativeでTodoリストを作っているとエラーが出ます。

Question

下記のコードでnPressAddを発動したらconsole.logでstateを吐いてくれるように書いたのですが,Cannot convert undefined or null to objectというエラーが出て前に進めません。

どこが間違っていますでしょうか？

import React from 'react';
import { StyleSheet, Text, View, TextInput, TouchableOpacity } from 'react-native';

export default class App extends React.Component {
  constructor() {
    super();
    state = {
      newTodo: '',
      todos: [],
    }
  }

  onChangeText = (newTodo) => {
    this.setState({ newTodo });
  }

  onPressAdd = () => {
    const newTodo = this.state.newTodo;
    this.setState({
      todos: [...this.state.todos, newTodo],
      newTodo: '',
    });
  }

  render() {
    console.log(this.state);
    return (
      <View style={styles.container}>
        <TextInput
          style={styles.form}
          onChangeText={text => this.onChangeText(text)}
        />
        <TouchableOpacity
          style={styles.addButton}
          onPress={() => this.onPressAdd()}
        >
          <Text style={styles.addButtonText}>追加</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

Answer 1

styles.addButtonなど書いてありますが、
stylesはどこで定義していますか？