title: undefined is not an object react native(evaluting 'props.text')
body: <p>//<strong><strong><strong>APP.js FILE</strong></strong></strong>**//</p>
  <pre><code>import { StatusBar } from 'expo-status-bar';
  import {StyleSheet, Text, View, Button, TextInput, ScrollView, FlatList} from 'react-native';
  import {useState} from &quot;react&quot;;
  import GoalItem from &quot;./components/GoalItem&quot;;
  // import GoalItem from &quot;./components/GoalItem&quot;;
  export default function App() {
    const [enteredGoalText, setEnteredGoalText] = useState('')
    const [courseGoal, serCourseGoals]= useState([])
    function goalInputHandeller(enteredText){
      setEnteredGoalText(enteredText)
  
    }
  
    function  addGoalHandeller(){
      console.log(enteredGoalText)
      serCourseGoals(currentCourseGoal=&gt;[...courseGoal,
        {text:enteredGoalText,id:Math.random().toString()},
      ])
    }
    return (
  &lt;View style={styles.appContainer}&gt;
    &lt;View style={styles.inputContainer}&gt;
      &lt;TextInput placeholder={'Enter Your Goal'} style={styles.textInput} onChangeText={goalInputHandeller}&gt;&lt;/TextInput&gt;
      &lt;Button title={'Add Goal'} onPress={addGoalHandeller}&gt;&lt;/Button&gt;
    &lt;/View&gt;
    &lt;View  style={styles.goalsContainer}&gt;
      &lt;FlatList data={courseGoal} renderItem={(itemData)=&gt;{
        return &lt;GoalItem text={itemData.item.text}/&gt;
        // return(
        //
        //     &lt;View  style={styles.goalItem}&gt;
        //       &lt;Text style={styles.goalTExt}&gt;{itemData.item.text}&lt;/Text&gt;&lt;/View&gt;
        // )
      }}
                keyExtractor={(item,index)=&gt;{
                  return item.id
                }}
                alwaysBounceVertical={false}
  
      &gt;
  
  
  
      &lt;/FlatList&gt;
    &lt;/View&gt;
  
  
  &lt;/View&gt;
    );
  }
  
  const styles = StyleSheet.create({
    appContainer:{
      padding: 50,
      flex:1
    },
    inputContainer:{
      flex:1,
      flexDirection:'row',
      justifyContent:'space-between',
      alignItems:'center',
      marginBottom:24,
      borderBottomWidth:1,
      borderBottomColor:'#cccccc'
    },
    textInput:{
      borderWidth:1,
      borderColor:'#CCCCCC',
      width:'70%',
      marginRight:8,
      padding:8
    },
    goalsContainer:{
      flex:4
    },
    goalItem:{
      margin:8,
      padding:8,
      borderRadius: 6,
      backgroundColor:'#5e0acc',
      color:'white'
    },
    goalTExt:{
      color:'white'
    }
  
  });
  </code></pre>
  <p>GoalInput.js FILE</p>
  <pre><code>import {StyleSheet, Text, View} from &quot;react-native&quot;;
  
  function GoalItem(props){
      return(
          &lt;View  style={styles.goalItem}&gt;
              &lt;Text style={styles.goalTExt}&gt;
                  {props.text}
              &lt;/Text&gt;
          &lt;/View&gt;
          )
  
  }
  
  
  const styles = StyleSheet.create({
      goalItem:{
          margin:8,
          padding:8,
          borderRadius: 6,
          backgroundColor:'#5e0acc',
          color:'white'
      },
      goalText:{
          color:'white'
      }
  })
  export default GoalItem();
  </code></pre>
  <p>ERROR
  12:19
  TypeError: undefined is not an object (evaluating 'props.text')</p>
  <p>Stack trace:
  node_modules\expo\build\environment\react-native-logs.fx.js:27:4 in error
  node_modules\react-native\Libraries\Core\ExceptionsManager.js:95:4 in reportException
  node_modules\react-native\Libraries\Core\ExceptionsManager.js:141:19 in handleException
  node_modules\react-native\Libraries\Core\setUpErrorHandling.js:24:6 in handleError
  node_modules@react-native\polyfills\error-guard.js:49:36 in ErrorUtils.reportFatalError
  node_modules\metro-runtime\src\polyfills\require.js:203:6 in guardedLoadModule
  <a href="http://192.168.1.7:19000/node_modules%5Cexpo%5CAppEntry.bundle?platform=android&amp;dev=true&amp;hot=false&amp;strict=false&amp;minify=false:120749:3" rel="nofollow noreferrer">http://192.168.1.7:19000/node_modules%5Cexpo%5CAppEntry.bundle?platform=android&amp;dev=true&amp;hot=false&amp;strict=false&amp;minify=false:120749:3</a> in global code
  ...
  ERROR
  12:19
  Invariant Violation: &quot;main&quot; has not been registered. This can happen if:</p>
  <ul>
  <li>Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.</li>
  <li>A module failed to load due to an error and <code>AppRegistry.registerComponent</code> wasn't called.</li>
  </ul>
  <p>Stack trace:
  node_modules\expo\build\environment\react-native-logs.fx.js:27:4 in error
  node_modules\react-native\Libraries\Core\ExceptionsManager.js:95:4 in reportException
  node_modules\react-native\Libraries\Core\ExceptionsManager.js:141:19 in handleException
  node_modules\react-native\Libraries\Core\setUpErrorHandling.js:24:6 in handleError
  node_modules@react-native\polyfills\error-guard.js:49:36 in ErrorUtils.reportFatalError
  node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:370:8 in __guard
  node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:113:4 in callFunctionReturnFlushedQueue
  [native code]:null in callFunctionReturnFlushedQueue
  ...
  This is what I get when I run it with expo
  <a href="https://i.stack.imgur.com/fLE3F.jpg" rel="nofollow noreferrer">This is ss or error</a></p>