iosreact-nativemobilenativetextinput

React-native TextInput display end part of text instead of ... in ios


I've taken one example here which is similar to my requirement. So suppose I have two textinput, while typing on textinput 2 some part of that is appending on textinput 1's value also. so in Android whenever a new part is added on value it always shows me the end of the value in textinput while in iOS it shows me '...' and displays the start of the value. But I want to show always end part of the value in textinput start display as '...' is fine. So to sum it up I want the same behaviour in ios as in android

import React from 'react';
import {StyleSheet, TextInput,Button} from 'react-native';
import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';

const TextInputExample = () => {
  const [text, onChangeText] = React.useState('Useless Text');
  const [number, onChangeNumber] = React.useState('');

  return (
   
      <SafeAreaView style={{flex:1,}}>
        <TextInput
          style={styles.input}
          onChangeText={onChangeText}
          value={text}
        />
        <TextInput
          style={styles.input}
          onChangeText={onChangeText}
          placeholder="useless placeholder"
          keyboardType="numeric"
        />
        <Button title={'touch'}/>
      </SafeAreaView>
  
  );
};

const styles = StyleSheet.create({
  input: {
    height: 40,
    margin: 12,
    borderWidth: 1,
    padding: 10,

  },
});

export default TextInputExample;

ios current behaviour enter image description here

Android current behaviour:

enter image description here

Actual requirement SS enter image description here

While selecting any emoji from the emoji picker it is appending on text input value state, so it should display users added emoji at end without focusing input.


Solution

  • I have already tried with textInputRef.current.setNativeProps({ selection: { start: text.length, end: text.length },});, but was not working in ios.

    Then I found that iOS requires focus before selection. So finally I resolved by adding calling below function in onchange or on any other event you want.

    constmoveCursorToEnd = () => {
    if (textInputRef.current) {
    setIsEditable(false); // Disable input to prevent keyboard from openingsetTimeout(() => {
            textInputRef.current.focus(); // iOS requires focus before selection changesetTimeout(() => {
              textInputRef.current.setNativeProps({
    selection: { start: text.length, end: text.length },
              });
              textInputRef.current.blur(); // Blur immediately after setting selectionsetIsEditable(true); // Re-enable input
            }, 10);
          }, 10);
        }
    
    };