Paul Frazee
135a0456a2
* Flatten all routing into a single stack * Replace router with custom implementation * Add shell header and titles * Add tab selector * Add back/forward history menus on longpress * Fix: don't modify state during render * Add refresh() to navigation and reroute navigations to the current location to refresh instead of add to history * Cache screens during navigation to maintain scroll position and improve load-time for renders
37 lines
1.0 KiB
TypeScript
37 lines
1.0 KiB
TypeScript
import React, {useMemo} from 'react'
|
|
import {GestureResponderEvent, TouchableWithoutFeedback} from 'react-native'
|
|
import {BottomSheetBackdropProps} from '@gorhom/bottom-sheet'
|
|
import Animated, {
|
|
Extrapolate,
|
|
interpolate,
|
|
useAnimatedStyle,
|
|
} from 'react-native-reanimated'
|
|
|
|
export function createCustomBackdrop(
|
|
onClose?: ((event: GestureResponderEvent) => void) | undefined,
|
|
): React.FC<BottomSheetBackdropProps> {
|
|
const CustomBackdrop = ({animatedIndex, style}: BottomSheetBackdropProps) => {
|
|
// animated variables
|
|
const opacity = useAnimatedStyle(() => ({
|
|
opacity: interpolate(
|
|
animatedIndex.value, // current snap index
|
|
[-1, 0], // input range
|
|
[0, 0.5], // output range
|
|
Extrapolate.CLAMP,
|
|
),
|
|
}))
|
|
|
|
const containerStyle = useMemo(
|
|
() => [style, {backgroundColor: '#000'}, opacity],
|
|
[style, opacity],
|
|
)
|
|
|
|
return (
|
|
<TouchableWithoutFeedback onPress={onClose}>
|
|
<Animated.View style={containerStyle} />
|
|
</TouchableWithoutFeedback>
|
|
)
|
|
}
|
|
return CustomBackdrop
|
|
}
|