Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

scrolling form TextInput in Scroll View doesn't work when textAlign in set to right or center(android only) #16206

Closed
ghost opened this issue Oct 4, 2017 · 14 comments
Labels
Component: TextInput Related to the TextInput component. Platform: Android Android applications. Ran Commands One of our bots successfully processed a command. Stale There has been a lack of activity on this issue and it may be closed soon.

Comments

@ghost
Copy link

ghost commented Oct 4, 2017

Is this a bug report?

YES

Have you read the Contributing Guidelines?

NO

Environment

Environment:
OS: Linux 4.8
Node: 8.6.0
Yarn: 1.1.0
npm: 5.3.0
Watchman: Not Installed
Android Studio: 2.3 AI-162.4069837

Packages: (wanted => installed)
react-native: 0.48.4 => 0.48.4
react: 16.0.0-alpha.12 => 16.0.0-alpha.12

Target Platform: Android (6.0.1)

Steps to Reproduce

  1. Created a scroll view with some text Input component inside of it
  2. set textAlign : 'right' or 'center' in text Input styles
  3. try to scroll down or up from inside of text input, but text Input is focused and doesn't scroll up or down in scroll view
    the issue is present in android only

Expected Behavior

it must be possible to scroll in the scroll view when you tap a text Input, and then scroll, it works on textAlign : 'left',

Actual Behavior

the scrolling doesn't work if you start scrolling on a text input

Reproducible Demo

cause my country restriction, I don't have access to expo, so I just shared a small code that reproduce the problem
export default class ScrollViewWithTextInput extends React.Component { render() { return ( <ScrollView> <TextInput style={styles.input} placeholder={'توضیحات'} underlineColorAndroid='transparent' /> <TextInput style={styles.input} placeholder={'توضیحات'} underlineColorAndroid='transparent' /><TextInput style={styles.input} placeholder={'توضیحات'} underlineColorAndroid='transparent' /><TextInput style={styles.input} placeholder={'توضیحات'} underlineColorAndroid='transparent' /> <TextInput style={styles.input} placeholder={'توضیحات'} underlineColorAndroid='transparent' /> <TextInput style={styles.input} placeholder={'توضیحات'} underlineColorAndroid='transparent' /><TextInput style={styles.input} placeholder={'توضیحات'} underlineColorAndroid='transparent' /><TextInput style={styles.input} placeholder={'توضیحات'} underlineColorAndroid='transparent' /> </ScrollView> ) }} const styles = StyleSheet.create({ Container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, input: { width: 350, height: 100, margin: 5, borderColor: 'black', borderWidth: 2, textAlign: 'right' }})

@Luckygirlllll
Copy link

Have you found any solutions for that issue? I have a similar problem!

@ghost
Copy link
Author

ghost commented Oct 10, 2017

@Luckygirlllll add multiline={true} , keyboardType={'default'}, maxLength={10} to textInput props. it should work, i think that maxLength isn't necessary, but I didn't check

@Mostafasaffari
Copy link

@erfanyousefifar
Thank you this is work for me. but when you choose keyboard to numeric it doesn't work

@ghost
Copy link
Author

ghost commented Nov 16, 2017

@Mostafasaffari
your welcome, and yeah it doesn't work on numeric, I hope they fix it.

@aizigao
Copy link

aizigao commented Nov 20, 2017

same problem, has some solution?

@ghost
Copy link
Author

ghost commented Dec 7, 2017

@aizigao please read above answers.

@mafiusu
Copy link

mafiusu commented Jan 9, 2018

@erfanyousefifar With multiline={true} and keyboardType={'default} it works but this is not the correct solution for the problem. I don't want to have a multiline input

@ghost
Copy link
Author

ghost commented Jan 22, 2018

@mafiusu you can set number of lines to 1, I know that it's not a correct solution, but I don't have native knowledge to fix it unfortunately

@hramos hramos added the Android label Mar 8, 2018
@react-native-bot react-native-bot added Ran Commands One of our bots successfully processed a command. Component: TextInput Related to the TextInput component. Android labels Mar 16, 2018
@react-native-bot react-native-bot added Platform: Android Android applications. Ran Commands One of our bots successfully processed a command. labels Mar 18, 2018
@stale
Copy link

stale bot commented Jun 17, 2018

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

@stale stale bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Jun 17, 2018
@chamileb
Copy link

I have been experiencing this issue since yesterday, issue is still alive. i'm using react native 0.53.
This is only in android not in ios.
The workaround is to add multiline={true} but my problem is it doesn't help with my scenario
i cannot have multiline enabled.

@stale stale bot removed the Stale There has been a lack of activity on this issue and it may be closed soon. label Jun 21, 2018
@rhur
Copy link

rhur commented Jun 26, 2018

I ran into a similar issue. I solved it by increasing the height of the textinput style.

@DannyvanderJagt
Copy link
Contributor

@robertohurtado Thanks, somehow adding 10px to the height fixed it too for me on Android.

@stale
Copy link

stale bot commented Dec 21, 2018

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

@stale stale bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Dec 21, 2018
@stale
Copy link

stale bot commented Dec 28, 2018

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.

@stale stale bot closed this as completed Dec 28, 2018
@facebook facebook locked as resolved and limited conversation to collaborators Dec 29, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Component: TextInput Related to the TextInput component. Platform: Android Android applications. Ran Commands One of our bots successfully processed a command. Stale There has been a lack of activity on this issue and it may be closed soon.
Projects
None yet
Development

No branches or pull requests

10 participants