Nativebase: The content scrolls down when focusing on Input field

[janzenz]

react-native, react and native-base version

"react-native": "0.41.2"
"native-base": "0.5.22"

Expected behaviour

I'm using these components: Content > InputGroup > Input.

Actual behaviour

So whenever I fill up the password field (Input component with secureTextEntry enabled) it scrolls the entire content down.

Steps to reproduce (code snippet or screenshot)

  render() {
    return (
      <Container>
        <Header>
          <Button transparent onPress={() => this.popRoute()}>
            <Icon name="ios-arrow-back" />
          </Button>

          <Title>Sign Up</Title>
        </Header>
        <Content padder>
          <InputGroup>
            <Input
              placeholder="First Name"
              onChangeText={(text) => this.firstName = text} />
          </InputGroup>
          <InputGroup>
            <Input
              placeholder="Last Name"
              onChangeText={(text) => this.lastName = text} />
          </InputGroup>
          <InputGroup>
            <Input
              placeholder="Driver's License"
              onChangeText={(text) => this.licenseNo = text} />
          </InputGroup>
          <InputGroup>
            <Input
              placeholder="Contact Number"
              onChangeText={(text) => this.contact = text} />
          </InputGroup>
          <InputGroup>
            <Input
              placeholder="Password"
              secureTextEntry
              onChangeText={(text) => this.password = text} />
          </InputGroup>
          <InputGroup>
            <Input
              placeholder="Confirm Password"
              secureTextEntry
              onChangeText={(text) => this.confirmPassword = text} />
          </InputGroup>

          <Button success block onPress={this._register}>
            Sign Up
          </Button>
        </Content>
      </Container>
    )
  }

Screenshot of emulator/device

iOS

Is the bug present in both ios and android or in any one of them?

I only tried iOS

Any other additional info which would help us debug the issue quicker.

Here are my imports:

import React, { Component } from 'react';
import {
  StyleSheet,
  Text
} from 'react-native';
import { connect } from 'react-redux';
import { actions } from 'react-native-navigation-redux-helpers';
import {
  Container,
  Header,
  Title,
  Content,
  Button,
  InputGroup,
  Input,
  Icon,
  View,
  H1
} from 'native-base';

[sankhadeeproy007]

Does it only happen in the Password filed?

[janzenz]

Short answer: No.

The scroll is triggered when I tap that "password" <Input> field. And when I drag the screen back up and tap the <Input> (Contact Number) field before the "password" field it triggers the scroll again.

[sankhadeeproy007]

Okay, can you just remove secureTextEntry and check if that works? Just to be sure about what exactly is causing it.

[janzenz]

@sankhadeeproy007 yup removing that attribute secureTextEntry fixes the bug. Looks like that attribute is causing it then.

[sankhadeeproy007]

That is a very strange issue indeed. We are using keyboard-aware-scrollview for <Content /> and didn't come across any issue which matches your use case.

[janzenz]

@sankhadeeproy007 strange indeed. If you need more info from my setup let me know. I'll also try and investigate on my end.

[kn4rfy]

I have an issue on mine after a Dynamic List it scrolls up way far.

[janzenz]

@sankhadeeproy007 for some reason it is fixed when I upgraded to [email protected]

[sankhadeeproy007]

Yes, 2.0.x uses a newer version of keyboard-aware-scrollview

[janzenz]

@sankhadeeproy007 unfortunately it's back again. I'm not sure if it's related but I just updated to [email protected] today.

Update

Taking a closer look at it, it seems to be triggered when the keyboard autocompletion is gone, which is happening for the Password input.

[KidkArolis]

I was experiencing the same issue. In my case it was due to react-native-keyboard-aware-scroll-view https://github.com/GeekyAnts/NativeBase/blob/master/src/basic/Content.js#L2.

I used enableAutoAutomaticScroll={false} on my And the frustrating scrolling behaviour disappeared. I've actually found the following props to work really well:

scrollEnabled={false} // the view itself doesn't scroll up/down (only if all fields fit into the screen)
keyboardShouldPersistTaps='always' // make keyboard not disappear when tapping outside of input
enableAutoAutomaticScroll={false} // turn off auto scrolling to the field behaviour, which is unfortunately buggy when autocomplete suggestions disappear from the keyboard as displayed in the gif above

Hm, thinking more about it. I suppose the scroll to input behaviour might be useful for long forms. But in that case unfortunately there's definitely a bug when you focus on an input without autocomplete after having focused an input with autocomplete. Exactly as displayed in the gif. I'll report this issue to react-native-keyboard-aware-scroll-view team.

[nooralahzadeh]

Hi, Any update in this issue?

[alvaromb]

Hi all!

react-native-keyboard-aware-scroll-view author here. We would love to fix this issue, but we need a minimum example to reproduce the issue, isolated from Native Base if possible. Can you provide us that? Thanks!

[SupriyaKalghatgi]

@nooralahzadeh Did you try including enableAutoAutomaticScroll={false} with <Content>?

[nooralahzadeh]

@SupriyaKalghatgi I did, but still have a same problem

[SeuZeRicardo]

@janzenz I have the same problem as you.

I am using the following versions:
"native basis": "2.1.3",
"Native React": "0.41.0",

And for me, this problem only occurs in IOS.
Change <Content> to <ScrollView> and solved my problem.
And I don't know why this bug occurs with the Native Base Content tag.

@alvaromb Native-Base uses your plugin? And you've found any solution to this bug.

[samarhaider]

I used react-native-keyboard-spacer - Plug and play react-Native keyboard spacer view.
like below, it solve my issue

        </Content>
        <KeyboardSpacer />
      </Container>;

[SupriyaKalghatgi]

This is fixed

[punksta]

I have similar issue on ios. It is not related to this library, but maybe can give some advice.
I have auto-resizing webview inside scrollview

<ScrollView>
<View>
<WebView style={{height: htmlHeight}}/>
//other views
</View

when I click on input inside html and keyboard opens, webview content scrolls to bottom a lot. Android doesn't scroll when keyboard opens. Is there way to disable scrolling on ios too?