scrollResponder.scrollResponderScrollNativeHandleToKeyboard crops FlatList content on focus #14401
Description
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:
