TextInput keyboard opens when scroll long text

[hungtooc]

Current behaviour

When TextInput contains long text, the text can scroll. But when the text scrolls, the Keyboard automatically pops up and scroll to the cursor position.

Expected behaviour

The keyboard only open if user want to edit the text. When the user wants to reread the entered text, do not open the Keyboard to block the view and do not automatically scroll to the cursor position.

How to reproduce?

const [prompt, setPrompt] = useState('a very long text')

<TextInput
        right={<TextInput.Affix text={`- ${prompt.length}`} textStyle={{ fontSize: 12 }} />}
        mode="flat"
        clearButtonMode="always"
        multiline
        blurOnSubmit={true}
        value={prompt}
        style={{
          flex: 1,
          backgroundColor: undefined,
        }}
        onChangeText={(t) => {
          setPrompt(t)
        }}
        returnKeyType="done"
        collapsable
        outlineStyle={{
          borderRadius: 20,
          borderWidth: 0,
          borderBottomWidth: 0,
          backgroundColor: undefined
        }}
        contentStyle={{
          marginTop: 5,
          borderBottomWidth: 0,
        }}
        underlineStyle={{
          height: 0
        }}
        autoFocus={false}
        focusable={false}
        // showSoftInputOnFocus={false}
        placeholder={'Enter your text'}
      />

Preview

video when I try to scroll up, the keyboard open and TextInput scroll down:
https://drive.google.com/file/d/1FRVE6os4xCts-84AXWpzl-_nGNgRSzxM/view?usp=sharing

Your Environment

npx @react-native-community/cli info

info Fetching system and libraries information...
(node:66971) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
System:
  OS: macOS 15.3.1
  CPU: (8) arm64 Apple M2
  Memory: 117.48 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 23.5.0
    path: /opt/homebrew/bin/node
  Yarn:
    version: 3.6.4
    path: /opt/homebrew/bin/yarn
  npm:
    version: 10.9.2
    path: /opt/homebrew/bin/npm
  Watchman:
    version: 2024.12.02.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.14.3
    path: /usr/local/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.2
      - iOS 18.2
      - macOS 15.2
      - tvOS 18.2
      - visionOS 2.2
      - watchOS 11.2
  Android SDK: Not Found
IDEs:
  Android Studio: 2024.3 AI-243.22562.218.2431.13114758
  Xcode:
    version: 16.2/16C5032a
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.10
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.74.2
    wanted: 0.74.2
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false

info React Native v0.78.1 is now available (your project is running on v0.74.2).
info Changelog: https://github.com/facebook/react-native/releases/tag/v0.78.1
info Diff: https://react-native-community.github.io/upgrade-helper/?from=0.74.2
info For more info, check out "https://reactnative.dev/docs/upgrading?os=macos".

[ralhatem9]

Having the same issue as well. For now I solved it by making the TextInput uneditable while scrolling only if the keyboard was hidden.

onScroll={() => setEditable(false)}
onTouchEnd={() => setEditable(true)}
editable={editable || keyboardShown}