[iOS only] Screen won't scroll to multiline TextInput inside of a ScrollView on focus

[viktorvsk]

Description

Having <TextInput multiline={true} /> inside of a ScrollView (which is out of the current visibility) if you want to focus() on it — it will set cursor to the input and open up the keyboard but won't scroll to the input on iOS (verified on simulator and snack, haven't tested on real device yet). Works as expected on Android.

Version

Was found on 0.64.4 but reproducible on recent expo

Output of npx react-native info

System:
    OS: macOS 13.0.1
    CPU: (8) arm64 Apple M1
    Memory: 82.77 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 19.0.1 - /opt/homebrew/bin/node
    Yarn: 1.22.17 - /opt/homebrew/bin/yarn
    npm: 8.19.2 - /opt/homebrew/bin/npm
    Watchman: 2022.11.07.00 - /opt/homebrew/bin/watchman
  Managers:
    CocoaPods: 1.11.3 - /Users/vvsk/.rbenv/shims/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1
    Android SDK:
      API Levels: 29, 30, 31, 32
      Build Tools: 29.0.2, 30.0.2, 32.0.0
      System Images: android-32 | Google APIs ARM 64 v8a, android-32 | Google Play ARM 64 v8a
      Android NDK: Not Found
  IDEs:
    Android Studio: 2021.3 AI-213.7172.25.2113.9123335
    Xcode: 14.2/14C18 - /usr/bin/xcodebuild
  Languages:
    Java: 15.0.5 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2
    react-native: 0.64.4 => 0.64.4
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

• Create ScrollView with enough components to exceed screen height
• Place a <TextInput multiline /> somewhere in the middle so it would be possible to not see it at all at some point
• Add a button somewhere on the screen where multiline TextInput is not visible
• Using saved ref from the multiline TextInput add onPress even which will call inputRef.focus()

Expected result:

• Screen moves to position where TextInput becomes visible
• Cursor is placed in the input
• Keyboard is opened

Actual result:

• Screen doesn't move
• Cursor is placed in the input
• Keyboard is opened

Snack, code example, screenshot, or link to a repository

Code to reproduce:

import * as React from 'react';
import { StyleSheet, ScrollView, TextInput, View, Text } from 'react-native';


export default function App() {
  let input;
  const focusInput = () => input.focus();
  const setInputRef = (ref) => input = ref

  return (
      <ScrollView>
        <View style={styles.span}></View>
        <TextInput ref={setInputRef} style={styles.input} multiline />
        <View style={styles.span}></View>
        <View style={styles.buttonContainer}>
          <Text style={styles.button} onPress={focusInput}>Focus</Text>
        </View>
      </ScrollView>
  );
}

const styles = StyleSheet.create({
  span: {backgroundColor: 'green', height: 800},
  buttonContainer: {backgroundColor: 'yellow', alignItems: 'center'},
  button: {padding: 50, backgroundColor: 'red'},
  input: {backgroundColor: 'red'},
});

Snack to test: https://snack.expo.dev/@viktorvsk/a4c0c1?platform=ios

[ianspektor]

Same problem here. In iOS textinput isn't scrolled to when opening the keyboard, as it does in Android. Does work if I remove the multiline prop.

[jakobpesch]

Same problem here. Would love to see this addressed!

Running on:

"react-native": "0.71.7"

[LaGregance]

Same problem on react-native 0.72.4 even when wrapping the ScrollView in a KeyboardAvoidingView (it works without multiline).
Any news or solution ?