I have this simple Text Input but the problem is that on Android Devices, when the user has written a long text, the cursor doesn't go automatically in the beginning of the field but it stays in the end. How can I fix this?
<TextInput
key={currencyTypeId}
ref={forwardRef}
style={styles.input}
onChangeText={onChangeText}
value={inputValue}
editable={editable}
autoCorrect={false}
autoCompleteType='off'
returnKeyType={returnKeyType}
placeholder={placeholder}
placeholderTextColor={placeholderColor}
keyboardType={keyboardType}
/>
As it turns out there was no solution for this for andorid devices. I managed to find another solution by using this property onContentSizeChange and defining a state for input height so the text could break in more than 1 line.
const [height, setHeight] = useState();
Add this to TextInput component
onContentSizeChange={({
nativeEvent: {
contentSize: { height: newHeight },
},
}) => {
setHeight(newHeight);
}}
If you have a problem with the height style in the text input styles, pass the height as condition to the styles and define the height styles you want based on it.
Example:
style={[
styles.input,
inputValue ? (inputValue.length > 30 ? { height: heightInput } : { height: '10%'}) : null,
]}