APSL / react-native-keyboard-aware-scroll-view

A ScrollView component that handles keyboard appearance and automatically scrolls to focused TextInput.
MIT License
5.24k stars 643 forks source link

[bug] extraScrollHeight is not calculated automatically for View's under KeyboardAwareScrollView #566

Open Roka20012 opened 1 year ago

Roka20012 commented 1 year ago

Issue:

Basically, when some View is under KeyboardAwareScrollView, the KeyboardAwareScrollView scroll Input up exactly like the height of View here is a video example

https://user-images.githubusercontent.com/32239452/225971611-9780b739-05e1-47a4-8b2b-f58080f48d1e.mov

Pseudocode example:

<>
 <KeyboardAwareScrollViewContainer
        // https://github.com/APSL/react-native-keyboard-aware-scroll-view/issues/418#issuecomment-617474009
        keyboardOpeningTime={Number.MAX_SAFE_INTEGER}
      >
        <View>
         <Text>Hello</Text>
          <Input />
           {/*... a lot of inputs */}
        </View>
</KeyboardAwareScrollViewContainer>
<View  style={{ height: 100 }}/> 
</>

Expected behavior: KeyboardAwareScrollView scroll Input without extra scrolling Input up

Current workaround: use onLayout on View under KeyboardAwareScrollView


const [extraScrollHeight, setExtraScrollHeight] = useState(0)
...

<>
 <KeyboardAwareScrollViewContainer
       extraScrollHeight={-extraScrollHeight}
        // https://github.com/APSL/react-native-keyboard-aware-scroll-view/issues/418#issuecomment-617474009
        keyboardOpeningTime={Number.MAX_SAFE_INTEGER}
      >
        <View>
         <Text>Hello</Text>
          <Input />
           {/*... a lot of inputs */}
        </View>
</KeyboardAwareScrollViewContainer>
<View onLayout={e => setExtraScrollHeight(e.nativeEvent.layout.height)}  style={{ height: 100 }}/> 
</>

WITH WORKAROUND:

https://user-images.githubusercontent.com/32239452/225973212-9c78bec4-f5cd-4538-ab58-87ae037c54a1.mov

UPD: I believe this PR should fix this issue - https://github.com/APSL/react-native-keyboard-aware-scroll-view/pull/426