dan
40 lines
1.0 KiB
TypeScript
40 lines
1.0 KiB
TypeScript
import {useState} from 'react'
|
|
import {AnimatedRef, measure, MeasuredDimensions} from 'react-native-reanimated'
|
|
|
|
export type HandleRef = {
|
|
(node: any): void
|
|
current: null | number
|
|
}
|
|
|
|
// This is a lighterweight alternative to `useAnimatedRef()` for imperative UI thread actions.
|
|
// Render it like <View ref={ref} />, then pass `ref.current` to `measureHandle()` and such.
|
|
export function useHandleRef(): HandleRef {
|
|
return useState(() => {
|
|
const ref = (node: any) => {
|
|
if (node) {
|
|
ref.current =
|
|
node._nativeTag ??
|
|
node.__nativeTag ??
|
|
node.canonical?.nativeTag ??
|
|
null
|
|
} else {
|
|
ref.current = null
|
|
}
|
|
}
|
|
ref.current = null
|
|
return ref
|
|
})[0] as HandleRef
|
|
}
|
|
|
|
// When using this version, you need to read ref.current on the JS thread, and pass it to UI.
|
|
export function measureHandle(
|
|
current: number | null,
|
|
): MeasuredDimensions | null {
|
|
'worklet'
|
|
if (current !== null) {
|
|
return measure((() => current) as AnimatedRef<any>)
|
|
} else {
|
|
return null
|
|
}
|
|
}
|