[iOS TextInput]: When `multiline` is set and adding new line - scroll changes it's position and causes jumps

[Tymofiev]

Description

When multiline TextInput has lots of text and scroll is enabled and is scrolled down a bit - there are jumps when changing cursor position and inserting line breaks before other line breaks, it kind of jumps between two places. What I have noticed is that is return back to where the cursor is after adding another line break or other character.

I have looked through all open and related to TextInput issues and could not find anything similar to this.

React Native Version

0.72.5

Output of npx react-native info

System:
  OS: macOS 13.5.1
  CPU: (12) arm64 Apple M2 Pro
  Memory: 77.23 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 18.14.1
    path: ~/.nvm/versions/node/v18.14.1/bin/node
  Yarn:
    version: 1.22.19
    path: ~/.nvm/versions/node/v18.14.1/bin/yarn
  npm:
    version: 9.3.1
    path: ~/.nvm/versions/node/v18.14.1/bin/npm
  Watchman: Not Found
Managers:
  CocoaPods:
    version: 1.12.1
    path: /Users/illyatymofiiev/.rbenv/shims/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 22.4
      - iOS 16.4
      - macOS 13.3
      - tvOS 16.4
      - watchOS 9.4
  Android SDK: Not Found
IDEs:
  Android Studio: 2022.1 AI-221.6008.13.2211.9619390
  Xcode:
    version: 14.3.1/14E300c
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.6
    path: /Library/Java/JavaVirtualMachines/jdk-17.jdk/Contents/Home/bin/javac
  Ruby:
    version: 3.1.0
    path: /Users/illyatymofiiev/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.72.5
    wanted: 0.72.5
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false

Steps to reproduce

1. Render TextInput with multiline property.
2. Insert some text with line breaks inside, so scroll appears and top text lines are scrolled up.
3. Change cursor position to the top visible part of the TextInput and start inserting some line breaks.
4. Notice scroll postition change and jumpy behaviour.

This only happens when inserting line breaks before line breaks, when insert line breaks before any other character - it seem to work fine.

I could reproduce it on either simulator or real device. There is the same issue on the version 0.71.8.

Snack, screenshot, or link to a repository

https://snack.expo.dev/8y09rVmAy

There is a screen recording of the same snack with example of how to reproduce this.
https://github.com/facebook/react-native/assets/44410158/e4c1f0f2-4e18-482b-9e22-a5565ecde6c7

[aayushi-rawat]

This worked for me, the key is to set scrollEnabled={false} on TextInput and wrap it inside ScrollView. Hope this helps.

{
            Platform.OS === 'ios' ?
              <>
                <View style={{
                  width: '90%' ,
                  marginVertical: 20,
                  borderColor: 'lightgray',
                  borderWidth: 1,
                  borderRadius: 10, 
                  height: height * 0.3
                }}>

                  <ScrollView
                    keyboardShouldPersistTaps='handled'>
                    <TextInput
                      scrollEnabled={false}
                      style={{
                        padding: 8,
                        marginBottom: 16
                      }}
                      placeholder="Add content"
                      onChangeText={e => setTextVal(e)}
                      value={textVal}
                      multiline
                    />
                  </ScrollView>
                </View>

              </> :
              <>
                <TextInput
                  placeholder="Add content"
                  onChangeText={e => {setTextVal(e)}
                  value={textVal}
                  multiline
                />
              </>
          }

[Tymofiev]

@aayushi-rawat thanks for helping out with this! The code snippet you provided and the idea with explicitly putting TextInput inside ScrollView seem to work fine with text (tested on simlulator, real device and expo snack), but there is an issue when adding a new line before emoji - the scroll position changes to zero, please see the screen recording. I could not reproduce it on expo snack, only on simlulator and real device.

Simulator.Screen.Recording.-.iPhone.14.-.2023-10-02.at.11.53.59.mp4

[aayushi-rawat]

@Tymofiev Thanks for pointing out the issue. Will try to figure out a solution for this. Meanwhile if you come up with a solution for this one, please update.

[Tymofiev]

@aayushi-rawat I think I have tried everything that I thougth could work here, but if I find anything else I will let everybody know. Thanks.

[ibrkhalil]

This doesn't happen on iOS 17.2

[Tymofiev]

This doesn't happen on iOS 17.2

Thanks for sharing - let me test it myself and see if it fixes the issue.

[Tymofiev]

This doesn't happen on iOS 17.2

I have re-tested it on both snack and iOS simulator (17.2) and there is still the same issue 😕

[ibrkhalil]

This doesn't happen on iOS 17.2

I have re-tested it on both snack and iOS simulator (17.2) and there is still the same issue 😕

Sorry for not being clear, I meant with the scroll view solution posted by @aayushi-rawat

[Tymofiev]

@ibrkhalil ohh, I see...

[sintylapse]

hey @Tymofiev did you manage to find a solution? For me the issue happens when text is bigger that a screen size, and after the line breaks to the next line, the scroll position is changed to 0. But after I continue typing the scroll goes back to the cursor