expo_template/components/ui/TabBarBackground.ios.tsx

24 lines
727 B
TypeScript

import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs';
import { BlurView } from 'expo-blur';
import { StyleSheet } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
const BlurTabBarBackground = () => {
return (
<BlurView
// System chrome material automatically adapts to the system's theme
// and matches the native tab bar appearance on iOS.
tint='systemChromeMaterial'
intensity={100}
style={StyleSheet.absoluteFill}
/>
);
};
export default BlurTabBarBackground;
export const useBottomTabOverflow = () => {
const tabHeight = useBottomTabBarHeight();
const { bottom } = useSafeAreaInsets();
return tabHeight - bottom;
};