React Native - Text Input - Long text input, cursor doesn't go at the beginning after clicking the return key type

Question

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}
          />

Does anyone know how to solve this? – coder03 Jul 23 '22 at 19:10 — coder03, Jul 23 '22 at 19:10

score 0 · Accepted Answer · answered Aug 23 '22 at 16:57

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,
              
            ]}

React Native - Text Input - Long text input, cursor doesn't go at the beginning after clicking the return key type

1 Answers1