react-native-credit-card-input icon indicating copy to clipboard operation
react-native-credit-card-input copied to clipboard

Non horizontal inputs (feature request)

Open BillyFigueroa opened this issue 7 years ago • 10 comments
trafficstars

Is it possible to make the inputs vertically stacked? if not can we have an option to?

While this is a cool UI, less "savvy" users may get confused by this. For example, if I turn off autoFocus, they may not know to scroll to view the other fields. Someone forked this and made a more basic UI with stacked fields here

https://github.com/lexor90/react-native-credit-card-input

Is it possible to have a flag that allows you to default to this instead? something like inputOrientation="horizontal" or inputOrientation="stacked" or inputOrientation="vertical" etc

I guess I can just use their fork but I don't know that they will maintain their repo closely with this one so I may miss on updates or features. Do you think this is something you guys can offer? or am I supposed to use CardView instead and create my own fields? (This can be done but this a good amount of work and sort of defeats the purpose of using a component made by someone else when you have to customize it heavily)

BillyFigueroa avatar Feb 10 '18 17:02 BillyFigueroa

I like this idea. Right now I need a vertical form in my Credit Card data but I can't. Hope we have this functionality soon.

rodrigoxavier avatar Apr 26 '18 12:04 rodrigoxavier

+1, my clients just asked me to put this form vertically as the horizontal form is annoying and confusing for them. Until implemented I'll have to build my own form and use CardView. The fork above is not kept updated with features I need (translations, scale...)

slorber avatar May 03 '18 17:05 slorber

+1

podvipodvert avatar Sep 20 '18 10:09 podvipodvert

#129

7laria avatar Nov 06 '18 15:11 7laria

+1 #132

lauborges avatar Nov 19 '18 03:11 lauborges

+1

Bonissauro avatar Feb 10 '19 04:02 Bonissauro

#129

Thanks for leading to right solution.

ShrutiGarg019 avatar Feb 11 '19 10:02 ShrutiGarg019

Created a new PR for a vertical form #137 that allows rows with fields to be defined via props.

jpamarohorta avatar Mar 06 '19 18:03 jpamarohorta

In node_modules/react-native-credit-card-input/src/CreditCardInput.js Check the ScrollView around line 163

<ScrollView ref="Form"
          horizontal //Remove this and you should have a vertical view
          keyboardShouldPersistTaps="always"
          scrollEnabled={allowScroll}
          showsHorizontalScrollIndicator={false}
          style={s.form}>

SanchezQb avatar Apr 13 '19 16:04 SanchezQb

PR #146 created for vertical inputs also.

In fact, I've seen that this lib hasn't had any update in a year and half. Does anyone want to collaborate on a fork, updating the things that are issues right now and after working on updates like recognizing new Credit Card prefixes and other features?

ETLopes avatar Jun 17 '19 18:06 ETLopes