I want to change the width of the KeyboardAvoidingView movement with custom TextInput - react-native

Question

I am developing iOS apps in React Native Expo.
To display the image icon and placeholder in the Input column, I set it to Image icon and TextInput in the View.
When using KeyboardAvoidingView, the keyboard scrolls to the bottom of TextInput as shown in the attached image (1), but does anyone know if it is possible to scroll to the bottom of the description of the input field as shown in image (2)?
Image(1)
Image(2)
The article is based on the following.
https://reactnative.dev/docs/keyboardavoidingview
Parent function code.
<KeyboardAvoidingView behavior="padding" style={styles.containerStyle}>
<SafeAreaView style={styles.containerStyle}>
<ScrollView style={styles.containerStyle}>
<View style={styles.headContainerStyle}></View>
<View style={styles.mainContainerStyle}></View>
<View style={styles.headMessageContainerStyle}>
<Text style={styles.headMessageTextStyle}>Sign Up</Text>
</View>
{/* Email */}
<MailForm
inputAccessoryViewID={inputAccessoryViewID}
isCorrectMail={isCorrectMail}
setIsCorrectMail={setIsCorrectMail}
/>
{/* Password */}
<PasswordForm
inputAccessoryViewID={inputAccessoryViewID}
isCorrectPassewordSymbol={isCorrectPassewordSymbol}
setIsCorrectPassewordSymbol={setIsCorrectPassewordSymbol}
isCorrectPassewordStringCount={isCorrectPassewordStringCount}
setIsCorrectPassewordStringCount={setIsCorrectPassewordStringCount}
/>
{/* UserId */}
<UserIdForm
inputAccessoryViewID={inputAccessoryViewID}
isCorrectUserIdSymbol={isCorrectUserIdSymbol}
setIsCorrectUserIdSymbol={setIsCorrectUserIdSymbol}
isCorrectUserIdStringCount={isCorrectUserIdStringCount}
setIsCorrectUserIdStringCount={setIsCorrectUserIdStringCount}
isAvailableUserId={isAvailableUserId}
setIsAvailableUserId={setIsAvailableUserId}
/>
{/* Screen Bottom */}
<View style={styles.bottomStyle}>
{isCorrectMail && isCorrectPassewordSymbol && isCorrectPassewordStringCount && isCorrectUserIdSymbol && isCorrectUserIdStringCount && isAvailableUserId ?
(
<TouchableOpacity
style={styles.buttonContainerStyle}>
<Text style={styles.buttonTextStyle}>Sign Up</Text>
</TouchableOpacity>
) : (
<TouchableOpacity
style={[styles.buttonContainerStyle, styles.buttonContainerInvalidStyle]}
onPress={() => navigation.navigate('SignUp')}>
<Text style={styles.buttonTextStyle}>Sign Up</Text>
</TouchableOpacity>
)}
<View style={styles.toLoginStyle}>
<Text style={styles.toLoginTextStyle}>Do you have an account?</Text>
<Text style={[styles.toLoginTextStyle, styles.toLoginTextLinkStyle]}>Login here</Text>
</View>
</View>
</ScrollView>
</SafeAreaView>
</KeyboardAvoidingView>
The code for the <UserId/> component, which we want to support scrolling for this time.
<View>
<View style={styles.searchBoxStyle}>
<View style={styles.searchWrapperStyle}>
<Pressable style={styles.searchContainerStyle} onPress={() => textInputUserId.focus()}>
<Text style={styles.searchTitleStyle}>UserId</Text>
{/* <KeyboardAvoidingView behavior="padding"> */}
<View style={defaultUserIdBorderColor ? isCorrectUserIdSymbol && isCorrectUserIdStringCount ? styles.searchViewStyle : [styles.searchViewStyle, styles.inputIncorrectBorderColorStyle]: styles.searchViewStyle}>
<Image source={require("../../../assets/profile.png")} style={styles.searchIconStyle}/>
{/* <KeyboardAvoidingView behavior="padding"> */}
<TextInput
onChangeText={onChangeUserIdText}
style={styles.searchContentStyle}
value={userIdText}
placeholder="test1234"
inputAccessoryViewID={inputAccessoryViewID}
ref={(input) => textInputUserId = input}
autoCapitalize="none"
maxLength={100}
textContentType="username"
onFocus={() => {
…
}}
onEndEditing={() => {
…
}}
/>
</View>
</Pressable>
</View>
</View>
{/* UserId Description */}
{displayUserIdDescription ? !isCorrectUserIdSymbol || !isCorrectUserIdStringCount || !isAvailableUserId ? (
<View style={styles.descriptionBoxStyle}>
<View style={styles.descriptionWrapperStyle}>
<View style={styles.descriptionContainerStyle}>
{!defaultDisplayUserIcons ? isCorrectUserIdSymbol ? <Image source={require("../../../assets/correct.png")} style={styles.descriptionIconStyle}/>: <Image source={require("../../../assets/incorrect.png")} style={styles.descriptionIconStyle}/>: null}
<Text style={styles.descriptionTextStyle}>Half-width alphanumeric characters only.</Text>
</View>
<View style={styles.descriptionContainerStyle}>
{!defaultDisplayUserIcons ? isCorrectUserIdStringCount ? <Image source={require("../../../assets/correct.png")} style={styles.descriptionIconStyle}/>: <Image source={require("../../../assets/incorrect.png")} style={styles.descriptionIconStyle}/>: null}
<Text style={styles.descriptionTextStyle} >More than 4 words and less than 100 words.</Text>
</View>
<View style={styles.descriptionContainerStyle}>
{!defaultDisplayUserIcons ? isAvailableUserId ? <Image source={require("../../../assets/correct.png")} style={styles.descriptionIconStyle}/>: <Image source={require("../../../assets/incorrect.png")} style={styles.descriptionIconStyle}/>: null}
<Text style={styles.descriptionTextStyle} >Available.</Text>
</View>
</View>
</View>
) : null: null}
</View>
Style sheet code.
import { StyleSheet } from 'react-native';
export const styles = StyleSheet.create({
containerStyle: {
flex: 1,
backgroundColor: "#1B1C56",
},
headContainerStyle: {
width: "100%",
height: "10%",
height: 40,
backgroundColor: "#1B1C56",
},
headMessageContainerStyle: {
backgroundColor: "#feffff",
alignItems: 'center',
},
headMessageTextStyle: {
fontSize: 50,
fontFamily: "AlfaSlabOne_400Regular",
color: "#1B1C56",
marginBottom: 32,
},
mainContainerStyle: {
width: "100%",
height: "15%",
backgroundColor: "#feffff",
borderTopLeftRadius: 50,
alignItems: 'center',
},
searchBoxStyle: {
flex: 1,
backgroundColor: "#feffff",
},
searchWrapperStyle: {
flex: 1,
alignItems: "center",
paddingBottom: 10,
},
searchContainerStyle: {
},
searchTitleStyle: {
fontFamily: "ABeeZee_400Regular_Italic",
color: "#262626",
marginBottom: 5,
},
searchIconStyle: {
width: 24,
height: 24,
marginRight: 10,
marginLeft: 10,
},
searchViewStyle: {
flexDirection: 'row',
alignItems: 'center',
backgroundColor: '#F6F7FB',
borderWidth: 0.5,
height: 60,
borderRadius: 5,
width: 300,
borderColor: "#F6F7FB",
},
searchContentStyle: {
flex: 1
},
inputIncorrectBorderColorStyle:{
borderWidth: 2,
borderColor: "#ED195E",
},
completeBoxStyle: {
width: 60,
alignItems: "center",
padding: 10,
},
completeTextStyle: {
fontSize: 18,
fontWeight: "bold",
color: "hsl(210, 100%, 60%)"
},
passwordIconStyle: {
marginRight: 10
},
descriptionBoxStyle:{
display: "flex",
alignItems: "center",
backgroundColor: "#feffff",
paddingBottom: 10,
},
descriptionWrapperStyle: {
},
descriptionContainerStyle: {
flexDirection: "row",
width: 300,
},
descriptionTextStyle: {
color: "#262626",
fontSize: 12,
overflow: "visible"
},
descriptionIconStyle:{
marginRight: 10,
width: 12,
height: 12,
},
bottomStyle: {
display: "flex",
alignItems: "center",
height: "100%",
backgroundColor: "#feffff",
},
buttonContainerStyle: {
alignItems: "center",
justifyContent: "center",
backgroundColor: "#1B1C56",
width: 300,
height: 60,
borderRadius: 10,
fontSize: 18,
},
buttonContainerInvalidStyle:{
backgroundColor: "#C5C5C7",
},
buttonTextStyle: {
color: "#feffff",
fontFamily: "ABeeZee_400Regular_Italic",
},
toLoginStyle: {
marginTop: 10,
height: "5%",
flexDirection: "row"
},
toLoginTextStyle: {
fontFamily: "ABeeZee_400Regular_Italic",
},
toLoginTextLinkStyle: {
color: "#ED195E",
marginLeft: 10,
},
});
Swapped the positions of KeyboardAvoidingView, SafeAreaView and ScrollView. I have tried to set the keyboardVerticalOffset and the keyboardVerticalOffset, but each had its own problems, and the current code was the closest to the ideal.