Skip to content
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

scrollResponder.scrollResponderScrollNativeHandleToKeyboard crops FlatList content on focus #14401

Closed
SMJ93 opened this issue Jun 8, 2017 · 3 comments
Labels
Resolution: Locked This issue was locked by the bot.

Comments

@SMJ93
Copy link

SMJ93 commented Jun 8, 2017

Description

I have a flat list which includes a list of form elements (input, select etc). On any input focus I want the FlatList to scroll to the selected Element. I am using the scrollResponder to do this.

The focus works for the first item in the FlatList, but the further down the FlatList the form element the more out of sync the scroll gets. It seems to scroll to the correct position (y) in the FlatList, but crops out form elements further up the FlatList and adds appends a transparent area to the bottom of the FlatList. It basically removes the area from the top of the FlatList and adds to the bottom.

I need it to scroll down to the focussed input item and not crop other form elements out of the FlatList. I have put together some screenshots to try and help explain this (see bottom of question):

Reproduction Steps and Sample Code

<FlatList
        keyExtractor={ item => item[0].name }
        ref={(thisComponent) => { this.questionsList = thisComponent; }}
        data={dataSource} //An array of elements

        renderItem={({ item, index }) => {
          return(
             //Each question is a FormElement (TextInput, Radio button etc)
            <Question
              key={ index }
              index={ index }
              question={ item }
              isLastQuestion={ (dataSource.length - 1) === index }
              onFocusScroll={ (refComponent = false) => {
                if (Platform.OS === 'ios' && !refComponent.target) {
                  setTimeout(() => {
                    const scrollResponder = this.questionsList.getScrollResponder();
                    if (scrollResponder) {
                      //This crops some of the form elements out of the FlatList
                      scrollResponder.scrollResponderScrollNativeHandleToKeyboard(
                        findNodeHandle(refComponent),
                        85,
                        false
                      );
                    }
                  }, 50);
                }
              }} />
          );

        }}
        />

Solution

The top of the form should not be cropped (see screenshot 3) and it should scroll the the focussedItem with 85 bottom offset to the keyboard.

Additional Information

  • React Native version: 0.45.0
  • Platform: iOS 10.3
  • Development Operating System: MacOS
  • Dev tools: Xcode 8.3.2 (8E2002)

Screeshots

Before focus:
1
On focus:
2
When I then scroll up the Form Element is cropped:
3
At the bottom the cropped area has been appended to the FlatList:
4

@hramos
Copy link
Contributor

hramos commented Jun 8, 2017

This issue looks like a question that would be best asked on StackOverflow.

StackOverflow is amazing for Q&A: it has a reputation system, voting, the ability to mark a question as answered. Because of the reputation system it is likely the community will see and answer your question there. This also helps us use the GitHub bug tracker for bugs only.

Will close this as this is really a question that should be asked on StackOverflow.

@hramos hramos closed this as completed Jun 8, 2017
@SMJ93
Copy link
Author

SMJ93 commented Jun 8, 2017

@hramos it seems like a bug with React Native scrollResponder?

@hramos hramos reopened this Jun 8, 2017
@hramos
Copy link
Contributor

hramos commented Aug 16, 2017

Hi there! This issue is being closed because it has been inactive for a while. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. Either way, we're automatically closing issues after a period of inactivity. Please do not take it personally!

If you think this issue should definitely remain open, please let us know. The following information is helpful when it comes to determining if the issue should be re-opened:

  • Does the issue still reproduce on the latest release candidate? Post a comment with the version you tested.
  • If so, is there any information missing from the bug report? Post a comment with all the information required by the issue template.
  • Is there a pull request that addresses this issue? Post a comment with the PR number so we can follow up.

If you would like to work on a patch to fix the issue, contributions are very welcome! Read through the contribution guide, and feel free to hop into #react-native if you need help planning your contribution.

@hramos hramos added the Icebox label Aug 16, 2017
@hramos hramos closed this as completed Aug 16, 2017
@facebook facebook locked as resolved and limited conversation to collaborators Aug 16, 2018
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Aug 16, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Resolution: Locked This issue was locked by the bot.
Projects
None yet
Development

No branches or pull requests

3 participants