New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Scroll view doesn't scroll when input is focused. #5

Closed
5amfung opened this Issue Mar 16, 2016 · 4 comments

Comments

Projects
None yet
3 participants
@5amfung

5amfung commented Mar 16, 2016

I have multiple inputs structured like the following, when I tap and focus on an input close to the bottom, I expect the view to scroll to the focused input because the input is underneath the keyboard. But the scroll view doesn't do anything. Am I missing something here? Do I need to call anything from onFocus of each <TextInput>?

    <KeyboardAwareScrollView viewIsInsideTabBar={true}
                                     keyboardShouldPersistTaps={true}>
            <View>
                <View>
                    <TextInput>...</TextInput>
                </View>
                <View>
                    <TextInput>...</TextInput>
                </View>
                <View>
                    <TextInput>...</TextInput>
                </View>
            </View>
    </KeyboardAwareScrollView>
@alvaromb

This comment has been minimized.

Show comment
Hide comment
@alvaromb

alvaromb Mar 16, 2016

Member

Hello @5amfung!

Sadly this component doesn't scroll automatically, only resizes the ScrollView when the keyboard appears. But you can actually do it (I think I should provide some mechanism to do it easily, will think about that), take this example as a reference facebook/react-native#3195 (comment).

In that comment, I explain how you can use the scrollToFocusedInput method of this library to auto-scroll when an input gets focused.

Please let me know if you need more information.

Member

alvaromb commented Mar 16, 2016

Hello @5amfung!

Sadly this component doesn't scroll automatically, only resizes the ScrollView when the keyboard appears. But you can actually do it (I think I should provide some mechanism to do it easily, will think about that), take this example as a reference facebook/react-native#3195 (comment).

In that comment, I explain how you can use the scrollToFocusedInput method of this library to auto-scroll when an input gets focused.

Please let me know if you need more information.

@5amfung

This comment has been minimized.

Show comment
Hide comment
@5amfung

5amfung Mar 16, 2016

@alvaromb Thanks for the reply. I ended up doing something like this:

    <TextInput ref='foo' onFocus={(event) => {
        this._handleFocus(event, 'foo');
    }}/>
    _handleFocus(event, refName) {
        let node = React.findNodeHandle(this.refs[refName]);
        let extraHeight = 100;
        this.refs.keyboardAwareScrollView.scrollToFocusedInput(event, node, extraHeight);
    }

5amfung commented Mar 16, 2016

@alvaromb Thanks for the reply. I ended up doing something like this:

    <TextInput ref='foo' onFocus={(event) => {
        this._handleFocus(event, 'foo');
    }}/>
    _handleFocus(event, refName) {
        let node = React.findNodeHandle(this.refs[refName]);
        let extraHeight = 100;
        this.refs.keyboardAwareScrollView.scrollToFocusedInput(event, node, extraHeight);
    }
@alvaromb

This comment has been minimized.

Show comment
Hide comment
@alvaromb

alvaromb Mar 18, 2016

Member

Happy to have helped!

Will try to do this more easily in next releases :)

Member

alvaromb commented Mar 18, 2016

Happy to have helped!

Will try to do this more easily in next releases :)

@HighSoftWare96

This comment has been minimized.

Show comment
Hide comment
@HighSoftWare96

HighSoftWare96 Oct 12, 2018

@alvaromb Thanks for the reply. I ended up doing something like this:

    <TextInput ref='foo' onFocus={(event) => {
        this._handleFocus(event, 'foo');
    }}/>
    _handleFocus(event, refName) {
        let node = React.findNodeHandle(this.refs[refName]);
        let extraHeight = 100;
        this.refs.keyboardAwareScrollView.scrollToFocusedInput(event, node, extraHeight);
    }

I'm getting this error...
screen shot 2018-10-12 at 12 52 14

This the focus handler code:

    const node = ReactNative.findNodeHandle(event.target);
    const extraHeight = 100;
    this.refs.scroll.scrollToFocusedInput(event, node, 100);

HighSoftWare96 commented Oct 12, 2018

@alvaromb Thanks for the reply. I ended up doing something like this:

    <TextInput ref='foo' onFocus={(event) => {
        this._handleFocus(event, 'foo');
    }}/>
    _handleFocus(event, refName) {
        let node = React.findNodeHandle(this.refs[refName]);
        let extraHeight = 100;
        this.refs.keyboardAwareScrollView.scrollToFocusedInput(event, node, extraHeight);
    }

I'm getting this error...
screen shot 2018-10-12 at 12 52 14

This the focus handler code:

    const node = ReactNative.findNodeHandle(event.target);
    const extraHeight = 100;
    this.refs.scroll.scrollToFocusedInput(event, node, 100);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment