facebook / react-native

A framework for building native applications using React
https://reactnative.dev
MIT License
119.2k stars 24.33k forks source link

TextInput prevent scroll on ScrollView #25594

Open Aiiros opened 5 years ago

Aiiros commented 5 years ago

In a too long form, scroll is only available if the touch start outside the TextInput fields

React Native version:

info Fetching system and libraries information...
System:
    OS: Linux 4.15 Ubuntu 18.04.2 LTS (Bionic Beaver)
    CPU: (4) x64 Intel(R) Core(TM) i7-6500U CPU @ 2.50GHz
    Memory: 1.92 GB / 7.67 GB
    Shell: 5.4.2 - /usr/bin/zsh
  Binaries:
    Node: 8.10.0 - /usr/bin/node
    npm: 3.5.2 - /usr/bin/npm
  SDKs:
    Android SDK:
      API Levels: 22, 23, 26, 27, 28
      Build Tools: 23.0.1, 27.0.3, 28.0.3
      System Images: android-27 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom
  npmPackages:
    react: 16.8.6 => 16.8.6 
    react-native: 0.60.0 => 0.60.0 
  npmGlobalPackages:
    react-native-cli: 2.0.1
    react-native-debugger: 1.1.0
    react-native: 0.59.3

Steps To Reproduce

  1. create a ScrollView with flex: 1
  2. put more TextInputs than your screen can handle
  3. try to scroll with your touch starting on a field

Describe what you expected to happen:

I expect the page to scroll

Snack, code example, or link to a repository:

     <ScrollView style={{ flex: 1, }}>
            <TextInput placeholder="test" textAlign='center'/>
            <TextInput placeholder="test" textAlign='center'/>
            <TextInput placeholder="test" textAlign='center'/>
            <TextInput placeholder="test" textAlign='center'/>
            <TextInput placeholder="test" textAlign='center'/>
            <View style={{ height: 150, }} />
            <TextInput placeholder="test" textAlign='center'/>
            <TextInput placeholder="test" textAlign='center'/>
            <TextInput placeholder="test" textAlign='center'/>
            <TextInput placeholder="test" textAlign='center'/>
        </ScrollView>

snack: https://snack.expo.io/@aiiros/react-native-issue-25594

this is a duplicate of https://github.com/facebook/react-native/issues/15962 which has not yet been answered.

Edit: Turns out textAlign='center' is causing all of this

ouabel commented 2 months ago

A dirty workaround is to make the input multiline only when it is touched (to scroll)

import { useState } from 'react';
import { TextInput as RNTextInput } from 'react-native';

function TextInput({ multiline, innerRef, ...props }) {
  const [isMultiline, setIsMultiline] = useState(false);

  return (
    <RNTextInput
      ref={innerRef}
      {...props}
      onTouchStart={() => setIsMultiline(true)}
      onTouchEnd={() => setIsMultiline(false)}
      onTouchCancel={() => setIsMultiline(false)}
      onTouchMove={() => setIsMultiline(false)}
      multiline={multiline || isMultiline}
    />
  );
}

export default TextInput;
hieuminh1810 commented 2 weeks ago

still issue