Componente principal--

 import React from "react"; import {View,SafeAreaView,Text,StyleSheet} from 'react-native'; import TestComponent from "./Components/TestComponent"; const Test = () => { return ( <View> <Text>Here are some boxes of different colours</Text> <TestComponent color='#2aa198' name='Cyan' /> <TestComponent color='#268bd2' name='Blue' /> <TestComponent color='#d33682' name='Magenta' /> <TestComponent color='#cb4b16' name='Orange' /> </View> ); }; const styles = StyleSheet.create({ }); export default Test;

Componente secundario: enter code here

 import React from "react"; import {View,Text,StyleSheet} from 'react-native'; const TestComponent = ({color,name}) => { const colour = { backgroundColor:color, }; return ( <View style={colour}> <Text>{name}{colour}</Text> </View> ) }; const styles = StyleSheet.create({ mH:{ marginHorizontal:10 }, mV:{ marginVertical:5 }, height:{ height:30 } }); export default TestComponent;

Cuando trato de usar color prop como objeto a la vista en la propiedad secundaria, recibo un error como "Los objetos no son válidos como React child (objeto encontrado con claves {backgroundColor} y también intenté usar colour.backgroundColor y aún así es no funciona y recibo el mismo error