[iOS] Bottom fixed container position shifts when presenting modal over bottom tabs (to be confirmed)

[guillaumehcht]

Before submitting a new issue

• I tested using the latest version of the library, as the bug might be already fixed.
• I tested using a supported version of react native.
• I checked for possible duplicate issues, with possible answers.

Bug summary

Description

When presenting a modal screen on iOS it seems that the Tab Bar is messing with the layout in the modal especially for things that are set to be absolutely positioned at the bottom of the modal.

The bottom buttons container position keeps shifting between different Y coordinates (754px, 685px) causing visual glitches. This doesn't occur on Android.

Is suspect it's coming from react-native-bottom-tabs because it is exactly 69px which usually corresponds to the height of the Tab Bar I believe.

I'm sorry if it's not coming from the package, I suspect it is but it might not be. I tried a lot of different solutions and I kept having this issue which was not there in previous packages I believe. (I'm gonna test to rollback to say 0.7.5 or 0.7.6 to check)

Expected Behavior
The button container should maintain a fixed position at the bottom of the screen without shifting.

Actual Behavior
The button container's Y position oscillates between 685px and 754px causing visual glitches.

Additional Context

• This only occurs on iOS
• The issue seems related to the interaction between the modal presentation and the bottom tabs
• The position shifts happen both on modal presentation and during scroll events

The LOGS I'm getting:
(NOBRIDGE) LOG Button position changed: {"newY": 754, "previousY": 0, "timestamp": "2024-12-22T12:47:42.413Z"}
(NOBRIDGE) LOG Button position changed: {"newY": 685, "previousY": 754, "timestamp": "2024-12-22T12:47:42.908Z"}
(NOBRIDGE) LOG Button position changed: {"newY": 754, "previousY": 685, "timestamp": "2024-12-22T12:47:49.918Z"}

ScreenRecording_12-22-2024.2-01-11.PM_1.2.mov

Library version

0.7.8

Environment info

### Environment
- React Native: 0.76.5 (New Architecture)
- Expo SDK: ~52.0.20
- Platform: iOS
- Device: iPhone 14 Pro
- react-native-bottom-tabs: 0.7.8
- expo-router: ~4.0.14

Steps to reproduce

Steps to Reproduce

1. Create a modal screen with a ScrollView
2. Add a fixed position button container at the bottom
3. Open the modal from a screen with bottom tabs
4. Observe the button container position shifting after a couple of seconds on Modal mount

Reproducible sample code

### Code Example

// Bottom button container implementation
<View
  style={styles.buttonContainer}
  onLayout={(e) => {
    const { y } = e.nativeEvent.layout;
    if (y !== buttonLayout.y) {
      console.log("Button position changed:", {
        previousY: buttonLayout.y,
        newY: y,
        timestamp: new Date().toISOString(),
      });
      setButtonLayout({ y });
    }
  }}
>
  {/* Button content */}
</View>

// Styles
buttonContainer: {
  paddingBottom: 48,
  position: 'absolute',
  bottom: 0,
  left: 0,
  right: 0,
  justifyContent: 'center',
  alignItems: 'center',
}

[guillaumehcht]

Tested with 0.7.6 and 0.7.5 and I still get the issue, maybe it's not the package. I'll continue trying to test other scenarios in the meantime. Otherwise I'll close the issue.