How do I create a reusable component in react native? with this example

I managed to render the component for myself after so long trying, sorry I am new to react native, but I want to use the <DarkLight> component to cover everything inside and style the whole application and be able to continue using everything, as an example : when we use a <view>: we put in the middle another functional component like <Text> or another <View> you can use everything inside it and in turn its properties, I want to use <DarkLight> in the same way as if it were a <View > that encompasses the entire app Modifying the styles or properties and placing more components inside it, such as placing a <table> inside <DarkLight> (the table is also a component created to reuse) to be able to give it properties or styles also separately or if I create another component like the example of the <Table> put it inside <DarkLight> and keep it working .... in <DarkLight> I put a <Text> and it does nothing, this is what I mean ..., and I keep using all with props, I took this example from expo co lor-schemes, I would like to make it a reusable component that encompasses my entire application so that I am able to reuse it in another application. I want to learn how to build reusable components. I see props and components I do not want to advance without understanding well, being able to create a component that I can reuse. But I'm not sure if in these cases I should use state .. someone can help me and explain and I apologize for the inconvenience. :>

// App.js

import React from 'react';
import Home from './src/Home'

export default function App() {

return (
<Home/>
);
}

// Home.js

import React from 'react';
import { Text, StyleSheet, View, useColorScheme, Button } from 'react-native';
import DarkLight from '../src/Components/Dark_Light.js'

export default function Home() {

return (

<DarkLight>
<Text>Hello World</Text>
</DarkLight>

);
} 

// Dark_Light.js

import React from 'react';
import { Text, StyleSheet, View, useColorScheme } from 'react-native';
import {globalStyles} from '../Styles/globalStyles'

const ThemeDark = (props) => {

const colorScheme = useColorScheme();
const themeTextStyle = colorScheme === 'light' ? globalStyles.lightThemeText : globalStyles.darkThemeText;

const themeContainerStyle = colorScheme === 'light' ? globalStyles.lightContainer : globalStyles.darkContainer;

const {children} = props;

return(

<View style={[globalStyles.container, themeContainerStyle]}>
<Text style={[globalStyles.text, themeTextStyle]}>
Color scheme: {colorScheme}
{children}
</Text>
{children}
</View>

)
}
export default function DarkLight() {

return (
<ThemeDark>

</ThemeDark>
);
}

// globalStyles.js // the global styles would like to be able to pass properties to it and modify it, what am I doing wrong? and what should i do?

import { StyleSheet } from "react-native";
export const globalStyles = StyleSheet.create({
 container: {
 flex: 1,
 alignItems: 'center',
 justifyContent: 'center',
},
 lightContainer: {
 backgroundColor: '#d0d0c0',
},
 darkContainer: {
 backgroundColor: '#242c40',
},
 lightThemeText: {
 color: '#242c40',
},
 darkThemeText: {
 color: '#d0d0c0',
},
});