Skip to content

Commit

Permalink
Fix keyboard height in useAnimatedKeyboard on language change on iOS (s…
Browse files Browse the repository at this point in the history
…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
graszka22 authored and fluiddot committed Jun 5, 2023
1 parent adf8201 commit cace9c7
Showing 1 changed file with 12 additions and 2 deletions.
14 changes: 12 additions & 2 deletions ios/keyboardObserver/REAKeyboardEventObserver.m
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ @implementation REAKeyboardEventObserver {
int _windowsCount;
UIView *_keyboardView;
KeyboardState _state;
bool _shouldInvalidateDisplayLink;
}

- (instancetype)init
Expand All @@ -26,6 +27,7 @@ - (instancetype)init
_listeners = [[NSMutableDictionary alloc] init];
_nextListenerId = @0;
_state = UNKNOWN;
_shouldInvalidateDisplayLink = false;
return self;
}

Expand Down Expand Up @@ -85,9 +87,11 @@ - (void)runAnimation

- (void)stopAnimation
{
[displayLink invalidate];
displayLink = nil;
[self updateKeyboardFrame];
// there might be a case that keyboard will change height in the next frame
// (for example changing keyboard language so that suggestions appear)
// so we invalidate display link after we handle that in the next frame
_shouldInvalidateDisplayLink = true;
}

- (void)updateKeyboardFrame
Expand All @@ -101,6 +105,12 @@ - (void)updateKeyboardFrame
for (NSString *key in _listeners.allKeys) {
((KeyboardEventListenerBlock)_listeners[key])(_state, keyboardHeight);
}

if (_shouldInvalidateDisplayLink) {
_shouldInvalidateDisplayLink = false;
[displayLink invalidate];
displayLink = nil;
}
}

- (CGFloat)computeKeyboardHeight:(UIView *)keyboardView
Expand Down

0 comments on commit cace9c7

Please sign in to comment.