rinafcode · Faromzy · May 27, 2026 · May 27, 2026 · May 28, 2026
diff --git a/app/(tabs)/index.tsx b/app/(tabs)/index.tsx
@@ -2,11 +2,11 @@ import { useRouter } from 'expo-router';
 import { useEffect } from 'react';
 import { Alert, ScrollView, StyleSheet, TouchableOpacity, View } from 'react-native';
 
-import { CourseCardSkeleton, Skeleton, AppText as Text } from '@/src/components';
-import { sampleCourse } from '@/src/data/sampleCourse';
-import { useDynamicFontSize, useAnalytics } from '@/src/hooks';
-import { useAppStore } from '@/src/store';
-import { AnalyticsEvent, ScreenName } from '@/src/utils/trackingEvents';
+import { CourseCardSkeleton, Skeleton, AppText as Text } from '@/components';
+import { sampleCourse } from '@/data/sampleCourse';
+import { useDynamicFontSize, useAnalytics } from '@/hooks';
+import { useAppStore } from '@/store';
+import { AnalyticsEvent, ScreenName } from '@/utils/trackingEvents';
 
 export default function HomeScreen() {
   const router = useRouter();
@@ -71,6 +71,7 @@ export default function HomeScreen() {
       className="flex-1 bg-gray-50 dark:bg-slate-800"
       contentContainerStyle={styles.scrollContent}
       showsVerticalScrollIndicator={false}
+      removeClippedSubviews={true}
     >
       {/* Header */}
       <View style={styles.headerSection}>

diff --git a/src/components/grid/AdvancedDataGrid.tsx b/src/components/grid/AdvancedDataGrid.tsx
@@ -142,7 +142,7 @@ export const AdvancedDataGrid = <T extends GridRow = GridRow>({
         />
 
         {/* ── Scrollable grid area ─────────────────────────────────────────── */}
-        <ScrollView horizontal showsHorizontalScrollIndicator style={styles.horizontalScroll}>
+        <ScrollView horizontal showsHorizontalScrollIndicator style={styles.horizontalScroll} removeClippedSubviews={true}>
           <View style={{ width: totalWidth }}>
             {/* Column headers */}
             <HeaderRow

diff --git a/src/components/grid/GridFiltering.tsx b/src/components/grid/GridFiltering.tsx
@@ -51,6 +51,7 @@ export const GridFiltering = <T extends GridRow = GridRow>({
         showsHorizontalScrollIndicator={false}
         contentContainerStyle={styles.row}
         keyboardShouldPersistTaps="handled"
+        removeClippedSubviews={true}
       >
         {filterableColumns.map(col => {
           const currentValue = getFilterValue(col.key);

diff --git a/src/components/mobile/AchievementBadges.tsx b/src/components/mobile/AchievementBadges.tsx
@@ -199,6 +199,7 @@ export const AchievementBadges: React.FC<AchievementBadgesProps> = ({
           showsHorizontalScrollIndicator={false}
           contentContainerStyle={styles.scrollContent}
           accessibilityLabel="Horizontal achievements list"
+          removeClippedSubviews={true}
         >
           {achievements.map(renderBadge)}
         </ScrollView>

diff --git a/src/components/mobile/BookmarkList.tsx b/src/components/mobile/BookmarkList.tsx
@@ -26,7 +26,7 @@ export const BookmarkList = () => {
   }
 
   return (
-    <ScrollView contentContainerStyle={styles.list}>
+    <ScrollView contentContainerStyle={styles.list} removeClippedSubviews={true}>
       {bookmarks.map(item => (
         <SwipeableRow
           key={item.itemId}

diff --git a/src/components/mobile/ConnectionManager.tsx b/src/components/mobile/ConnectionManager.tsx
@@ -63,6 +63,7 @@ export const ConnectionManager: React.FC<ConnectionManagerProps> = ({
           data={connections}
           renderItem={renderConnectionItem}
           keyExtractor={item => item.id}
+          removeClippedSubviews={true}
           style={styles.list}
         />
       ) : (

diff --git a/src/components/mobile/DownloadQueue.tsx b/src/components/mobile/DownloadQueue.tsx
@@ -55,6 +55,7 @@ export function DownloadQueue() {
       data={tasks}
       keyExtractor={item => item.id}
       renderItem={renderItem}
+      removeClippedSubviews={true}
       contentContainerStyle={{ paddingVertical: 8 }}
       ListHeaderComponent={() => (
         <AppText className="px-4 py-2 text-xs font-bold uppercase tracking-wider text-gray-400">

diff --git a/src/components/mobile/FilterSheet.tsx b/src/components/mobile/FilterSheet.tsx
@@ -154,6 +154,7 @@ export function FilterSheet({
             contentContainerStyle={styles.scrollContent}
             showsVerticalScrollIndicator={false}
             keyboardShouldPersistTaps="handled"
+            removeClippedSubviews={true}
           >
             {filters.map(field => (
               <FilterSection

diff --git a/src/components/mobile/LessonCarousel.tsx b/src/components/mobile/LessonCarousel.tsx
@@ -206,6 +206,7 @@ export default function LessonCarousel({
         ref={scrollViewRef}
         horizontal
         pagingEnabled
+        removeClippedSubviews={true}
         showsHorizontalScrollIndicator={false}
         onScroll={handleScroll}
         onMomentumScrollEnd={handleMomentumScrollEnd}
@@ -221,6 +222,7 @@ export default function LessonCarousel({
               style={styles.lessonScrollView}
               contentContainerStyle={styles.lessonContent}
               showsVerticalScrollIndicator={true}
+              removeClippedSubviews={true}
             >
               {renderLessonContent(lesson)}
             </ScrollView>

diff --git a/src/components/mobile/MobileCourseViewer.tsx b/src/components/mobile/MobileCourseViewer.tsx
@@ -284,7 +284,7 @@ export default function MobileCourseViewer({
 
       return (
         <View style={styles.lessonContentWrapper}>
-          <ScrollView style={styles.scrollView} showsVerticalScrollIndicator={false}>
+          <ScrollView style={styles.scrollView} showsVerticalScrollIndicator={false} removeClippedSubviews={true}>
             {/* Lesson Content */}
             <View style={styles.lessonSection}>
               <Text style={styles.lessonText}>{lesson.content}</Text>

diff --git a/src/components/mobile/MobileProfile.tsx b/src/components/mobile/MobileProfile.tsx
@@ -265,7 +265,7 @@ export const MobileProfile: React.FC<MobileProfileProps> = ({
 
     return (
       <SafeAreaView style={[styles.safe, { backgroundColor: bg }]}>
-        <ScrollView showsVerticalScrollIndicator={false} style={{ flex: 1 }}>
+        <ScrollView showsVerticalScrollIndicator={false} style={{ flex: 1 }} removeClippedSubviews={true}>
           <View>
             <Skeleton width="100%" height={120} borderRadius={0} />
             <View style={styles.avatarRow}>
@@ -431,7 +431,7 @@ export const MobileProfile: React.FC<MobileProfileProps> = ({
 
   return (
     <SafeAreaView style={[styles.safe, { backgroundColor: bg }]}>
-      <ScrollView showsVerticalScrollIndicator={false} style={{ flex: 1 }}>
+      <ScrollView showsVerticalScrollIndicator={false} style={{ flex: 1 }} removeClippedSubviews={true}>
         {/* ── Profile Header ─────────────────────────────────────────────── */}
         <View>
           <LinearGradient
@@ -746,7 +746,7 @@ export const MobileProfile: React.FC<MobileProfileProps> = ({
                   <Text style={styles.streakEmoji}>🔥</Text>
                   <View>
                     <Text style={styles.streakValue}>{profile.stats.streak} Day Streak</Text>
-                    <Text style={styles.streakSub}>Keep it up! You're on fire.</Text>
+                    <Text style={styles.streakSub}>Keep it up! You&apos;re on fire.</Text>
                   </View>
                 </LinearGradient>
               </View>

diff --git a/src/components/mobile/MobileQuizManager/MobileQuestionCard.tsx b/src/components/mobile/MobileQuizManager/MobileQuestionCard.tsx
@@ -68,6 +68,7 @@ export default function MobileQuestionCard({
       style={styles.container}
       contentContainerStyle={styles.contentContainer}
       showsVerticalScrollIndicator={false}
+      removeClippedSubviews={true}
     >
       {/* Question Header */}
       <View style={styles.header}>

diff --git a/src/components/mobile/MobileQuizManager/QuizCarousel.tsx b/src/components/mobile/MobileQuizManager/QuizCarousel.tsx
@@ -98,6 +98,7 @@ export default function QuizCarousel({
         ref={scrollViewRef}
         horizontal
         pagingEnabled
+        removeClippedSubviews={true}
         showsHorizontalScrollIndicator={false}
         onScroll={handleScroll}
         onScrollBeginDrag={handleScrollBeginDrag}

diff --git a/src/components/mobile/MobileQuizManager/QuizResults.tsx b/src/components/mobile/MobileQuizManager/QuizResults.tsx
@@ -24,6 +24,7 @@ export default function QuizResults({ quiz, score, passed, onBack, onRetake }: Q
       style={styles.container}
       contentContainerStyle={styles.contentContainer}
       showsVerticalScrollIndicator={false}
+      removeClippedSubviews={true}
     >
       {/* Result Icon */}
       <View style={styles.iconContainer}>

diff --git a/src/components/mobile/MobileQuizManager/index.tsx b/src/components/mobile/MobileQuizManager/index.tsx
@@ -134,6 +134,7 @@ export default function MobileQuizManager({
           style={styles.scrollView}
           contentContainerStyle={styles.scrollContent}
           showsVerticalScrollIndicator={false}
+          removeClippedSubviews={true}
         >
           {/* Header */}
           <View style={styles.header}>

diff --git a/src/components/mobile/MobileSearch.tsx b/src/components/mobile/MobileSearch.tsx
@@ -287,6 +287,7 @@ export const MobileSearch = ({
             renderItem={({ item }) => (
               <SearchResultCard item={item} onPress={() => onResultPress?.(item)} />
             )}
+            removeClippedSubviews={true}
             contentContainerStyle={styles.resultsList}
             ListEmptyComponent={
               <Text style={styles.emptyText}>Try a different query or adjust filters.</Text>