Answers for "scroll to top in react native"

2

react native scroll to top function componet

export const Parent : FC<ParentProps> = props => {
    const scrollRef = useRef<ScrollView>();

    const onFabPress = () => {
        scrollRef.current?.scrollTo({
            y : 0,
            animated : true
        });
    }

    return (
        <View>
            <ScrollView ref={scrollRef}>
                {/* Your content here */}
            </ScrollView>
            <FloatingButton onPress={onFabPress} />
        </View>  
    );
}

export const FloatingButton : FC<FloatingButtonProps> = props => {
    const { onPress } = props;

    const onFabPress = () => {
        // Do whatever logic you need to
        // ...

        onPress();
    }

    return (
        <Fab position="bottomRight" onPress={onFabPress}>
            <Icon name="arrow-round-up" />
        </Fab>
    );
}



if you are using flatlist 


    const scrollRef = useRef<Flatlist>();


    const onFabPress = () => {
        scrollRef.current?.scrollToOffset({
            y : 0,
            animated : true
        });
    }

    
    
scrollToOffset is flatlist fucntion
Posted by: Guest on May-21-2021

Code answers related to "scroll to top in react native"

Code answers related to "Javascript"

Browse Popular Code Answers by Language