23 lines
697 B
TypeScript
23 lines
697 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';
|
||
|
|
|
||
|
|
export default function 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 function useBottomTabOverflow() {
|
||
|
|
const tabHeight = useBottomTabBarHeight();
|
||
|
|
const { bottom } = useSafeAreaInsets();
|
||
|
|
return tabHeight - bottom;
|
||
|
|
}
|