use makeImageFromView to blur text at start

[wcastand]

Hello trying to use skia to blur a text based on user preference saved in AsyncStorage but the issue is that the app crashes when i try to use it in a useEffect.

i have to do something like this to avoid crashes (setTimeout):

export function BlurView({ strength = 8, active = true, children }: BlurViewProps) {
	const viewRef = useRef<Animated.View>(null)
	const blurRadius = useSharedValue(0)
	const [blur, setBlur] = useState(false)
	const [box, setBox] = useState({ width: 0, height: 0 })
	const [image, setImage] = useState<SkImage | null>(null)

	const takeSnapshot = useCallback(async () => {
		if (viewRef.current == null) return
		try {
			setImage(await makeImageFromView(viewRef))
		} catch (e) {
			console.log(e)
		}
	}, [viewRef.current])

	useDerivedValue(() => {
		blurRadius.value = withTiming(blur ? strength : 0, { duration: 300 })
	}, [blur])

	const style = useAnimatedStyle(
		() => ({
			opacity: interpolate(blurRadius.value, [0, strength], [1, 0]),
		}),
		[blurRadius],
	)

	useEffect(() => {
		let id: NodeJS.Timeout
		// crash if called too early
		if (viewRef.current !== null)
			id = setTimeout(() => {
				takeSnapshot()
			}, 200)
		return () => clearTimeout(id)
	}, [viewRef.current])

	useEffect(() => {
		if (image) setBlur(active)
	}, [active, image])


	return (
		<>
			<Canvas style={{ position: "absolute", width: box.width, height: box.height }} pointerEvents="none">
				<Image image={image} x={0} y={0} width={box.width} height={box.height}>
					<Blur blur={blurRadius} />
				</Image>
			</Canvas>
			<Box
				ref={viewRef}
				style={[style, { position: "relative" }]}
				onLayout={({ nativeEvent: { layout } }) => setBox(layout)}
			>
				{children}
			</Box>
		</>
	)
}

any idea how i can get a snapshot view to blur it if the user ask for the blur to be from the start. not sure if an issue i need to make or me using it incorrectly.

[wcastand]

To give an update waiting and checking for the viewRef is not enough.

i had to use the onLayout to know when it's ready and call makeImageFromView and not need the setTimeout to avoid a crash on ios and an error throwing on android.

maybe it's worth looking into to prevent the crash at least. from the crash report i had on ios: https://gist.github.com/wcastand/f7d3ce5ef4fc214fa49d0a3e7e1b0727

on line 49 in the report can see the error coming from "sourceLine":67,"sourceFile":"ViewScreenshotService.mm" not sure if that can help