react-native-avoid-softinput: AvoidSoftInputView breaks with screen swipe
Environment
Library version: 2.4.1 OS version: iPhone 13, iOS 15.4 “@react-navigation/native”: “^6.0.8”, “@react-navigation/native-stack”: “^6.6.1”,
Affected platforms
- Android
- iOS
Current behavior
https://user-images.githubusercontent.com/199706/161307457-5d118360-c530-479a-b52e-c69cd62ef98b.mp4
Expected behavior
Keyboard avoid view
Reproduction
- Open screen
- Focus keyboard
- Start swiping back
- Cancel swipe Simplified code:
<View style={styles.container}>
<AvoidSoftInputView style={styles.container} avoidOffset={16}>
<ImageBackground
source={require("./bg.png")}
imageStyle={styles.bgImage}
resizeMode="repeat"
style={styles.bg}
>
<FlatList />
</ImageBackground>
<View style={styles.bottom}>
<TextInput />
</View>
</AvoidSoftInputView>
<SafeAreaView style={styles.footer} edges={["bottom"]} />
</View>
const styles = StyleSheet.create({
container: {
flex: 1,
},
...
})
And I have related question: now, when I swipe screen keyboard still present but keyboard avoid view smoothly disappears (and content scrolls down). How I can prevent this behavior?
About this issue
- Original URL
- State: closed
- Created 2 years ago
- Comments: 24 (23 by maintainers)
Commits related to this issue
- fix(#54): incorrect offset when screen swiping on iOS — committed to mateusz1913/react-native-avoid-softinput by mateusz1913 2 years ago
- fix(#54): incorrect offset when screen swiping on iOS (#56) — committed to mateusz1913/react-native-avoid-softinput by mateusz1913 2 years ago
- fix(#54, #59): screen swipe incorrect offsets — committed to mateusz1913/react-native-avoid-softinput by mateusz1913 2 years ago
- fix(#54, #59): screen swipe incorrect offsets — committed to mateusz1913/react-native-avoid-softinput by mateusz1913 2 years ago
- fix(#54, #59): screen swipe incorrect offsets (#60) — committed to mateusz1913/react-native-avoid-softinput by mateusz1913 2 years ago
@nucleartux issue is fixed and available in version 2.4.2 🎉
Fix is available in v2.4.3
Ah, ok, I misunderstood your question. So I guess that
fullScreenGestureEnabled
option is making keyboard interactive when dismissing it@nucleartux Can you try following patch?
I think it should resolve both issues
I made separate branch for this issue https://github.com/nucleartux/TestProject/tree/issue-54
https://user-images.githubusercontent.com/199706/161431126-a6ced7ce-8e27-434b-a37d-5252dba4ad9f.mp4
I will track second one here: https://github.com/mateusz1913/react-native-avoid-softinput/issues/59
I tried on real device (iPhone X, latest iOS) - same bug.
I downloaded your repo and can’t reproduce behavior from video
https://user-images.githubusercontent.com/25980166/161428364-cf03d614-122b-4ac6-b2c6-cc0ba80bb928.mp4
I added nice Swift package ShowTime, so you will see where I make touches
Hi @nucleartux
That’s default iOS behavior, keyboard is still fully visible, even though app receives events from
UIResponder.keyboardWillChangeFrameNotification
:I don’t know if it can be prevented, you can try with writing your own logic for applying padding to your container based on
useSoftInputShown
&useSoftInputHidden
hooks, but I don’t guarantee, that it will make a satisfying result.