I'm having a hard time trying to pass the value of the TextInput and DropDown Lists from a Child Component to a Parent Component, but in turn the DropDown Lists are sitting as Child Components in the Modal where the TextInput is located.
I tried to implement solutions that I found in online documentations with similar approaches,but I didn't get any progress in my purpose. I'm a newbie to React native programming.
On the other hand, I'm expecting onPress SAVE (<TouchableOpacity>SAVE</TouchableOpacity>) to pass the TextInput and DropDown Lists value from the Child Component to the Form (<Text>{value}</Text>, <Text>{name}</Text>, <Text>{...}</Text> and <Text>{...}</Text>) sitting in the Parent Component.
Thank you in advance for any help you can provide in getting this issue solved.
Here you have my HomeTeamInfo.tsx code which is the Parent Component:
import React, {useState} from 'react'; import { ActivityIndicator, Alert, GestureResponderEvent, Image, ImageBackground, Keyboard, KeyboardAvoidingView, Platform, StyleSheet, Text, TextInput, TouchableOpacity, TouchableWithoutFeedback, View, useColorScheme, } from 'react-native'; import {Colors} from 'react-native/Libraries/NewAppScreen'; import TeamLogo from '../assets/Icons/TeamLogo1.png'; import {Formik} from 'formik'; import * as yup from 'yup'; import FlatButton from './Button'; import {colors} from './colors'; import {NativeStackScreenProps} from '@react-navigation/native-stack'; import {RootStackParamList} from '../StackFirst/ScreenMode'; import Icon from 'react-native-vector-icons/Ionicons'; import AddPlayer from '../PlayersPick/AddPlayer'; const titleSchema = yup.object().shape({ title: yup .string() .required('Team Name is required') .matches( /[A-Za-z]+/,'Type the right Format (at least one letter is a must)', ) .min(2, 'Should be a minimum of 2 characters') .max(14, 'Should be a maximum of 18 characters'), }); type propsType = NativeStackScreenProps<RootStackParamList, 'HomeTeamInfo'>; const HomeTeamInfo = (props: propsType) => { const {route} = props; const {value} = route.params; const isDarkMode = useColorScheme() === 'dark'; const backgroundStyle = { backgroundColor: isDarkMode ? Colors.darker : Colors.lighter, }; const [visible, setIsVisible] = useState<boolean>(false); const [image, setImage] = useState<string>('https://ibb.co/rmdD6zz'); const [focused, setFocused] = useState<boolean>(false); const [name, setName] = useState<string>(''); const [genName, setGenName] = useState([]); const handleAddName = () => { setName(name); console.log(name); }; const handlePlayerModal = () => { setIsVisible(false); }; return (<KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'} style={styles.keyboardContainer}><TouchableWithoutFeedback onPress={Keyboard.dismiss}><View style={{ flex: 1, paddingHorizontal: 10, backgroundColor: backgroundStyle.backgroundColor, }}><Formik initialValues={{title: ''}} validationSchema={titleSchema} onSubmit={(values, actions) => { Alert.alert(JSON.stringify(values)); setTimeout(() => { actions.setSubmitting(false); }, 1000); }}> {({ handleChange, handleBlur, handleSubmit, isSubmitting, values, errors, touched, isValid, }) => (<View style={styles.textContainer}><View style={styles.teamComplete}><View><Image source={require('../assets/Icons/TeamName.png')} resizeMode="contain" style={{ width: 45, height: 45, tintColor: isDarkMode ? Colors.lighter : Colors.darker, }} /></View><View style={styles.teamView}><TextInput style={[ { margin: 3, borderBottomColor: isValid ? '#088F8F' : '#ff0000', borderBottomWidth: 1, fontSize: 20, padding: 5, color: isDarkMode ? Colors.lighter : Colors.darker, }, !focused && { borderBottomWidth: 1, borderBottomColor: colors.secondary, shadowOffset: {width: 4, height: 2}, shadowColor: colors.primary, shadowOpacity: 0.3, shadowRadius: 2, }, ]} placeholder="Team Name" placeholderTextColor={'gray'} maxLength={14} inputMode="text" onChangeText={handleChange('title')} value={values.title} autoFocus={false} onBlur={handleBlur('title')} onFocus={() => { setFocused(true); }} /></View></View><View style={styles.iconView}> {values.title.length < 1 ? null : errors.title ? (<Image style={{height: 20, width: 20}} source={require('../assets/Icons/wrong.png')} /> ) : (<Image style={{height: 20, width: 20}} source={require('../assets/Icons/correct.png')} /> )}<Text style={styles.formikText}> {touched.title && errors.title}</Text></View><View style={{marginTop: 5}}><Text style={{ alignSelf: 'center', fontSize: 22, fontWeight: 'bold', color: isDarkMode ? Colors.lighter : Colors.darker, }}> Team Roster</Text></View><View style={styles.players}><View style={{ justifyContent: 'center', width: '16%', alignItems: 'center', }}><Text style={{ color: isDarkMode ? Colors.lighter : Colors.darker, fontSize: 20, top: 40, marginTop: -24, }}> {value}</Text><Image style={{ tintColor: isDarkMode ? Colors.lighter : Colors.darker, width: 50, height: 50, }} source={require('../assets/Icons/Jersey.png')} /></View><View style={{ justifyContent: 'center', borderLeftColor: isDarkMode ? Colors.lighter : Colors.darker, borderLeftWidth: 1, width: '28%', }}><Text style={{ marginLeft: 5, alignSelf: 'center', fontWeight: 'bold', color: isDarkMode ? Colors.lighter : Colors.darker, }}> Name</Text><Text style={{ alignSelf: 'center', marginLeft: 5, fontSize: 20, color: isDarkMode ? Colors.lighter : Colors.darker, }}> {name}</Text></View><View style={{ justifyContent: 'center', borderLeftColor: isDarkMode ? Colors.lighter : Colors.darker, borderLeftWidth: 1, width: '28%', }}><Text style={{ marginLeft: 5, alignSelf: 'center', fontWeight: 'bold', color: isDarkMode ? Colors.lighter : Colors.darker, }}> Position</Text><Text style={{ alignSelf: 'center', marginLeft: 5, color: isDarkMode ? Colors.lighter : Colors.darker, }}> ...</Text></View><View style={{ justifyContent: 'center', borderLeftColor: isDarkMode ? Colors.lighter : Colors.darker, borderLeftWidth: 1, width: '28%', }}><Text style={{ marginLeft: 5, alignSelf: 'center', fontWeight: 'bold', color: isDarkMode ? Colors.lighter : Colors.darker, }}> Lineup</Text><Text style={{ alignSelf: 'center', marginLeft: 5, color: isDarkMode ? Colors.lighter : Colors.darker, }}> ...</Text></View><TouchableOpacity style={{left: -20, top: -23}} onPress={() => setIsVisible(true)}><Icon name="add-circle-outline" size={25} color={isDarkMode ? Colors.lighter : Colors.darker} /></TouchableOpacity> {<AddPlayer visible={visible} onClose={handlePlayerModal} name={name} handleAddName={handleAddName} /> }</View> {isSubmitting ? (<ActivityIndicator animating={true} size="large" color="purple" /> ) : (<FlatButton text="submit" onPress={ handleSubmit as unknown as ( e: GestureResponderEvent, ) => void } /> )}</View> )}</Formik></View></TouchableWithoutFeedback></KeyboardAvoidingView> ); }; const styles = StyleSheet.create({ textContainer: { flex: 1, marginTop: 15, paddingHorizontal: 10, }, teamComplete: { flexDirection: 'row', justifyContent: 'space-between', marginTop: 10, }, teamView: { width: '70%', }, iconView: { flexDirection: 'row', marginLeft: 2, marginTop: 3, }, formikText: { color: '#ff0000', fontWeight: 'bold', marginLeft: 10, }, keyboardContainer: { flex: 1, }, players: { flexDirection: 'row', justifyContent: 'space-between', backgroundColor: 'purple', marginTop: 8, borderRadius: 8, }, playerImage: { width: 50, height: 50, }, }); export default HomeTeamInfo;Here is my AddPlayer.tsx code which is a Child Component in HomeTeamInfo.tsx, and in turn has the other three Child Components (AwayTeamInfo.tsx, Position.tsx and LineUp.tsx) from which I also expect to get the value from...
import React, {FC, memo, useEffect, useState} from 'react'; import { Alert, Image, Keyboard, KeyboardAvoidingView, Modal, Platform, StyleSheet, Text, TextInput, TouchableOpacity, TouchableWithoutFeedback, View, useColorScheme, } from 'react-native'; import Icon1 from 'react-native-vector-icons/AntDesign'; import {Colors} from 'react-native/Libraries/NewAppScreen'; import AwayTeamInfo from '../TeamInfoRec/AwayTeamInfo'; import Position from '../TeamInfoRec/Position'; import LineUp from '../TeamInfoRec/LineUp'; import {colors} from '../TeamInfoRec/colors'; export type AddPlayerProps = { onClose: () => void; visible: boolean; name: string; handleAddName: () => void; }; const AddPlayer: FC<AddPlayerProps> = ({onClose, visible, handleAddName}) => { const isDarkMode = useColorScheme() === 'dark'; const backgroundStyle = { backgroundColor: isDarkMode ? Colors.darker : Colors.lighter, }; const [focused, setFocused] = useState<boolean>(false); const [name, setName] = useState<string>(''); const [errors, setErrors] = useState<string>(''); return (<Modal visible={visible} onRequestClose={onClose} transparent animationType="slide"><KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'} style={{flex: 1}}><TouchableWithoutFeedback onPress={Keyboard.dismiss}><View style={styles.addContainer}><View style={{ backgroundColor: backgroundStyle.backgroundColor, padding: 18, top: 2, width: '90%', height: 400, borderRadius: 20, shadowColor: '#000', shadowOffset: { width: 0, height: 2, }, shadowOpacity: 0.25, shadowRadius: 4, elevation: 5, }}><View style={{alignItems: 'flex-end'}}><TouchableOpacity style={{alignItems: 'center', justifyContent: 'center'}} onPress={onClose}><Icon1 name="close" size={25} color={isDarkMode ? Colors.lighter : Colors.darker} /></TouchableOpacity></View><View style={styles.modalContent}><View style={{alignItems: 'center'}}><Text style={{ fontSize: 22, fontWeight: 'bold', color: isDarkMode ? Colors.lighter : Colors.darker, }}> Player's Info</Text></View><View style={styles.firstTextInput}><View style={{width: '25%', left: -26, zIndex: 3}}><AwayTeamInfo /></View><View style={{width: '60%', paddingRight: -29}}><TextInput style={{ fontSize: 20, borderBottomColor: focused ? colors.primary : colors.secondary, borderBottomWidth: 2, left: -5, paddingRight: -33, }} autoCapitalize="words" placeholder="Name" maxLength={16} placeholderTextColor={'gray'} value={name} onFocus={() => { setFocused(true); }} onBlur={() => { setFocused(false); }} onChangeText={name => setName(name)} /></View><View> {name !== ''&& (<TouchableOpacity style={{left: 25}} onPress={() => setName('')}><Image style={{ height: 25, width: 25, top: 2, left: -13, tintColor: isDarkMode ? Colors.lighter : Colors.darker, }} source={require('../assets/Icons/clear.png')} /></TouchableOpacity> )}</View></View><View><View style={{ width: '32%', left: -111, marginTop: 35, zIndex: 2, }}><Position /></View></View><View><View style={{width: '45%', left: -91, marginTop: 87, zIndex: 1}}><LineUp /></View></View><TouchableOpacity disabled={name === ''} onPress={handleAddName} style={{ borderRadius: 8, paddingVertical: 10, paddingHorizontal: 60, backgroundColor: 'blue', top: 88, left: 74, }}><View><Text style={{ color: 'white', fontWeight: 'bold', fontSize: 16, textAlign: 'center', }}> SAVE</Text></View></TouchableOpacity></View></View></View></TouchableWithoutFeedback></KeyboardAvoidingView></Modal> ); }; const styles = StyleSheet.create({ addContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'rgba(0,0,0,0.5)', }, modalContent: { alignItems: 'center', alignContent: 'space-between', flexDirection: 'column', }, firstTextInput: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', marginTop: 10, }, }); export default memo(AddPlayer);You can have a look to the image descriptions in the following links...https://i.stack.imgur.com/jovS1.jpghttps://i.stack.imgur.com/y64bB.jpg
![Yazz Ahmed – Shinrin-Yoku (2026) [Official Digital Download 24bit/48kHz]](http://imghd.xyz/images/2026/06/02/v090gmbpifncu_600.jpg)
