react native scroll to top function componet

Solutions on MaxInterview for react native scroll to top function componet by the best coders in the world

showing results for - "react native scroll to top function componet"
Trevon
15 Apr 2019
1export const Parent : FC<ParentProps> = props => {
2    const scrollRef = useRef<ScrollView>();
3
4    const onFabPress = () => {
5        scrollRef.current?.scrollTo({
6            y : 0,
7            animated : true
8        });
9    }
10
11    return (
12        <View>
13            <ScrollView ref={scrollRef}>
14                {/* Your content here */}
15            </ScrollView>
16            <FloatingButton onPress={onFabPress} />
17        </View>  
18    );
19}
20
21export const FloatingButton : FC<FloatingButtonProps> = props => {
22    const { onPress } = props;
23
24    const onFabPress = () => {
25        // Do whatever logic you need to
26        // ...
27
28        onPress();
29    }
30
31    return (
32        <Fab position="bottomRight" onPress={onFabPress}>
33            <Icon name="arrow-round-up" />
34        </Fab>
35    );
36}
37
38
39
40if you are using flatlist 
41
42
43    const scrollRef = useRef<Flatlist>();
44
45
46    const onFabPress = () => {
47        scrollRef.current?.scrollToOffset({
48            y : 0,
49            animated : true
50        });
51    }
52
53    
54    
55scrollToOffset is flatlist fucntion