Skip to content

Commit 581c87f

Browse files
kanellockanelloc
authored
feat: Enable ref forwarding (#47)
1 parent be6e20f commit 581c87f

File tree

4 files changed

+113
-90
lines changed

4 files changed

+113
-90
lines changed

‎example/src/screens/HeaderNavBarExample.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,16 @@
1-
import { Card, TopNavBar, HeaderNavBar } from '../components';
1+
import { Card, HeaderNavBar, TopNavBar } from '../components';
22
import * as React from 'react';
3+
import { useRef } from 'react';
34
import { AnimatedScrollView } from '@kanelloc/react-native-animated-header-scroll-view';
45
import { data, isIOS } from '../utils';
6+
import type { ScrollView } from 'react-native';
57

68
export const HeaderNavBarExample = () => {
9+
const scrollRef = useRef<ScrollView>(null);
10+
711
return (
812
<AnimatedScrollView
13+
ref={scrollRef}
914
headerMaxHeight={400}
1015
topBarHeight={isIOS ? 90 : 70}
1116
HeaderNavbarComponent={<HeaderNavBar />}

‎example/src/screens/HeaderNavbarFlatListExample.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import * as React from 'react';
2-
import { RefreshControl, StyleSheet, View } from 'react-native';
2+
import { useRef } from 'react';
3+
import { FlatList, RefreshControl, StyleSheet, View } from 'react-native';
34
import { AnimatedFlatList } from '@kanelloc/react-native-animated-header-scroll-view';
45
import { data } from '../utils';
56
import { Card, HeaderNavBar, TopNavBar } from '../components';
@@ -10,6 +11,7 @@ const fetch = () => {
1011
};
1112
export const HeaderNavbarFlatListExample = () => {
1213
const { isRefreshing, onRefresh } = useRefresh(fetch);
14+
const scrollRef = useRef<FlatList>(null);
1315
const renderItem = ({ item }: any) => {
1416
return (
1517
<View>
@@ -21,6 +23,7 @@ export const HeaderNavbarFlatListExample = () => {
2123
return (
2224
<View>
2325
<AnimatedFlatList
26+
ref={scrollRef}
2427
refreshControl={
2528
<RefreshControl
2629
refreshing={isRefreshing}

‎src/components/AnimatedFlatList.tsx‎

Lines changed: 50 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,57 @@
1-
import React from 'react';
2-
import { Animated } from 'react-native';
1+
import React, { forwardRef } from 'react';
2+
import { Animated, FlatList } from 'react-native';
33
import type { AnimatedFlatListViewProps } from '../types';
44
import AnimatedNavbar from './AnimatedNavbar';
55
import { HEADER_HEIGHT, IMG_HEADER_HEIGHT } from '../constants';
66
import { useAnimateScrollView } from '../hooks/useAnimateScrollView';
77
import { AnimatedHeader } from './AnimatedHeader';
88

9-
export const AnimatedFlatList = ({
10-
headerMaxHeight,
11-
topBarHeight,
12-
disableScale,
13-
TopNavBarComponent,
14-
HeaderNavbarComponent,
15-
headerImage,
16-
imageStyle,
17-
HeaderComponent,
18-
...props
19-
}: AnimatedFlatListViewProps) => {
20-
const imageHeight = headerMaxHeight || IMG_HEADER_HEIGHT;
21-
const headerNavHeight = topBarHeight || HEADER_HEIGHT;
22-
const [scroll, onScroll, scale, translateYDown, translateYUp] =
23-
useAnimateScrollView(imageHeight, disableScale);
9+
export const AnimatedFlatList = forwardRef<FlatList, AnimatedFlatListViewProps>(
10+
(
11+
{
12+
headerMaxHeight,
13+
topBarHeight,
14+
disableScale,
15+
TopNavBarComponent,
16+
HeaderNavbarComponent,
17+
headerImage,
18+
imageStyle,
19+
HeaderComponent,
20+
...props
21+
}: AnimatedFlatListViewProps,
22+
ref
23+
) => {
24+
const imageHeight = headerMaxHeight || IMG_HEADER_HEIGHT;
25+
const headerNavHeight = topBarHeight || HEADER_HEIGHT;
26+
const [scroll, onScroll, scale, translateYDown, translateYUp] =
27+
useAnimateScrollView(imageHeight, disableScale);
2428

25-
return (
26-
<>
27-
<Animated.FlatList
28-
{...props}
29-
onScroll={onScroll}
30-
ListHeaderComponent={
31-
<AnimatedHeader
32-
HeaderComponent={HeaderComponent}
33-
headerImage={headerImage}
34-
imageStyle={imageStyle}
35-
imageHeight={imageHeight}
36-
translateYDown={translateYDown}
37-
translateYUp={translateYUp}
38-
scale={scale}
39-
/>
40-
}
41-
/>
42-
<AnimatedNavbar
43-
headerHeight={headerNavHeight}
44-
scroll={scroll}
45-
imageHeight={imageHeight}
46-
OverflowHeaderComponent={HeaderNavbarComponent}
47-
TopNavbarComponent={TopNavBarComponent}
48-
/>
49-
</>
50-
);
51-
};
29+
return (
30+
<>
31+
<Animated.FlatList
32+
ref={ref}
33+
{...props}
34+
onScroll={onScroll}
35+
ListHeaderComponent={
36+
<AnimatedHeader
37+
HeaderComponent={HeaderComponent}
38+
headerImage={headerImage}
39+
imageStyle={imageStyle}
40+
imageHeight={imageHeight}
41+
translateYDown={translateYDown}
42+
translateYUp={translateYUp}
43+
scale={scale}
44+
/>
45+
}
46+
/>
47+
<AnimatedNavbar
48+
headerHeight={headerNavHeight}
49+
scroll={scroll}
50+
imageHeight={imageHeight}
51+
OverflowHeaderComponent={HeaderNavbarComponent}
52+
TopNavbarComponent={TopNavBarComponent}
53+
/>
54+
</>
55+
);
56+
}
57+
);

‎src/components/AnimatedScrollView.tsx‎

Lines changed: 53 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,62 @@
1-
import { Animated } from 'react-native';
2-
import React from 'react';
1+
import { Animated, ScrollView } from 'react-native';
2+
import React, { forwardRef } from 'react';
33
import { HEADER_HEIGHT, IMG_HEADER_HEIGHT } from '../constants';
44
import AnimatedNavbar from './AnimatedNavbar';
55
import type { AnimatedScrollViewProps } from '../types';
66
import { useAnimateScrollView } from '../hooks/useAnimateScrollView';
77
import { AnimatedHeader } from './AnimatedHeader';
88

9-
export const AnimatedScrollView = ({
10-
TopNavBarComponent,
11-
HeaderNavbarComponent,
12-
HeaderComponent,
13-
headerMaxHeight,
14-
topBarHeight,
15-
headerImage,
16-
disableScale,
17-
children,
18-
imageStyle,
19-
...props
20-
}: AnimatedScrollViewProps) => {
21-
const imageHeight = headerMaxHeight || IMG_HEADER_HEIGHT;
22-
const headerNavHeight = topBarHeight || HEADER_HEIGHT;
23-
const [scroll, onScroll, scale, translateYDown, translateYUp] =
24-
useAnimateScrollView(imageHeight, disableScale);
9+
export const AnimatedScrollView = forwardRef<
10+
ScrollView,
11+
AnimatedScrollViewProps
12+
>(
13+
(
14+
{
15+
TopNavBarComponent,
16+
HeaderNavbarComponent,
17+
HeaderComponent,
18+
headerMaxHeight,
19+
topBarHeight,
20+
headerImage,
21+
disableScale,
22+
children,
23+
imageStyle,
24+
...props
25+
}: AnimatedScrollViewProps,
26+
ref
27+
) => {
28+
const imageHeight = headerMaxHeight || IMG_HEADER_HEIGHT;
29+
const headerNavHeight = topBarHeight || HEADER_HEIGHT;
30+
const [scroll, onScroll, scale, translateYDown, translateYUp] =
31+
useAnimateScrollView(imageHeight, disableScale);
2532

26-
return (
27-
<>
28-
<Animated.ScrollView
29-
onScroll={onScroll}
30-
scrollEventThrottle={16}
31-
{...props}
32-
>
33-
<AnimatedHeader
34-
HeaderComponent={HeaderComponent}
35-
headerImage={headerImage}
36-
imageStyle={imageStyle}
33+
return (
34+
<>
35+
<Animated.ScrollView
36+
ref={ref}
37+
onScroll={onScroll}
38+
scrollEventThrottle={16}
39+
{...props}
40+
>
41+
<AnimatedHeader
42+
HeaderComponent={HeaderComponent}
43+
headerImage={headerImage}
44+
imageStyle={imageStyle}
45+
imageHeight={imageHeight}
46+
translateYDown={translateYDown}
47+
translateYUp={translateYUp}
48+
scale={scale}
49+
/>
50+
{children}
51+
</Animated.ScrollView>
52+
<AnimatedNavbar
53+
headerHeight={headerNavHeight}
54+
scroll={scroll}
3755
imageHeight={imageHeight}
38-
translateYDown={translateYDown}
39-
translateYUp={translateYUp}
40-
scale={scale}
56+
OverflowHeaderComponent={HeaderNavbarComponent}
57+
TopNavbarComponent={TopNavBarComponent}
4158
/>
42-
{children}
43-
</Animated.ScrollView>
44-
<AnimatedNavbar
45-
headerHeight={headerNavHeight}
46-
scroll={scroll}
47-
imageHeight={imageHeight}
48-
OverflowHeaderComponent={HeaderNavbarComponent}
49-
TopNavbarComponent={TopNavBarComponent}
50-
/>
51-
</>
52-
);
53-
};
59+
</>
60+
);
61+
}
62+
);

0 commit comments

Comments
 (0)