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

Question

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

Android current behaviour:

Actual requirement SS

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.

David Scholz · Accepted Answer · 2025-02-07 11:04:19Z

0

This can be controlled on iOS since the RN release which includes the fix(ios): line break mode property added for iOS PR. There is basically a new prop now called lineBreakStrategyIOS. If you set it to push-out, then you have achieved the desired bevahior.

<TextInput
   style={styles.input}
   onChangeText={onChangeText}
   value={text}
   lineBreakStrategyIOS="push-out"
/>

If you are using an older RN version, then you could use a workaround by using textAlign='left':

<TextInput
   style={styles.input}
   onChangeText={onChangeText}
   value={text}
   textAlign="left"
/>

answered Feb 7 at 11:04

David Scholz

10k14 gold badges24 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jatin Bhuva Feb 7 at 11:39

I've react-native 0.65.3 so the first solution can't be used. and the second one just removing ... at the end but not show the end part of the text in text input. See I've uploaded the actual implementation ss, I'm appending emoji in value state of textinput.

Govind29 · Accepted Answer · 2025-02-07 12:18:16Z

0

i think this will help you get the '...' at the end of screen when you changed the focus form textinput field in android.

    import React, { useState, useRef, useEffect } from "react";
import { TextInput, View, Text, TouchableOpacity, Keyboard } from "react-native";

const App = () => {
  const [text, setText] = useState("");
  const [isFocused, setIsFocused] = useState(false);
  const inputRef = useRef(null);

  useEffect(() => {
    if (isFocused) {
      setTimeout(() => inputRef.current?.focus(), 50);
    }
  }, [isFocused]);

  return (
    <View style={{ padding: 20, marginTop: 200 }}>
      {!isFocused && text.length > 0 ? (
        <TouchableOpacity onPress={() => setIsFocused(true)} activeOpacity={1}>
          <Text
            numberOfLines={1}
            ellipsizeMode="tail"
            style={{
              borderWidth: 1,
              padding: 10,
              height: 40,
            }}
          >
            {text}
          </Text>
        </TouchableOpacity>
      ) : (
        <TextInput
          ref={inputRef}
          value={text}
          onChangeText={setText}
          onFocus={() => setIsFocused(true)}
          onBlur={() => {
            // Prevent blur if input is still focused
            setTimeout(() => {
              if (inputRef.current?.isFocused()) return;
              setIsFocused(false);
            }, 100);
          }}
          style={{
            borderWidth: 1,
            padding: 10,
            height: 40,
          }}
        />
      )}
    </View>
  );
};

export default App;

answered Feb 7 at 12:18

Govind29

114 bronze badges

2 Comments

Jatin Bhuva Feb 9 at 6:36

I want to add the same behaviour in iOS as Android.

Jatin Bhuva Feb 9 at 6:36

Remove ... and show always last part of text in input

Jatin Bhuva · Accepted Answer · 2025-03-04 07:25:53Z

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);
    }

};

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related