0

I got two input text. First one is for an email, the problem comes when I write more text than the width of this input, the rest of the text doesn't see. The normal behavior would be scroll horizontally to see the rest of the text, right?

I don't know if I'm missing something, but it doesn't work.

Here is the example code: rnplay.org

Edit: This is the effect I wanna get, this is from UI Explorer Example from official React Native repo:

enter image description here

Thank you!

JV Lobo
  • 5,526
  • 8
  • 34
  • 55

2 Answers2

4

I was be able to solve it.

I don't know why, but the problem comes if I have set both paddingTop and paddingBottom to the input text.

If I remove one of them, then the input text works perfectly, here is an example: Input text working well

I hope this can help someone too.

Thanks.

JV Lobo
  • 5,526
  • 8
  • 34
  • 55
0

I threw a hacky thing together here, basically wrapping the TextInput in a horizontal ScrollView:

https://rnplay.org/apps/q7M2Pg

<View style={{ backgroundColor: 'white', overflow: 'hidden' }}>
  <ScrollView horizontal={true} style={{ marginBottom:-7 }}>                        
     <TextInput
        style={ [styles.loginFormInput, {width:width}] } />
  </ScrollView>
</View>

Theoretically to make this better, you could call an onChangeText method to set the width to make it nicer (though a native way would be ideal of course).

Don't see any configuration for that in the source at all however, hopefully someone can come along with a better answer!

Nader Dabit
  • 52,483
  • 13
  • 107
  • 91
  • Thanks for your answer Nader. Is it not possible what I want? I want only one line which move forward when the text reaches the end by the right side. Do you know what I mean? – JV Lobo Jan 25 '16 at 23:24
  • Hey, sorry didn't realize you said horizontal! I've updated my answer, best of luck to you. – Nader Dabit Jan 25 '16 at 23:45
  • In the UI Explorer example from Real Native official repository, it works well, but I don't see nothing special in the code, so, I don't know how to do it! I've edited my question with a gif that shows the effect. – JV Lobo Jan 25 '16 at 23:57