Task orphaned for request in react-native – what does it mean?

Question

I am trying to build a grid system for tiles with buttons and other actions. I forked trying with the react native playground grid images source, that you can find here. It produces the following "stacktrace" and error when adding zIndex to individual pics. Images are never portrayed.

In case you are interested this is the exact component I am using:

export default class GridLayout extends Component {
  constructor () {
    super()
    const { width, height } = Dimensions.get('window')
    this.state = {
      currentScreenWidth: width,
      currentScreenHeight: height
    }
  }

  handleRotation (event) {
    var layout = event.nativeEvent.layout
    this.setState({ currentScreenWidth: layout.width, currentScreenHeight: layout.height })
  }

  calculatedSize () {
    var size = this.state.currentScreenWidth / IMAGES_PER_ROW
    return { width: size, height: size }
  }

  renderRow (images) {
    return images.map((uri, i) => {
      return (
        <Image key={i} style={[styles.image, this.calculatedSize()]} source={{uri: uri}} />
      )
    })
  }

  renderImagesInGroupsOf (count) {
    return _.chunk(IMAGE_URLS, IMAGES_PER_ROW).map((imagesForRow) => {
      console.log('row being painted')
      return (
        <View key={uuid.v4()} style={styles.row}>
          {this.renderRow(imagesForRow)}
        </View>
      )
    })
  }

  render () {
    return (
      <ScrollView style={styles.grid} onLayout={(ev) => this.handleRotation(ev)} contentContainerStyle={styles.scrollView}>
        {this.renderImagesInGroupsOf(IMAGES_PER_ROW)}
      </ScrollView>
    )
  }
}

var styles = StyleSheet.create({

  grid: {
    flex: 1,
    backgroundColor: 'blue'
  },

  row: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'flex-start',
    backgroundColor: 'magenta'
  },

  image: {
    zIndex: 2000
  }
})

Answer 1

It may have something to do with the way you are rendering. Your request seems to get stuck. It looks like this is the code where the error is thrown in RN (from RCTImageLoader.m):

// Remove completed tasks
for (RCTNetworkTask *task in _pendingTasks.reverseObjectEnumerator) {
  switch (task.status) {
    case RCTNetworkTaskFinished:
      [_pendingTasks removeObject:task];
      _activeTasks--;
      break;
    case RCTNetworkTaskPending:
      break;
    case RCTNetworkTaskInProgress:
      // Check task isn't "stuck"
      if (task.requestToken == nil) {
        RCTLogWarn(@"Task orphaned for request %@", task.request);
        [_pendingTasks removeObject:task];
        _activeTasks--;
        [task cancel];
      }
      break;
  }
}

I'm not exactly sure how to solve this, but a couple ideas to help you debug:

1. The <Image> component has some functions and callbacks that you could utilize to try to further track down the issue (onLoad, onLoadEnd, onLoadStart, onError, onProgress). The last two are iOS only but you could see if any of those are called to see where in the process things get hung up.

2. Alternatively, the way I would do this would be to use a ListView and place the image urls in the datasource prop for the ListView (utilizing the _.chunk method to group them as you already do). This would be a little cleaner way of rendering them IMO