FlatList Render issue in react-navigation

Question

I am trying to render a FlatList in the home screen using react-navigation after refresing this error message appears:

invariant violation: Objects are not valid as a React child (found: object with keys {screenProps, navigation}). If you meant to render a collection of children, use an array instead.

//App.js
import React from 'react';
import Navigator from './src/Routes/appRoutes';
import { View, Text, StyleSheet } from 'react-native';
import TodoApp from './src/todoApp';
import SingleTodo from './src/components/singleTodo';

const App = () => {
  return (
    <Navigator />
  );
}

const styles = StyleSheet.create(
  {
    container: {
      padding: 40
    }
  }
)
export default App;






//FlatList screen 

import React, { useState } from 'react';
import { View, FlatList } from 'react-native';
import Todos from './components/todos';
import uuid from 'uuid';

const TodoApp = () => {

    const [todo, setTodo] = useState([
        {
            id: uuid(),
            title: "FFFFFFFFF",
            desc: "first description"
        },
        {
            id: uuid(),
            title: "Second title",
            desc: "Second description"
        }
    ]
    )
    return (
        <View>
            <FlatList
                data={todo}
                renderItem={({ item }) =>
                    <Todos title={item.title} desc={item.desc} />}
                keyExtractor={item => item.id}
            />
        </View>
    );
}


export default TodoApp;






//Routes

import { createStackNavigator } from 'react-navigation-stack';
import Todos from './../components/todos';
import SingleTodo from './../components/singleTodo';
import { createAppContainer } from 'react-navigation';
import { Settings } from './../settings';

const screens = {
    Home: {
        screen: Todos
    },
    SingleTodo: {
        screen: SingleTodo
    }
}
const StackScreens = createStackNavigator(screens);

export default createAppContainer(StackScreens);






//Todos screen
import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import { NavigationNativeContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Todos = (props) => {
    console.log(props);
    const { title, desc } = props;
    return (
        <View style={styles.container}>
            <TouchableOpacity onPress={() => props.navigation.navigate('SingleTodoScreen')}>
                <View>{props}</View>
                <Text style={styles.listText}>{title}</Text>
            </TouchableOpacity>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        padding: 15,
        color: "#000",
        borderWidth: 1,
        borderColor: "#eee",
    },
    listText: {
        fontSize: 16
    }


});


export default Todos;

Answer 1

You need to remove the following line from the code

<View>{props}</View>

props is an object, and you can not write the include the object in your JSX.

So your functional component will be like this.

const Todos = (props) => {
    console.log(props);
    const { title, desc } = props;
    return (
        <View style={styles.container}>
            <TouchableOpacity onPress={() => props.navigation.navigate('SingleTodoScreen')}>
                <Text style={styles.listText}>{title}</Text>
            </TouchableOpacity>
        </View>
    )
}