onEndReached not called when new data on same page - react-native

Question

So when I first load my component it fetches data from the server. The data is displayed and takes up less space than the screen. Shouldn't onEndReached be called in this situation? Or is my assumption incorrect because the data wasn't scrolled to? From my testing, onEndReached is not called on Android & IOS but I want it to.
/**
* https://reactnavigation.org/docs/4.x/typescript
*/
type Props = {
navigation: NavigationDrawerProp<{ userId: string, routeName: string }>;
}
let idCounter = 0;
export const keyExtractor = (item: any) => {
if (!item.uniqueId) {
item.uniqueId = idCounter;
idCounter++;
}
return item.uniqueId.toString();
}
const MasterScreen = (props: Props) => {
const [data, setData] = useState([]);
const loadDataFirstTime = () => {
setTimeout(() => {
let newData = [];
for (let i = 0; i < 2; i++) {
newData.push({})
}
setData(newData)
}, 4000)
}
useEffect(() => {
loadDataFirstTime();
}, []);
const renderItem = () => {
return <Text>Placeholder</Text>
}
const onEndReached = () => {
console.log("End reached with data length", data.length)
Alert.alert("Data length: " + data.length)
}
return (
<SafeAreaView style={{ flex: 1, height: height }}>
<FlatList data={data}
keyExtractor={keyExtractor}
renderItem={renderItem}
onEndReached={onEndReached}
onEndReachedThreshold={0.5}
/>
</SafeAreaView>
);
}
Using react native 0.63.4
EDIT:
Sample github repo
Relevant code inside src/screens/MasterScreen.tsx
onEndReached is not called on load but you will see the FlatList rendered
To test:
yarn
yarn android