Undefined 不是 React Native 上的 object（评估“this.props.navigation.navigate”）

Question

I am currently working on my first react native project using Expo and I have a problem between the screens navigation where I get " undefined is not an object (evaluating 'this.props.navigation.navigate') ". I want to know what is actually the problem and how can I fix it. Thank you. Here is the code for the screen where there is a navigation problem:

import {
  StyleSheet,
  Text,
  View,
  Button,
  Date,
  KeyboardAvoidingView,
} from "react-native";
import t from "tcomb-form-native";
import moment from "moment";

const Form = t.form.Form;

const User = t.struct({
  Surname: t.String,
  Name: t.String,
  Birthday: t.Date,
});

const options = {
  fields: {
    Surname: {
      label: "Surname",
    },
    Name: {
      label: "Name",
    },
    Birthday: {
      mode: "date",
      label: "Birthday",
      config: {
        defaultValueText: "Click here to enter your birthday",
        format: (date) => {
          return moment(date).format("DD / MM / YYYY"); 
        },
      },
    },
  },
};

class Newform extends Component {
  render() {
    return (
      <KeyboardAvoidingView behavior="padding">
        <Text style={styles.setColorGreen} color="#8cba51">
          Informations
        </Text>
        <Form ref="form" type={User} options={options} />
        <Button
          onPress={() => this.props.navigation.navigate("Chat")}
          title="Next"
          color="#8cba51"
        />
      </KeyboardAvoidingView>
    );
  }
}

var styles = StyleSheet.create({
  setColorGreen: {
    color: "#8cba51",
    alignItems: "center",
    justifyContent: "center",
    padding: 20,
    fontWeight: "bold",
    textAlign: "center",
    fontSize: 20,
  },
});

export default Newform; ```

Answer 1

You might not pass this component as screen component. Can you please share your Navigator or share your higher level component that has this component in it? The Navigator should look like this:

<Stack.Navigator>
  <Stack.Screen name="NewForm" component={NewForm} />
<Stack.Navigator>

Or if you use this component inside a screen component you should pass navigation prop to child component like this

// Stack Navigator
<Stack.Navigator>
  <Stack.Screen name="NewForm" component={FormScreen} />
<Stack.Navigator>

class FormScreen extends Component {
  render() {
    return (
      <NewForm {...this.props} />
    );
  }
}