From 111939dd0c76d7596db194612ae453b74323c624 Mon Sep 17 00:00:00 2001
From: imeepos <imeepos@sker.com>
Date: Wed, 21 Jan 2026 11:24:59 +0800
Subject: [PATCH] feat: add reusable RefreshControl component

Add minimal RefreshControl wrapper component for pull-to-refresh functionality across screens. Includes theme colors for light/dark mode support.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 components/RefreshControl.test.tsx | 66 ++++++++++++++++++++++++++++++
 components/RefreshControl.tsx      | 21 ++++++++++
 2 files changed, 87 insertions(+)
 create mode 100644 components/RefreshControl.test.tsx
 create mode 100644 components/RefreshControl.tsx

diff --git a/components/RefreshControl.test.tsx b/components/RefreshControl.test.tsx
new file mode 100644
index 0000000..f803f62
--- /dev/null
+++ b/components/RefreshControl.test.tsx
@@ -0,0 +1,66 @@
+import React from 'react'
+import { render } from '@testing-library/react-native'
+import { ScrollView } from 'react-native'
+import RefreshControl from './RefreshControl'
+
+describe('RefreshControl Component', () => {
+  describe('Basic Rendering', () => {
+    it('should render with refreshing false', () => {
+      const mockOnRefresh = jest.fn()
+      const { UNSAFE_root } = render(
+        <ScrollView
+          refreshControl={
+            <RefreshControl refreshing={false} onRefresh={mockOnRefresh} />
+          }
+        >
+          <></>
+        </ScrollView>
+      )
+      expect(UNSAFE_root).toBeTruthy()
+    })
+
+    it('should render with refreshing true', () => {
+      const mockOnRefresh = jest.fn()
+      const { UNSAFE_root } = render(
+        <ScrollView
+          refreshControl={
+            <RefreshControl refreshing={true} onRefresh={mockOnRefresh} />
+          }
+        >
+          <></>
+        </ScrollView>
+      )
+      expect(UNSAFE_root).toBeTruthy()
+    })
+  })
+
+  describe('Props', () => {
+    it('should accept refreshing prop', () => {
+      const mockOnRefresh = jest.fn()
+      const { UNSAFE_root } = render(
+        <ScrollView
+          refreshControl={
+            <RefreshControl refreshing={true} onRefresh={mockOnRefresh} />
+          }
+        >
+          <></>
+        </ScrollView>
+      )
+      expect(UNSAFE_root).toBeTruthy()
+    })
+
+    it('should accept onRefresh callback prop', () => {
+      const mockOnRefresh = jest.fn()
+      const { UNSAFE_root } = render(
+        <ScrollView
+          refreshControl={
+            <RefreshControl refreshing={false} onRefresh={mockOnRefresh} />
+          }
+        >
+          <></>
+        </ScrollView>
+      )
+      expect(UNSAFE_root).toBeTruthy()
+    })
+  })
+})
diff --git a/components/RefreshControl.tsx b/components/RefreshControl.tsx
new file mode 100644
index 0000000..113883a
--- /dev/null
+++ b/components/RefreshControl.tsx
@@ -0,0 +1,21 @@
+import React from 'react'
+import { RefreshControl as RNRefreshControl } from 'react-native'
+
+interface RefreshControlProps {
+  refreshing: boolean
+  onRefresh: () => void
+}
+
+export default function RefreshControl({
+  refreshing,
+  onRefresh,
+}: RefreshControlProps) {
+  return (
+    <RNRefreshControl
+      refreshing={refreshing}
+      onRefresh={onRefresh}
+      tintColor="#F5F5F5"
+      colors={['#F5F5F5']}
+    />
+  )
+}