Can't scroll when input is in focus

[zarcode]

I have set scrollEnabled={true} so the whole form can scroll while you are filling it up. If I set focus on some TextInput scroll works, but if I type something and then I try scrolling while TextInput is in focus scroll doesn't work. This was working in some older versions of the library.

[Zhengjian1]

some question

[zarcode]

@johngoren my problem got solved when I rollback to v0.3.0, maybe it will work for you too.

[HilSny]

I also rolled back to v0.3.0. The issue we had was that the input would not scroll to focus unless we had already focused that input previously. So on initial load, when I would focus next input it only scrolled when I got to the part of the window where it would have to scroll to show the field itself.

However if I refocused the top input and tried again, it would scroll to each individual input like normal. Version 3.0 scrolls to input on initial load, it doesn't require dirty-ing the textInput first.

Hope this helps explain the problem

[alvaromb]

Hi!

Back to the office, sorry for the delay. Can you set up a minimum example reproducing the issue???

Thanks!

[kanslervkl]

1. Tap on some input filed (screen was scrolling, and content offset apply - it's ok)
2. tap on another input field
3. tap on empty space
   4)result - keyboard doesn't hidden

p.s. if, after it, tap to 1st tapped input field and tap to empty space - keyboard hide
Edit: keyboard hide, if an even number of times tap on another input filed, if an tap odd on times, keyboard doesn't hidden

[Thanmai-C]

When i am using a textinput field which has multiLine prop and the whole thing is surrounded by the KeyboardAwareScrollView , the keyboard overlaps the textfield as the text size increases and cannot see what is being typed and where focus is due to keyboard overlapping.

[zarcode]

Here a code sample:

import React, {Component} from 'react';
import { TextInput, Text } from 'react-native';
import PropTypes from 'prop-types';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';

class LinkAccount extends Component {
    constructor(props) {
        super(props);
        this.state = { text: '' };
    }

    render() {
        return (
            <KeyboardAwareScrollView
                keyboardShouldPersistTaps="handled"
                resetScrollToCoords={{ x: 0, y: 0 }}
                keyboardOpeningTime={0}
                scrollEnabled={true}
            >
                <Text style={{ marginBottom: 400 }}>
                    Lorem ipsum dolor sit amet.
                </Text>
                <TextInput
                    style={{height: 40, borderColor: 'gray', borderWidth: 1}}
                    onChangeText={(text) => this.setState({text})}
                    value={this.state.text}
                />

            </KeyboardAwareScrollView>
        );
    }
}

LinkAccount.propTypes = {};
LinkAccount.defaultProps = {};

export default LinkAccount;

The issue I have is: Can't scroll when there is any content in TextInput (when it's dirty). When its empty, no problem. This was not the case in previous versions of this lib.

Here is a video of issue https://screencast.com/t/Acrsuby6ZewG

[kidmysoul]

I have the same problem. I Wrapped my contents in KeyboardAwareScrollView.
When I 'm going to type in textinput, the whole thing goes fine (scroll...) but when I typed something , the contents height?? suddenly changed(become a little longer) and the scroll doesnot work.

[malcevicius]

@zarcode I can reproduce this also.

Btw. From @zarcode video, it looks like "KeyboardAwareScrollView" has two different ScrollViews inside depending on the keyboard status. To spot the difference keep your attention on the scroll indicator. When the keyboard is disabled there is no scroll indicator on ScrollView, but when the keyboard is enabled – ScrollView changes to a new one with the scroll indicator.
The problem occurs, when typing something inside textInput changes the second ScrollView to the first one without scroll indicator.
Hopefully, it will help to fix this issue.

[alvaromb]

I will check this out today, thanks for reporting!

[alvaromb]

@malcevicius this module doesn't have two ScrollViews.

I will check this issue today.

[henrytndrly]

I've managed to have a workaround by removing the componentWillReceiveProps code from KeyboardAwareHOC. I'm not suggesting that as the long term fix, as I'm not sure what the 'keyboard spacer reset' behaviour was meant to do...

From what I can gather, KeyboardAwareHOC resets the state var keyboardSpace during componentWillReceiveProps, which gets fired due to potential changes from text input events in the text input fields (and potentially other events), and it is keyboardSpace which controls the vertical offset due to a visible keyboard.

[kuznetsov-online]

any news?