ScrollView onscroll is not executed at rendering

[SergiuTudos]

When I try to render a list of ScollView components I am trying to programmatically scroll using either onContentSizeChange or useEffect nothing happens. According to documentation, it should work.

React Native version:

System:
Binaries:
Node: 10.15.3 - /usr/local/bin/node
npm: 6.4.1 - /usr/local/bin/npm
react: 16.9.0 => 16.9.0
react-native: 0.61.2 => 0.61.2

Steps To Reproduce

1. Swipe Hero list to left
2. Swipe up Hero list

Actual output:

Expected to happen:
I expect the hero ScrollView to be scrolled and aligned to tiny images
scrollTo in useEffect method should run correctly

useEffect(() => {
scrollView.current.scrollTo({ x: state.big})

  },[state.heroIndex]);

Snack, code example, screenshot, or link to a repository:
https://snack.expo.io/r1L24RFsB

[thymikee]

This is likely an issue with the logic, which is pretty complicated here and I have troubles understanding what's actually wrong. Use the simplest possible version to demonstrate the "bug" (which it likely isn't)

[SergiuTudos]

import React, { Component, useReducer, useRef, useEffect } from 'react';
import { View, ScrollView, Animated, Dimensions, StyleSheet, Image, SafeAreaView } from 'react-native';

const { width } = Dimensions.get('window');

const tinyView = {
width: width / 3,
height: width / 3,
margin: 3,
borderRadius: 10,
backgroundColor: 'blue',
}

export default App = () => {

scrollViewTotal = useRef();
scrollContainer=()=>{
   if(scrollViewTotal.current){
    scrollViewTotal.current.scrollTo({x:150})        
   } 
}
buildView=()=>{
    return(
    <View>
    <Image
        style={tinyView}
    />
</View>)
}
useEffect(() => {
    scrollContainer()
 },[]);
return (
        <SafeAreaView style={{ backgroundColor: 'red' }} >
            <ScrollView horizontal nestedScrollEnabled={false} directionalLockEnabled={true}
                ref={(scrollViewTotal)}
                onScrollEndDrag={(e) => { scrollContainer() }}
            >
                            {buildView()}
                            {buildView()}
                            {buildView()}
                            {buildView()}
                            {buildView()}
                            {buildView()}
                            {buildView()}
                            {buildView()}
                            {buildView()}                               
            </ScrollView>
            
        </SafeAreaView>
);

}