fix: prevent crash due to undefined animatedRef

Author: Robert27

src/app/(screens)/events/advisory/[id].tsx

@@ -61,7 +61,9 @@ export default function StudentAdvisoryEventDetail(): React.JSX.Element {
 	const scrollOffset = useSharedValue(0)
 	const scrollHandler = useAnimatedScrollHandler({
 		onScroll: ({ contentOffset }) => {
-			scrollOffset.value = contentOffset.y
+			if (scrollOffset && typeof scrollOffset.value !== 'undefined') {
+				scrollOffset.value = contentOffset.y
+			}
 		}
 	})
 

src/app/(screens)/events/career/[id].tsx

@@ -63,7 +63,9 @@ export default function CareerServiceEvent(): React.JSX.Element {
 
 	const scrollHandler = useAnimatedScrollHandler({
 		onScroll: (event) => {
-			scrollOffset.value = event.contentOffset.y
+			if (scrollOffset && typeof scrollOffset.value !== 'undefined') {
+				scrollOffset.value = event.contentOffset.y
+			}
 		}
 	})
 

src/app/(screens)/events/cl/[id].tsx

@@ -26,9 +26,9 @@ import { Linking } from 'react-native'
 import { Share } from 'react-native'
 import Animated, {
 	interpolate,
-	useAnimatedRef,
+	useAnimatedScrollHandler,
 	useAnimatedStyle,
-	useScrollViewOffset
+	useSharedValue
 } from 'react-native-reanimated'
 import { createStyleSheet, useStyles } from 'react-native-unistyles'
 
@@ -92,14 +92,21 @@ export default function ClEventDetail(): React.JSX.Element {
 		return <EventErrorView eventType="clEvents" />
 	}
 
-	const ref = useAnimatedRef<Animated.ScrollView>()
-	const scroll = useScrollViewOffset(ref)
+	const scrollOffset = useSharedValue(0)
+	const scrollHandler = useAnimatedScrollHandler({
+		onScroll: (event) => {
+			if (scrollOffset && typeof scrollOffset.value !== 'undefined') {
+				scrollOffset.value = event.contentOffset.y
+			}
+		}
+	})
+
 	const headerStyle = useAnimatedStyle(() => {
 		return {
 			transform: [
 				{
 					translateY: interpolate(
-						scroll.value,
+						scrollOffset.value,
 						[0, 30, 65],
 						[25, 25, 0],
 						'clamp'
@@ -270,7 +277,8 @@ export default function ClEventDetail(): React.JSX.Element {
 		<Animated.ScrollView
 			style={styles.page}
 			contentContainerStyle={styles.container}
-			ref={ref}
+			onScroll={scrollHandler}
+			scrollEventThrottle={16}
 		>
 			<Stack.Screen
 				options={{

src/app/(screens)/events/sports/[id].tsx

@@ -27,9 +27,9 @@ import { useTranslation } from 'react-i18next'
 import { Linking, Platform, Share, Text, View } from 'react-native'
 import Animated, {
 	interpolate,
-	useAnimatedRef,
+	useAnimatedScrollHandler,
 	useAnimatedStyle,
-	useScrollViewOffset
+	useSharedValue
 } from 'react-native-reanimated'
 import { createStyleSheet, useStyles } from 'react-native-unistyles'
 
@@ -52,14 +52,21 @@ export default function SportsEventDetail(): React.JSX.Element {
 	const sportsEvent: UniversitySportsFieldsFragment | null | undefined =
 		queryData?.flatMap((group) => group.data).find((event) => event.id === id)
 
-	const ref = useAnimatedRef<Animated.ScrollView>()
-	const scroll = useScrollViewOffset(ref)
+	const scrollOffset = useSharedValue(0)
+	const scrollHandler = useAnimatedScrollHandler({
+		onScroll: (event) => {
+			if (scrollOffset && typeof scrollOffset.value !== 'undefined') {
+				scrollOffset.value = event.contentOffset.y
+			}
+		}
+	})
+
 	const headerStyle = useAnimatedStyle(() => {
 		return {
 			transform: [
 				{
 					translateY: interpolate(
-						scroll.value,
+						scrollOffset.value,
 						[0, 30, 65],
 						[25, 25, 0],
 						'clamp'
@@ -226,7 +233,8 @@ export default function SportsEventDetail(): React.JSX.Element {
 		<Animated.ScrollView
 			style={styles.page}
 			contentContainerStyle={styles.container}
-			ref={ref}
+			onScroll={scrollHandler}
+			scrollEventThrottle={16}
 		>
 			<Stack.Screen
 				options={{

src/app/(screens)/food/[id].tsx

@@ -28,9 +28,9 @@ import { useTranslation } from 'react-i18next'
 import { Alert, Linking, Platform, Share, Text, View } from 'react-native'
 import Animated, {
 	interpolate,
-	useAnimatedRef,
+	useAnimatedScrollHandler,
 	useAnimatedStyle,
-	useScrollViewOffset
+	useSharedValue
 } from 'react-native-reanimated'
 import { createStyleSheet, useStyles } from 'react-native-unistyles'
 
@@ -104,14 +104,21 @@ export default function FoodDetail(): React.JSX.Element {
 			}
 		}, [foodData, i18n, userKind, navigation])
 	)
-	const ref = useAnimatedRef<Animated.ScrollView>()
-	const scroll = useScrollViewOffset(ref)
+	const scrollOffset = useSharedValue(0)
+	const scrollHandler = useAnimatedScrollHandler({
+		onScroll: (event) => {
+			if (scrollOffset && typeof scrollOffset.value !== 'undefined') {
+				scrollOffset.value = event.contentOffset.y
+			}
+		}
+	})
+
 	const headerStyle = useAnimatedStyle(() => {
 		return {
 			transform: [
 				{
 					translateY: interpolate(
-						scroll.value,
+						scrollOffset.value,
 						[0, 30, 65],
 						[25, 25, 0],
 						'clamp'
@@ -473,7 +480,11 @@ export default function FoodDetail(): React.JSX.Element {
 		: ''
 
 	return (
-		<Animated.ScrollView contentContainerStyle={styles.page} ref={ref}>
+		<Animated.ScrollView
+			style={styles.page}
+			onScroll={scrollHandler}
+			scrollEventThrottle={16}
+		>
 			<Stack.Screen
 				options={{
 					headerTitle: (props) => (