CODEWITHSUNDEEP
androidreact-nativescrollviewtextinput
ozer
ozer

Reputation: 552

React Native Android - How to be able to Scroll through TextInput

I am creating a form and its style has labels at left and TextInputs at the right side as a requirement. So the problem that I have confronted with is that the scrolling is not possible when you touch to a TextInput somehow. Most of the users uses right side for scrolling so this is a major problem for me. Do you have an idea that would bring solution to this ?

Example code of the style just in case or maybe people can find something useful

<View style={{ flexDirection: 'row', marginTop: 10, justifyContent: 'center', alignItems: 'center' }} >
                        <View style={{ justifyContent: 'center', alignSelf: 'center', alignItems: 'center', width: W, height: HEIGHT / 18, borderWidth: 1 }}>
                            <Text adjustsFontSizeToFit
                                style={{ textAlign: 'center', color: 'black', }} >
                                Telefon Numarası
                            </Text>
                        </View>
                        <TextInput
                            ref={(node) => { this.phoneNumber = node; }}
                            dataDetectorTypes={['phoneNumber']}
                            blurOnSubmit={false}
                            keyboardType={'phone-pad'}
                           
                            defaultValue={this.props.data.plateInformation != null ? this.props.data.plateInformation.phoneNumber : ''}
                            returnKeyType={'go'}
                            onChangeText={this.props.changePhoneNumber}
                            keyboardAppearance={'dark'}
                            returnKeyLabel={'Devam'}
                            onSubmitEditing={() => this.carBrand.focus()}
                            style={{ color: 'green', textAlign: 'center', borderWidth: 1, width: W, height: HEIGHT / 18, margin: 'auto' }}
                        />
                    </View>

Upvotes: 3

Views: 1652

Answers (2)

Dror Bar
Dror Bar

Reputation: 718

For some reason this worked for me: multiline={true}.

Not exactly sure why. Stranger still, it will not work if you also have keyboardType='numeric'.

Upvotes: 2

rajat_dev
rajat_dev

Reputation: 21

Try this, add following props to TextInput

<TextInput
  ...
  maxHeight={<your height>}
  autoGrow={ false } />

Upvotes: 1

Related Questions