How to use react native TextInput selection props?

Question

I have the following simple component:

function TestComp() {
    const [selection, setselection] = React.useState({ start: 0, end: 0 });

    return (
        <View style={{ justifyContent: "center", flex: 1 }}>
            <TextInput
                selection={selection}
                onSelectionChange={(event) => {
                    const {nativeEvent: { selection: { start, end } }} = event;
                    setselection({ start, end });
                }}
                multiline={true}
            />
        </View>
    );
}

My problem is that there is often a delay with the update of the value of selection through setselection, which causes the caret to jump around or trigger the error: setSpan(1 ... 1) ends beyond length 0 (Which I believe means that the selection is set to be bigger than the TextInput value)

How am I supposed to use the selection prop? My goal is to be able to move the cursor around when I need.

I am using expo, but with remote debugging off to not cause additional lag.

Jumping example:

Answer 1

I think this might be helpful for you.

const Test = () => {
  const [style, setStyle] = useState({
    TestComponent: {
      backgroundColor: "white",
      height: 40,
      borderWidth: 1,
    },
  });
  const [selection, setSelection] = useState({
    start: 0,
    end: 0,
  });
  const [txt, setTxt] = useState("");
  return (
    <TextInput
      style={style.TestComponent}
      selection={selection}
      value={txt}
      multiline={true}
      onChangeText={(changedTxt) => {
        setTxt(changedTxt);
        console.log("onChangeText", selection);
      }}
      onSelectionChange={(syntheticEvent) => {
        const { nativeEvent } = syntheticEvent;
        const { selection } = nativeEvent;
        console.log("onSelectionChange", selection);
        setSelection(selection);
      }}
    />
  );
};