react native textInput, change position of cursor on press

Question

Right now, in my react native app, I'm not able to change the intermediate value of every input. Because everytime that i presso on a text input, the caret is at the end of the inserted string.

For example:

Value: 123456 ----> I want to delete/change only 23, but i cannot because the caret is over the last value.

i tried to use selectTextOnFocus but it will fired only when i click on other text input, and it doesn't work if the data is pre-filled. I try to explain better

in the image down below I jumped from the first text Mobile Number to the second id RICE.

In the image down below I entered the new values 12321 but i if press a second time on the same input, the text will not be selected. I tried to click and stay for like 10 secs, but nothing.

I'm using xcode to make the build of the app.

this is my input component

const InputField: React.FC<Props> = (
  {
    placeholder,
    iconLeft,
    iconRight,
    dateTimeIcon,
    iconBackground,
    type,
    id,
    style,
    name,
    value,
    keyboardType,
    iconRightFunction,
    maxLength = 100,
    inputBackground,
    onChangeText,
    onChange,
    editable,
    textAlign,
    setMarginBottom,
    onFocus,
    multiline,
    numberOfLines,
    label,
    error,
    errorLabel,
    containerHeight,
    onBlur,
  },
  ref,
) => {
  const [hidePassword, showOrHidePassword] = useState(true);

  const _handleShowPassword = () => {
    showOrHidePassword(!hidePassword);
  };

  const _handleOnChange = ({ nativeEvent }) => {
    onChange && onChange(name, nativeEvent.text);
  };

  const _handleOnBlur = () => {
    onBlur && onBlur(name, value);
  };
  const input = useRef(null);
  const showPassword = type === 'password' && !error && value.length !== 0;
  return (
    <>
      {label && (
        <StyledLabelContainer setMargin={setMarginBottom}>
          <StyledLabel error={error}>{label}</StyledLabel>
          {error && <StyledLabel error={error}>{errorLabel}</StyledLabel>}
        </StyledLabelContainer>
      )}

      <StyledContainer containerHeight={containerHeight} setMargin={setMarginBottom}>
        {iconLeft && <StyledIconLeft bgColor={iconBackground}>{iconLeft}</StyledIconLeft>}
        <TouchableOpacity
          activeOpacity={0}
          onPress={() => {
            console.log('inputcurrent', input, input.current);
            input.current.focus();
          }}
          style={{ flex: 1 }}
        >
          <View pointerEvents="none" style={{ flex: 1 }}>
            <StyledInput
              style={style}
              ref={input}
              textAlign={textAlign}
              maxLength={maxLength}
              editable
              selectTextOnFocus
              clearTextOnFocus={false}
              secureTextEntry={type === 'password' && hidePassword}
              placeholder={placeholder}
              type={type}
              autoCapitalize="none"
              onChangeText={onChangeText}
              onChange={_handleOnChange}
              value={value}
              id={id}
              name={name}
              bgColor={inputBackground}
              keyboardType={keyboardType}
              blurOnSubmit={true}
              onFocus={onFocus}
              returnKeyType={'done'}
              onBlur={_handleOnBlur}
              error={error}
              multiline={multiline}
              numberOfLines={numberOfLines}
            />
          </View>
        </TouchableOpacity>

Question

How can i set the right position of cursor during a press action ? Ex: 123456 ----> user press in the middle of the string, i expect to see the caret between the numbers 3 and 4.

My tries

I read about selection but i didn't succeed to implement it, every kind of advices will be very very welcome.

Thanks for the time.

Answer 1

You can use the selection prop to position the cursor where you want it to be. See docs: https://reactnative.dev/docs/textinput.html#selection

You can create a view that looks like a text input but is instead a group of small buttons, one for each character. When the user clicks one of these buttons, you know where they want the caret (cursor) to be. Then you render the real TextInput and use the selection prop to move the caret to the correct position.