Pass data between components in React Native - react-native

Question

I've been reading the documentation and searching code here, but I can't find anything that helps me.
The idea is to change the email and password values when onChange is triggered so then it will be possible to retrieve that same data from App.js but I can't find any simple example of how this works using functional components.
After reading docs/inet seems like ReactNative has been changing a lot.
Here is my Form.js component:
import React, {useState} from 'react';
import {View, Text, TextInput} from 'react-native';
import styles from './styles';
const Form = () => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
return (
<View styles={styles.container}>
<Text style={styles.inputLabel}>Email</Text>
<TextInput
placeholder="Email"
onChangeText={email => setEmail(email)}
style={styles.input}
value={email}
/>
<Text style={styles.inputLabel}>Password</Text>
<TextInput
secureTextEntry={true}
placeholder="Password"
onChangeText={password => setPassword(password)}
style={styles.input}
value={password}
/>
</View>
);
};
export default Form;
And my App.js component
import React from 'react';
import {View, Button} from 'react-native';
import styles from './styles';
import Form from './Form';
import Greeting from './Greeting';
import Terms from './Terms';
const handleButton = data => {
console.log(data);
};
const App = () => {
return (
<View style={styles.container}>
<Greeting />
<Form />
<Terms />
<View style={{marginTop: 35}}>
<Button
onPress={() => handleButton(Form['email'])}
style={styles.confirmBtn}
title="Crear cuenta"
/>
</View>
</View>
);
};
export default App;

Answer 1

Since Form.js is the child component of the App.js you need to initialise the state in App.js and pass the setState function to Form.js like below
App.js
import React, {useState} from 'react';
import {View, Button} from 'react-native';
import styles from './styles';
import Form from './Form';
import Greeting from './Greeting';
import Terms from './Terms';
const App = () => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const handleButton = data => {
console.log(email);
};
return (
<View style={styles.container}>
<Greeting />
<Form setEmail={(e)=>setEmail(e)} setPassword={(p)=>setPassword(p)} />
<Terms />
<View style={{marginTop: 35}}>
<Button
onPress={() => handleButton()}
style={styles.confirmBtn}
title="Crear cuenta"
/>
</View>
</View>
);
};
export default App;
Form.js
import React, {useState} from 'react';
import {View, Text, TextInput} from 'react-native';
import styles from './styles';
const Form = ({setEmail,setPassword}) => {
return (
<View styles={styles.container}>
<Text style={styles.inputLabel}>Email</Text>
<TextInput
placeholder="Email"
onChangeText={email => setEmail(email)}
style={styles.input}
value={email}
/>
<Text style={styles.inputLabel}>Password</Text>
<TextInput
secureTextEntry={true}
placeholder="Password"
onChangeText={password => setPassword(password)}
style={styles.input}
value={password}
/>
</View>
);
};
export default Form;