fix: scroll the cursor into view when focus

[dominictb]

Summary:

Currently in iOS, when focusing the multiline text input, the cursor is not automatically scrolled into view if it is out of view. This PR adds the small util to scroll the cursor into view when the text input focuses. This doesn't happen in Android due to this

Original issue: https://github.com/Expensify/App/issues/48122 Original proposal: https://github.com/Expensify/App/issues/48122#issuecomment-2320769418

Changelog:

[IOS] [ADDED] - Scroll the cursor into view when text input is focused

Test Plan:

Code to reproduce in rn-tester

const TextInputWithFocusButton = () => {
  const inputToFocusRef = React.useRef<React.ElementRef<typeof TextInput> | null>(null);
  return (
    <View>
      <ExampleTextInput
        ref={inputToFocusRef}
        placeholder="height increases with content"
        defaultValue="React Native enables you to build world-class application experiences on native platforms using a consistent developer experience based on JavaScript and React. The focus of React Native is on developer efficiency across all the platforms you care about - learn once, write anywhere. Facebook uses React Native in multiple production apps and will continue investing in React Native."
        multiline={true}
        enablesReturnKeyAutomatically={true}
        returnKeyType="go"
        style={[styles.multiline, styles.multilineExpandable]}
      />
      <Button title="Focus" onPress={() => {
        inputToFocusRef.current?.focus();
      }} />
    </View>
  );
};

Steps:

• Move the cursor of the input to end of the input text
• Scroll up the input
• Blur the input
• Click on Focus button to re-focus the input

Note that before this fix, the cursor is not scrolled into view

• In iOS

Before	After
https://github.com/user-attachments/assets/de589cbf-158c-4e28-81d6-8412bf05ab23	https://github.com/user-attachments/assets/81c571f9-653b-49a5-9ecb-6eeaa2c54ec7

[facebook-github-bot]

Hi @dominictb!

Thank you for your pull request and welcome to our community.

Action Required

In order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you.

Process

In order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with CLA signed. The tagging process may take up to 1 hour after signing. Please give it that time before contacting us about it.

If you have received this in error or have any questions, please contact us at [email protected]. Thanks!

[facebook-github-bot]

@cipolleschi has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

[facebook-github-bot]

@cipolleschi merged this pull request in facebook/react-native@e021e50d537884a55a9f5bea931adb19e9069dd6.

[react-native-bot]

This pull request was successfully merged by @dominictb in e021e50d537884a55a9f5bea931adb19e9069dd6

^{When will my fix make it into a release? | How to file a pick request?}