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;
Android current behaviour:
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.
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);
}
};