scrollResponder.scrollResponderScrollNativeHandleToKeyboard crops FlatList content on focus

[SMJ93]

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:

On focus:

When I then scroll up the Form Element is cropped:

At the bottom the cropped area has been appended to the FlatList:

[hramos]

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.

[SMJ93]

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

[hramos]

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.