From b7b5685e11e9da98bd6746e1dd1f26849fa7c714 Mon Sep 17 00:00:00 2001
From: doppedheart <anuragagarwal530@gmail.com>
Date: Fri, 18 Oct 2024 18:04:23 +0530
Subject: [PATCH 1/2] Fix: on scroll search box to fix on top

---
 app/screens/MyCoursesScreen.tsx | 59 ++++++++++++++++++++++-----------
 1 file changed, 40 insertions(+), 19 deletions(-)

diff --git a/app/screens/MyCoursesScreen.tsx b/app/screens/MyCoursesScreen.tsx
index df21ab0..81e6622 100644
--- a/app/screens/MyCoursesScreen.tsx
+++ b/app/screens/MyCoursesScreen.tsx
@@ -1,9 +1,9 @@
-import React, { FC } from "react"
+import React, { FC, useRef } from "react"
 import { observer } from "mobx-react-lite"
-import { TextStyle, View, ViewStyle } from "react-native"
+import { Animated, ScrollView, TextStyle, View, ViewStyle } from "react-native"
 
 import { CourseCard, ListView, Screen, Text, TextField } from "app/components"
-import { spacing, typography } from "app/theme"
+import { colors, spacing, typography } from "app/theme"
 import { TabScreenProps } from "app/navigators"
 
 interface MyCoursesScreenProps extends TabScreenProps<"MyCourses"> {}
@@ -18,29 +18,41 @@ const renderSeparator = () => {
 
 export const MyCoursesScreen: FC<MyCoursesScreenProps> = observer(function MyCoursesScreen() {
   // const { userStore } = useStores()
+  const scrollY = useRef(new Animated.Value(0)).current
   const username = undefined
 
   return (
     <Screen contentContainerStyle={$root} safeAreaEdges={["top"]}>
-      <View>
-        {/* Add user avatar here */}
-        <Text preset="subheading" style={$greeting} text={`Hi, ${username ?? "Hustler"}`} />
-      </View>
-      <Text preset="heading" style={$heading} text="My Courses" />
-      <TextField placeholder="Search videos..." />
-      <ListView
-        // keyExtractor={(item) => item.id}
-        contentContainerStyle={$listContainer}
-        data={[{}, {}, {}, {}, {}]}
-        estimatedItemSize={10}
-        ItemSeparatorComponent={renderSeparator}
-        renderItem={renderCourses}
-        showsVerticalScrollIndicator={false}
-      />
+      <ScrollView
+        stickyHeaderIndices={[2]}
+        scrollEventThrottle={14}
+        onScroll={Animated.event([{ nativeEvent: { contentOffset: { y: scrollY } } }], {
+          useNativeDriver: false,
+        })}
+      >
+        <View>
+          {/* Add user avatar here */}
+          <Text preset="subheading" style={$greeting} text={`Hi, ${username ?? "Hustler"}`} />
+        </View>
+        <Text preset="heading" style={$heading} text="My Courses" />
+        <TextField
+          inputWrapperStyle={$searchBox}
+          style={$searchBarWrapper}
+          placeholder="Search videos..."
+        />
+        <ListView
+          // keyExtractor={(item) => item.id}
+          contentContainerStyle={$listContainer}
+          data={[{}, {}, {}, {}, {}]}
+          estimatedItemSize={10}
+          ItemSeparatorComponent={renderSeparator}
+          renderItem={renderCourses}
+          showsVerticalScrollIndicator={false}
+        />
+      </ScrollView>
     </Screen>
   )
 })
-
 const $root: ViewStyle = {
   flex: 1,
   paddingHorizontal: spacing.md,
@@ -61,3 +73,12 @@ const $listContainer: ViewStyle = {
 const $separator: ViewStyle = {
   marginVertical: spacing.xs,
 }
+
+const $searchBarWrapper: ViewStyle = {
+  backgroundColor: colors.background.primary,
+}
+
+const $searchBox: ViewStyle = {
+  backgroundColor: colors.background.primary,
+  marginVertical: 10,
+}

From 1410a4b2d95b088953f27ee68071ac57e59a72a3 Mon Sep 17 00:00:00 2001
From: doppedheart <anuragagarwal530@gmail>
Date: Mon, 4 Nov 2024 01:18:36 +0530
Subject: [PATCH 2/2] Removed scrollbar and added compatiblity with listView

---
 app/screens/MyCoursesScreen.tsx | 94 ++++++++++++++++++++++-----------
 1 file changed, 62 insertions(+), 32 deletions(-)

diff --git a/app/screens/MyCoursesScreen.tsx b/app/screens/MyCoursesScreen.tsx
index 81e6622..8925f2d 100644
--- a/app/screens/MyCoursesScreen.tsx
+++ b/app/screens/MyCoursesScreen.tsx
@@ -1,15 +1,22 @@
 import React, { FC, useRef } from "react"
 import { observer } from "mobx-react-lite"
-import { Animated, ScrollView, TextStyle, View, ViewStyle } from "react-native"
-
-import { CourseCard, ListView, Screen, Text, TextField } from "app/components"
+import { Animated, TextStyle, View, ViewStyle } from "react-native"
+import {
+  CourseCard,
+  ListView,
+  ListViewProps,
+  ListViewRef,
+  Screen,
+  Text,
+  TextField,
+} from "app/components"
 import { colors, spacing, typography } from "app/theme"
 import { TabScreenProps } from "app/navigators"
 
 interface MyCoursesScreenProps extends TabScreenProps<"MyCourses"> {}
 
-const renderCourses = () => {
-  return <CourseCard />
+interface ListItem {
+  type: "header" | "course" | "searchBar"
 }
 
 const renderSeparator = () => {
@@ -19,37 +26,56 @@ const renderSeparator = () => {
 export const MyCoursesScreen: FC<MyCoursesScreenProps> = observer(function MyCoursesScreen() {
   // const { userStore } = useStores()
   const scrollY = useRef(new Animated.Value(0)).current
-  const username = undefined
+  const listRef = useRef<ListViewRef<ListItem>>(null)
+  const username: string | undefined = undefined
+
+  const renderItem: ListViewProps<ListItem>["renderItem"] = ({ item, index }) => {
+    if (index === 0) {
+      return (
+        <View>
+          {/* Add user avatar here */}
+          <Text preset="subheading" style={$greeting} text={`Hi, ${username ?? "Hustler"}`} />
+          <Text preset="heading" style={$heading} text="My Courses" />
+        </View>
+      )
+    } else if (index === 1) {
+      return (
+        <View style={$searchBoxContainer}>
+          <TextField
+            inputWrapperStyle={$searchBox}
+            style={$searchBarWrapper}
+            placeholder="Search videos..."
+          />
+        </View>
+      )
+    } else {
+      return <CourseCard />
+    }
+  }
+
+  const data: ListItem[] = [
+    { type: "header" },
+    { type: "searchBar" },
+    ...Array(5).fill({ type: "course" }),
+  ]
 
   return (
     <Screen contentContainerStyle={$root} safeAreaEdges={["top"]}>
-      <ScrollView
-        stickyHeaderIndices={[2]}
-        scrollEventThrottle={14}
+      <ListView
+        ref={listRef}
+        contentContainerStyle={$listContainer}
+        data={data}
+        estimatedItemSize={100}
+        ItemSeparatorComponent={renderSeparator}
+        renderItem={renderItem}
+        showsVerticalScrollIndicator={false}
+        stickyHeaderIndices={[1]}
         onScroll={Animated.event([{ nativeEvent: { contentOffset: { y: scrollY } } }], {
           useNativeDriver: false,
         })}
-      >
-        <View>
-          {/* Add user avatar here */}
-          <Text preset="subheading" style={$greeting} text={`Hi, ${username ?? "Hustler"}`} />
-        </View>
-        <Text preset="heading" style={$heading} text="My Courses" />
-        <TextField
-          inputWrapperStyle={$searchBox}
-          style={$searchBarWrapper}
-          placeholder="Search videos..."
-        />
-        <ListView
-          // keyExtractor={(item) => item.id}
-          contentContainerStyle={$listContainer}
-          data={[{}, {}, {}, {}, {}]}
-          estimatedItemSize={10}
-          ItemSeparatorComponent={renderSeparator}
-          renderItem={renderCourses}
-          showsVerticalScrollIndicator={false}
-        />
-      </ScrollView>
+        scrollEventThrottle={16}
+        keyExtractor={(item, index) => item.type + index.toString()}
+      />
     </Screen>
   )
 })
@@ -63,7 +89,7 @@ const $greeting: TextStyle = {
 }
 
 const $heading: TextStyle = {
-  marginVertical: spacing.md,
+  marginTop: spacing.md,
 }
 
 const $listContainer: ViewStyle = {
@@ -80,5 +106,9 @@ const $searchBarWrapper: ViewStyle = {
 
 const $searchBox: ViewStyle = {
   backgroundColor: colors.background.primary,
-  marginVertical: 10,
+  marginVertical: spacing.xs,
+}
+
+const $searchBoxContainer: ViewStyle = {
+  backgroundColor: colors.background.primary,
 }