[v4] [android] animatedPosition behavior is inconsistent in emulators/old devices

[NicholasKuchiniski]

Bug

Hello, i'm doing some animations in my app and using the animatedPosition property for this, the scenario that i have is basically:

• I have 3 snap points, lets say for example: 100, 300, dimensions.height (full window height of the device or 100%)
• I have some hidden content that is not shown when below the 300 snap point but its shown when the bottom sheet is at the maximum height, i want to animate this content that is hidden so when i go beyond the 300 snap point, the content starts to appear while the drawer is being animated

To determine the current position of the drawer, i'm using the following formula: dimensions.height - animatedPosition, as i understood, animatedPosition represents the distance of the bottom sheet from its maximum snap point, which in my case, would be the height of the device, so lets say, for example that i have 1000px of height, if i am at the 300 snap point the animatedPosition should be 700, so 1000 - 700 = 300 (supposing that my topInset is zero).

So to make my animations i basically interpolate something like this:

  const position = dimensions.height - animatedPosition.value;
  const height = interpolate(position, [mid, mid + 200], [0, 200], 'clamp');

It's working just fine on physical devices, but i wasn't able to understand why this behavior is giving different results on old android devices/emulators.

PS: animatedIndex appears to be working just fine (example: when we are at the middle, the value is 1, not 1.02, for example.)

Some examples on physical devices/emulators:

Working?	Device	Current value	Status bar height	Expected value	Video
❌	Samsung Galaxy S8 - Android 7	324	24	300	samsungGalaxyS8-Android7.mov
❌	Google Pixel 4XL - Android 10	328	28	300	googlePixel4XL-Android10.mov
✅	Samsung Galaxy S22 - Android 12	300	27	300	samsungGalaxyS22-Android12.mov
❌	Emulator - Android 13	300	24	300	emulator-Android13.webm

So my question is: Am i doing something wrong with my code or this is really an unexpected behavior ? Why is the animatedPosition including the status bar height on certain devices and in other is is not ?

PS: If someone else is experiencing this issue, i did a "temporary" fix by using a combination of animatedIndex (which appears to be working properly and its returning 1 when we are at the middle snap point) and animatedPosition:

  const isStatusBarOnAnimatedPosition = useSharedValue(false);
  ...

    let position = dimensions.height - animatedPosition.value;

    if (isAndroid) {
      if (
        (animatedIndex.value === 1 && Math.round(position - statusBarHeight) >= mid) ||
        isStatusBarOnAnimatedPosition.value === true
      ) {
        isStatusBarOnAnimatedPosition.value = true;

        position = position - statusBarHeight;
      }
    }

Environment info

Library	Version
@gorhom/bottom-sheet	4.5.1
react-native	0.72.6
react-native-reanimated	4.7.3
react-native-gesture-handler	2.13.3

Steps To Reproduce

1. Clone this repo https://github.com/NicholasKuchiniski/BottomSheetBug
2. Run an android emulator or some old device like the ones on the table
3. Run yarn android, drag the drawer to the middle position and see that the content that was supposed to be hidden is being shown because the animatedPosition is greater than it should.

Describe what you expected to happen:

1. The animated position should be consistent between physical devices and emulators.

Reproducible sample code

• https://github.com/NicholasKuchiniski/BottomSheetBug

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[github-actions]

This issue was closed because it has been stalled for 5 days with no activity.