javascript - Props is (sometimes only) undefined in React Native. TypeError: Cannot read property 'x' of undefined

Question

I came upon a strange bug today. I am using a component called while loading first in App.js, where it works fine. I am logging props, all fine: an object. Then, navigating to next component, LogInScreen.js using React Navigation, there props is undefined. So, if called from App.js, it works, props is an object, and called from LogInScreen.js it crashes (props is undefined). If I try to destructure it, or call a member props.isNotFullScreen it crashes with the error TypeError: Cannot read property 'isNotFullScreen' of undefined

The only workaround I found was to write const isNotFullScreen = props ? props.isNotFullScreen : false; but still I am interested if one of you has an idea what is happening.

I am using React Native 0.63.3 testing with iOS simulator

Here is my Spinner component

import React from "react";
import { View, ActivityIndicator } from "react-native";
import styles from "./styles/SpinnerStyle";
import { Colors } from "../themes";

const Spinner = (props) => {
  console.log("Spinner props:", props);
  const { isNotFullScreen } = props;
  console.log("isNotFullScreen:", isNotFullScreen);
  return (
    <View style={[styles.spinner, !isNotFullScreen && styles.fullScreen]}>
      <ActivityIndicator
        animating={true}
        size="large"
        color={Colors.baseBlue}
        style={{
          flex: 1,
          justifyContent: "center",
        }}
      />
    </View>
  );
};

export default Spinner;

question from:https://stackoverflow.com/questions/65932508/props-is-sometimes-only-undefined-in-react-native-typeerror-cannot-read-prop

Answer 1

Waitting for answers