Why does react-native's onLayout occur in a random order in ios?

Why does react-native's onlayout return in a apparently random order when used in array.map on IOS devices?

I'm using onlayout in a function that returns a number of touchableopacity components, based on a array of objects. It finds the first one which has not yet passed and then stores its position to scroll to it using the following code:

renderScrollViewContent () {
var data = this.state.dataSource.topics[this.state.TopicID].programs
return (
  <View style={{flex: 1, marginTop: 7}}>
    {
        data.map((l, i) => (
          console.log("B:" + l.title),
          <TouchableOpacity key={i}
            onLayout={event => {
              console.log("C:" + l.title)
              if (this.state.scrollPosition === 0 && Moment().isBefore(l.end_time)) {
                const layout = event.nativeEvent.layout
                this.state.scrollPosition = layout.y  
                ...

The problem is that while B: is always in the same order, C: is different each time, like its being drawn async, but only on IOS devices - android testing shows the same each time.

Is there a way I can get it to act sync or otherwise get the y position of the first array element whose end time has not yet passed? And what is the difference between the way ios and android utilises onlayout?