typescriptreact-nativereact-native-textinput

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


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

Solution

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