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>
This commit is contained in:
parent
5a28a0e85e
commit
111939dd0c
|
|
@ -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()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
@ -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']}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue