@attio/react-native-bottom-sheet-toolbox
Version:
37 lines (32 loc) • 1.31 kB
text/typescript
import * as React from "react"
import {type LayoutChangeEvent, PixelRatio} from "react-native"
import {type SharedValue, useSharedValue} from "react-native-reanimated"
function roundAndReplace(sv: SharedValue<number | null>, v: number) {
const roundedV = PixelRatio.roundToNearestPixel(v)
if (roundedV !== sv.get()) sv.set(roundedV)
}
/**
* A helper hook for providing shared values for onLayout measurements.
*/
export function useLayoutSharedValue<
T extends number | null = number | null,
Y extends number | null = number | null,
>(defaultHeight?: T, defaultY?: Y) {
const heightSharedValue = useSharedValue<number | null>(
typeof defaultHeight === "number" ? defaultHeight : null
)
const ySharedValue = useSharedValue<number | null>(
typeof defaultY === "number" ? defaultY : null
)
const onLayout = React.useCallback((evt: LayoutChangeEvent) => {
roundAndReplace(heightSharedValue, evt.nativeEvent.layout.height)
roundAndReplace(ySharedValue, evt.nativeEvent.layout.y)
}, [])
return {
height: heightSharedValue as unknown as SharedValue<
T extends null ? number | null : number
>,
y: ySharedValue as unknown as SharedValue<Y extends null ? number | null : number>,
onLayout,
}
}