TextInput prevent scroll on ScrollView
Nobody has claimed this yet.
- Dominant language
- C++
- Stars
- 127k
- Forks
- 25.3k
- Avg merge
- 1d 23h
- Merged PRs (30d)
- 4
Description
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
- create a ScrollView with
flex: 1 - put more TextInputs than your screen can handle
- 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
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the behavior in the linked Snack with a ScrollView containing enough TextInputs, especially with textAlign='center'. Trace the React Native touch and scrolling behavior involved; done means a touch beginning on a TextInput still allows the containing ScrollView to scroll, without breaking text input interaction.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100