I have a large long image with a few inputs at the bottom in my react native view. When the view loads I want it to be "scrolled" to the bottom of the page -- all the examples I can find online are triggered because of some event that the user does.

I want to call scrollToEnd() but I'm not sure where in the lifecycle the ref will actually be set -- anyone have ideas?


Use scrollToEnd this way. It will take to the bottom of ScrollView

    ref={ref => this.scrollView = ref}
    onContentSizeChange={(contentWidth, contentHeight)=>{        
        this.scrollView.scrollToEnd({animated: true});


I am not clear with your question but

With react-native Image component we have onLoad prop. I think this is what you are looking for. try something like:

<Image source={{uri...}} onLoad={(e)=>this.handleImageLoaded(e)}/>

then inside handleImageLoaded method you can use scrollToEnd() with some ref as per your code.

also there are other useful props like onLoadStart/End check here


Or if you are just waiting for the view to render then to scroll for that I think componentDidAppear() lifecycle method, if using react-native -navigation by wix

or with react-navigation willFocus, willBlur, didFocus and didBlur events for the component render cycle.. explained here https://reactnavigation.org/docs/en/navigation-prop.html#addlistener-subscribe-to-updates-to-navigation-lifecycle

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.