m
manakuro
## Problem
Currently, the
safeAreaInsets
option in BottomTabView only accepts a static object. This causes issues on Android when users switch navigation modes (e.g., between gesture navigation and button navigation), as the safe area values cannot be updated dynamically to reflect the current navigation mode.
## Proposed Solution
Allow safeAreaInsets to accept a function that receives the current insets from SafeAreaInsetsContext as a parameter, enabling dynamic safe area calculations.
## Implementation Example
BottomTabView.tsx
:
const renderTabBar = () => {
return (
<SafeAreaInsetsContext.Consumer>
{(insets) =>
tabBar({
state: state,
descriptors: descriptors,
navigation: navigation,
insets: {
top: safeAreaInsets?.(insets)?.top ?? insets?.top ?? 0,
right: safeAreaInsets?.(insets)?.right ?? insets?.right ?? 0,
bottom: safeAreaInsets?.(insets)?.bottom ?? insets?.bottom ?? 0,
left: safeAreaInsets?.(insets)?.left ?? insets?.left ?? 0,
},
})
}
</SafeAreaInsetsContext.Consumer>
);
};
## Usage in options:
safeAreaInsets: (insets) => {
if (insets) {
return {
bottom: insets.bottom + 8,
};
}
return {
bottom: SafeAreaProviderCompat.initialMetrics.insets.bottom + 8,
};
}
## Benefits
  • Dynamically adjusts safe area insets based on current device configuration
  • Resolves Android navigation mode switching issues
  • Maintains backward compatibility (can still accept static object)
  • Provides more flexibility for custom safe area adjustments