React-Native automatically scroll down

Question

I have an app with one ScrollView and a button and a long text inside inside:

return (
    <ScrollView>
        <Button onPress={slowlyScrollDown} title="Slowly scroll a bit down..." />
        <Text>
              [ Very long text here where user has to scroll ]
        </Text>
    </ScrollView>
)

When the user presses the button, I want to slowly scroll down a bit, like that he can see like the first 5-10 lines of the Text.

I would accept any answer that provides a piece of code how I can implement that.

D10S · Accepted Answer · 2020-06-16 13:29:11Z

7

I am not sure it will work but that is the direction:

const [offset,setOffset] = useState(0);
const scrollViewRef = useRef();

const slowlyScrollDown = () => {
    const y = offset + 80;
    scrollViewRef.current.scrollTo({x: 0, y, animated: true});
    setOffset(y);
}

return (
    <ScrollView ref={scrollViewRef} >
        <Button onPress={slowlyScrollDown} title="Slowly scroll a bit down..." />
        <Text>
              [ Very long text here where user has to scroll ]
        </Text>
    </ScrollView>
)

answered Jun 16, 2020 at 13:29

D10S

1,5692 gold badges9 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Codemaker2015 · Accepted Answer · 2022-07-21 12:01:17Z

Use scrollTo() to scroll to a given x, y offset, either immediately, with a smooth animation.

For that take a reference of the scroll view using useRef. then follow the below autoScroll() method to implement the programmatic scroll in your application.

import React, {useRef} from 'react';
import {  ScrollView, Text, Button  } from 'react-native';

export default function App() {

    const scrollViewRef = useRef();

    const autoScroll = () => {
        let offset = 0;
        setInterval(()=> {
            offset += 20
            scrollViewRef.current?.scrollTo({x: 0, y: offset, animated: true})
        }, 1000)
    }

    return (
        <ScrollView ref={scrollViewRef} >
            <Button onPress={autoScroll} title="Start scrolling" />
            <Text>
                [ long text ]
            </Text>
        </ScrollView>
    )
}

Collectives™ on Stack Overflow

React-Native automatically scroll down

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related