react native header state to screen possible? - react-native

Question

I have a header where is a input field. Is that possible to pass the value to my screen file ?
Header.js
import React, { useCallback } from 'react';
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, TouchableOpacity, Dimensions, Platform, TextInput } from 'react-native';
import { useNavigation } from '#react-navigation/native';
import { Feather, AntDesign } from '#expo/vector-icons';
import Constants from 'expo-constants';
const width = Dimensions.get('window').width;
const headerHeight = 50;
const headerMessages = (text) => {
const navigation = useNavigation();
const [search, setSearch] = React.useState('');
const handleChangeInput = React.useCallback((e) => text(e));
const handleGoBack = useCallback(() => {
navigation.goBack();
});
return (
<View style={styles.container}>
<View style={styles.topHeader}>
<StatusBar color="#333" />
<Text style={styles.headerTitle}>Messages (0)</Text>
</View>
<View style={styles.searchContainer}>
<TextInput value={search} style={styles.searchInput} onChangeText={handleChangeInput} placeholder='Search Field' />
</View>
</View>
)
};
})
export default headerMessages;
Message.js
import * as React from 'react';
import { StyleSheet, Text, View, Pressable } from 'react-native';
const Messages = (props) => {
console.log(props.text);
return (
<View style={s.container}>
<Text>Messages</Text>
</View>
)
};
............................................................................................................................................................

Answer 1

If you want the 'search' state value in Message.js file, in that case initialize search in Message.js file and pass the setSearch hook as a callback function in the Header.js file.
And in the Header.js, get the state as props and set the value in textinput. In this way you will get the search value in the message.js file.