event scrren scrollToTop btn

src/screens/InAppScreens/TravelsScreen/EventScreen/index.tsx

@@ -8,7 +8,8 @@ import {
   Dimensions,
   FlatList,
   Platform,
-  ActivityIndicator
+  ActivityIndicator,
+  Animated
 } from 'react-native';
 import { styles } from './styles';
 import { CommonActions, useFocusEffect, useNavigation } from '@react-navigation/native';
@@ -92,6 +93,7 @@ const EventScreen = ({ route }: { route: any }) => {
   const { width: windowWidth } = useWindowDimensions();
   const contentWidth = windowWidth * 0.9;
   const scrollViewRef = useRef<ScrollView>(null);
+  const keyboardAwareScrollViewRef = useRef<KeyboardAwareScrollView>(null);
 
   const { data, refetch } = useGetEventQuery(token, eventUrl, true);
   const { mutateAsync: joinEvent } = usePostJoinEventMutation();
@@ -144,6 +146,9 @@ const EventScreen = ({ route }: { route: any }) => {
     action: () => {}
   });
 
+  const [showScrollToTop, setShowScrollToTop] = useState(false);
+  const scrollToTopOpacity = useRef(new Animated.Value(0)).current;
+
   useEffect(() => {
     if (regions && regions.length > 0 && event && event.type === 4) {
       handleGetPhotosForAllRegions(regions);
@@ -255,6 +260,25 @@ const EventScreen = ({ route }: { route: any }) => {
     }, [navigation])
   );
 
+  const handleScroll = (event: any) => {
+    const currentScrollY = event.nativeEvent.contentOffset.y;
+    const shouldShow = currentScrollY > 350;
+
+    if (shouldShow !== showScrollToTop) {
+      setShowScrollToTop(shouldShow);
+
+      Animated.timing(scrollToTopOpacity, {
+        toValue: shouldShow ? 0.8 : 0,
+        duration: 300,
+        useNativeDriver: true
+      }).start();
+    }
+  };
+
+  const scrollToTop = () => {
+    keyboardAwareScrollViewRef.current?.scrollToPosition(0, 0, true);
+  };
+
   const openModal = (index: number) => {
     setCurrentImageIndex(index);
     setIsImageModalVisible(true);
@@ -873,7 +897,12 @@ const EventScreen = ({ route }: { route: any }) => {
         </View>
       </TouchableOpacity>
 
-      <KeyboardAwareScrollView showsVerticalScrollIndicator={false}>
+      <KeyboardAwareScrollView
+        ref={keyboardAwareScrollViewRef}
+        showsVerticalScrollIndicator={false}
+        onScroll={handleScroll}
+        scrollEventThrottle={16}
+      >
         <ScrollView
           ref={scrollViewRef}
           contentContainerStyle={{ minHeight: '100%' }}
@@ -1961,6 +1990,40 @@ const EventScreen = ({ route }: { route: any }) => {
         isVisible={isWarningModalVisible}
         onClose={() => setIsWarningModalVisible(false)}
       />
+
+      {showScrollToTop && (
+        <Animated.View
+          style={{
+            position: 'absolute',
+            bottom: 20,
+            right: 20,
+            opacity: scrollToTopOpacity,
+            zIndex: 1000
+          }}
+        >
+          <TouchableOpacity
+            onPress={scrollToTop}
+            style={{
+              backgroundColor: Colors.DARK_BLUE,
+              width: 40,
+              height: 40,
+              borderRadius: 20,
+              justifyContent: 'center',
+              alignItems: 'center',
+              shadowColor: Colors.DARK_BLUE,
+              shadowOffset: {
+                width: 0,
+                height: 2
+              },
+              shadowOpacity: 0.25,
+              shadowRadius: 3,
+              elevation: 5
+            }}
+          >
+            <MaterialCommunityIcons name="chevron-up" size={24} color={Colors.WHITE} />
+          </TouchableOpacity>
+        </Animated.View>
+      )}
     </View>
   );
 };