[RNMobile] Resolve Text Entry Issues/Errors in Alt Text Settings (#33975

)

* Resolve render error

This commit aims to fix the render error outlined here: #33057 (review)

The "outside" changes that happen when text is changed in the BottomSheetTextControl component should not be called directly from that component. Instead, they're now called within the useEffect hook.

* Replace "value" prop with "defaultValue"

The purpose of this commit is to address the text entry issues that currently exist for the TextInput component, as described here: facebook/react-native#30503

A working workaround propose in that thread is to replace the "value" prop with "defaultValue".

* Simplify component by removing unecessary hooks

The introduction of the "defaultValue" prop in f6d9697 means that it's no longer necessary to keep the value in state. "defaultValue" allows for text to be automatically changed as it's typed. See: https://reactnative.dev/docs/textinput#defaultvalue

We don't need to use "onChangeText" for the purpose of updating the input's text and can instead use it to invoke the "onChange" function.

We can also remove the useState and useEffect hooks, as they're not necessary to update the component's value.

packages/components/src/mobile/bottom-sheet-text-control/index.native.js

@@ -42,8 +42,6 @@ const BottomSheetTextControl = ( {
 		setShowSubSheet( true );
 	};
 
-	const [ value, onChangeText ] = useState( initialValue );
-
 	const horizontalBorderStyle = usePreferredColorSchemeStyle(
 		styles.horizontalBorder,
 		styles.horizontalBorderDark
@@ -77,9 +75,8 @@ const BottomSheetTextControl = ( {
 				<PanelBody style={ horizontalBorderStyle }>
 					<TextInput
 						label={ label }
-						onChangeText={ ( text ) => onChangeText( text ) }
-						onChange={ onChange( value ) }
-						value={ value }
+						onChangeText={ ( text ) => onChange( text ) }
+						defaultValue={ initialValue }
 						multiline={ true }
 						placeholder={ placeholder }
 						placeholderTextColor={ '#87a6bc' }