import React , { FunctionComponent } from "react" ; import { Header , StackHeaderProps , TransitionPresets , } from "@react-navigation/stack" ; import { Animated , Platform , StyleSheet , View } from "react-native" ; import { BlurView } from "@react-native-community/blur" ; import { usePageScrollPosition } from "../../providers/page-scroll-position" ; import { useRoute } from "@react-navigation/native" ; import { HeaderLeftBackButton } from "./button" ; import { useStyle } from "../../styles" ; export const BlurredHeaderScreenOptionsPreset = { headerTitleAlign : "center" as "left" | "center" , headerStyle : { backgroundColor : "transparent" , elevation : 0 , shadowOpacity : 0 , } , headerBackground : undefined , headerBackTitleVisible : false , header : ( props ) => { return < BlurredHeader { ... props } / > ; } , headerLeftContainerStyle : { marginLeft : 10 , } , headerRightContainerStyle : { marginRight : 10 , } , headerLeft : ( props ) => < HeaderLeftBackButton { ... props } / > , ... TransitionPresets . SlideFromRightIOS , } ; export const BlurredHeader = ( props ) => { if ( Platform . OS !== "ios" ) { return < AndroidAlternativeBlurredHeader { ... props } / > ; } const route = useRoute ( ) ; const pageScrollPosition = usePageScrollPosition ( ) ; const scrollY = pageScrollPosition . getScrollYValueOf ( route . key ) ?? new Animated . Value ( 0 ) ; return ( < BlurView blurType = "light" blurAmount = { 65 } reducedTransparencyFallbackColor = "white" > < Animated . View style = { { position : "absolute" , top : 0 , bottom : 0 , left : 0 , right : 0 , backgroundColor : "white" , opacity : scrollY . interpolate ( { inputRange : [ 0 , 35 ] , outputRange : [ 1 , 0.65 ] , extrapolate : "clamp" , } ) , } } /> < Header { ... props } /> < /BlurView>); } ; const AndroidAlternativeBlurredHeader = ( props ) => { const style = useStyle ( ) ; return ( < View > < View style = { StyleSheet . flatten ( [ { position : "absolute" , top : 0 , bottom : 0 , left : 0 , right : 0 , backgroundColor : "white" , borderBottomWidth : 0.5 , } , style . flatten ( [ "border-color-border-white" ] ) , ] ) } / > < Header { ... props } / > < /View>); } ;