Skip to content

Commit

Permalink
fix: Add compatibility with native iOS navigation (#171)
Browse files Browse the repository at this point in the history
## 📜 Description
On native ios navigation, tabBarController does not add blur unless
scrollView is first in the component hierarchy.
It is necessary that an empty view is declared only after children.
Wrong behavior:
<img width="340" alt="Снимок экрана 2023-06-13 в 17 23 37"
src="https://github.com/kirillzyusko/react-native-keyboard-controller/assets/63238943/5488bd74-5dea-4afa-8832-cf491566f707">
Right behavior:
<img width="345" alt="Снимок экрана 2023-06-13 в 17 23 49"
src="https://github.com/kirillzyusko/react-native-keyboard-controller/assets/63238943/15249057-bbc4-4cb9-bfe6-e051cab9191f">


## 💡 Motivation and Context
This fix adds maximum compatibility with native iOS navigation.

## 📢 Changelog
changed an order of the "view" component

## 🤔 How Has This Been Tested?
To test the change, I use my native navigation library for ios. In this
case, we just need to test that the change didn't break keyboard
behavior.

## 📝 Checklist
- [x] CI successfully passed
  • Loading branch information
thanksyouall authored Jun 14, 2023
1 parent c441aa6 commit 59de78e
Showing 1 changed file with 12 additions and 14 deletions.
26 changes: 12 additions & 14 deletions src/animated.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -151,21 +151,19 @@ export const KeyboardProvider = ({
statusBarTranslucent={statusBarTranslucent}
style={styles.container}
>
<>
<Animated.View
// we are using this small hack, because if the component (where
// animated value has been used) is unmounted, then animation will
// stop receiving events (seems like it's react-native optimization).
// So we need to keep a reference to the animated value, to keep it's
// always mounted (keep a reference to an animated value).
//
// To test why it's needed, try to open screen which consumes Animated.Value
// then close it and open it again (for example 'Animated transition').
style={style}
/>
{children}
</>
{children}
</KeyboardControllerViewAnimated>
<Animated.View
// we are using this small hack, because if the component (where
// animated value has been used) is unmounted, then animation will
// stop receiving events (seems like it's react-native optimization).
// So we need to keep a reference to the animated value, to keep it's
// always mounted (keep a reference to an animated value).
//
// To test why it's needed, try to open screen which consumes Animated.Value
// then close it and open it again (for example 'Animated transition').
style={style}
/>
</KeyboardContext.Provider>
);
};

0 comments on commit 59de78e

Please sign in to comment.