search

th3rdwave / react-native-safe-area-context

A flexible way to handle safe area insets in JS. Also works on Android and Web!
MIT License
2.08k stars 191 forks source link

Fix invalid area insets on Android #422

Closed tboba closed 11 months ago

tboba commented 11 months ago

Summary

Hi! During the work on react-native-screens I found a strange bug in useSafeAreaInsets hook on Android side. Currently, area insets received by useSafeAreaInsets seem to be invalid. On the first render, as the hook is sending proper values (I assume it uses getSafeAreaInsets method on getting initial window metrics) it sends incorrect inset (which is 0) after a while.

This Pull Request introduces a fix that adds takes windowInsets into comparing values of each inset when the native side reports negative or zero value. It fixes possibly #364 and #234 (if flickering is caused by insets being equal to 0).

useSafeAreaInsets-Before Before
After useSafeAreaInsets-After

Test Plan

  1. Wrap your code with <SafeAreaInsetsContext.Consumer> and <SafeAreaProvider>
  2. Try to use useSafeAreaInsets().top and then simply console.log it.
  3. Launch the android emulator.

Before adding the changes it should return 24 on the initial render and 0 on the next render. After adding the changes it should only return 24, which is expected value.