Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fix keyboard height in useAnimatedKeyboard on language change on iOS (s…
…oftware-mansion#3940) <!-- Thanks for submitting a pull request! We appreciate you spending the time to work on these changes. Please follow the template so that the reviewers can easily understand what the code changes affect. --> ## Summary Fixes a bug when changing keyboard language on iOS: Bug: https://user-images.githubusercontent.com/6280457/212095624-4df7e0b0-d3e6-4bdd-8378-ad8c077e6fb2.mp4 Fixed bug: https://user-images.githubusercontent.com/6280457/212096575-aa36cb88-fee5-4f4c-bd37-676973834d48.mp4 Fixes software-mansion#3721 `useAnimatedKeyboard` reported invalid keyboard height in that case, because we invalided display link too early, in `stopAnimation` and we reported the height before suggestions bar appeared. In the next frame the suggestion bar appears and we can calculate correct keyboard height. ## Test plan Run AnimatedKeyboardExample, bring up the keyboard and change keyboard language. The text input should be above the keyboard in correct position. <details> <summary>Example for switching between numeric/regular keyboard:</summary> ```js import React from 'react'; import { TextInput, View, StyleSheet } from 'react-native'; import { useAnimatedKeyboard, useAnimatedStyle } from 'react-native-reanimated'; export default function App() { const { height } = useAnimatedKeyboard(); useAnimatedStyle(() => { console.log('HEIGHT', height.value); return {}; }); return ( <View style={styles.container}> <TextInput style={styles.input} keyboardType="default" /> <TextInput style={styles.input} keyboardType="number-pad" /> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', padding: 20, }, input: { borderBottomWidth: 1, borderBottomColor: '#ccc', marginBottom: 20, backgroundColor: '#ddd', height: 50, }, }); ``` </details>
- Loading branch information