ListviewGridLayout throws an excpetion while rendering rows

[bozzmob]

I am using unmodified code(except for a console.log) of ListviewGridLayoutExample. I have called this module as Listicons. And trying to call this scene from another file.

Listicons.js

'use strict';

var React = require('react-native');
var {
  Image,
  ListView,
  TouchableHighlight,
  StyleSheet,
  AppRegistry,
  Text,
  View,
} = React;

var THUMB_URLS = [
  'https://en.opensuse.org/images/1/1d/Skype-icon-128x128.png',
  'http://www.openwebanalytics.com/wp-content/plugins/owa/modules/base/i/browsers/128x128/ie4.png',
  'http://e38.ru/files/imagecache/192x192/files/pictures/picture-2293.jpg',
  'http://mib.pianetalinux.org/blog/images/stories/d/darktable-128x128.png',
  'http://kansascitysnowcones.com/wp-content/uploads/2012/06/128x128-youtube.png',
  'http://vectorlogo.biz/wp-content/uploads/2013/01/NEW-INTEL-VECTORLOGO-DOT-BIZ-128x128.png',
  'http://www.iconesbr.net/iconesbr/2008/08/4328/4328_128x128.png',
  'http://www.justinparks.com/wp-content/uploads/2009/10/google-badge-128x128.png',
  'http://citruspay.com/DevelopersGuide/citrusjs/images/logo@2x.png',
  'https://bitbucket-assetroot.s3.amazonaws.com/c/photos/2014/May/02/coronium-mongo-demo-logo-469707550-0_avatar.png',
  'http://www.mstoic.com/wp-content/uploads/2013/07/Speed-128x128.png',
  'http://icons.iconarchive.com/icons/giannis-zographos/german-football-club/128/Eintracht-Frankfurt-icon.png',
];

var Listicons = React.createClass({

  statics: {
    title: '<ListView> - Grid Layout',
    description: 'Flexbox grid layout.'
  },

  getInitialState: function() {
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    return {
      dataSource: ds.cloneWithRows(this._genRows({})),
    };
  },

  _pressData: ({}: {[key: number]: boolean}),

  componentWillMount: function() {
    this._pressData = {};
  },

  render: function() {
    return (
      // ListView wraps ScrollView and so takes on its properties.
      // With that in mind you can use the ScrollView's contentContainerStyle prop to style the items.
      <ListView
        contentContainerStyle={styles.list}
        dataSource={this.state.dataSource}
        renderRow={this._renderRow}
      />
    );
  },

  _renderRow: function(rowData: string, sectionID: number, rowID: number) {
    var rowHash = Math.abs(hashCode(rowData));
    var imgSource = {
      uri: THUMB_URLS[rowHash % THUMB_URLS.length],
    };
    console.log("inside _renderRow rowData = "+JSON.stringify({rowData})+"imgSource = "+JSON.stringify({imgSource}));
    return (
      <TouchableHighlight onPress={() => this._pressRow(rowID)} underlayColor="transparent">
        <View>
          <View style={styles.row}>
            <Image style={styles.thumb} source={imgSource} />
            <Text style={styles.text}>
              {rowData}
            </Text>
          </View>
        </View>
      </TouchableHighlight>
    );
  },

  _genRows: function(pressData: {[key: number]: boolean}): Array<string> {
    var dataBlob = [];
    for (var ii = 0; ii < 100; ii++) {
      var pressedText = pressData[ii] ? ' (X)' : '';
      dataBlob.push('Cell ' + ii + pressedText);
    }
    return dataBlob;
  },

  _pressRow: function(rowID: number) {
    this._pressData[rowID] = !this._pressData[rowID];
    this.setState({dataSource: this.state.dataSource.cloneWithRows(
      this._genRows(this._pressData)
    )});
  },
});

/* eslint no-bitwise: 0 */
var hashCode = function(str) {
  var hash = 15;
  for (var ii = str.length - 1; ii >= 0; ii--) {
    hash = ((hash << 5) - hash) + str.charCodeAt(ii);
  }
  return hash;
};

var styles = StyleSheet.create({
  list: {
    justifyContent: 'space-around',
    flexDirection: 'row',
    flexWrap: 'wrap'
  },
  row: {
    justifyContent: 'center',
    padding: 5,
    margin: 3,
    width: 100,
    height: 100,
    backgroundColor: '#F6F6F6',
    alignItems: 'center',
    borderWidth: 1,
    borderRadius: 5,
    borderColor: '#CCC'
  },
  thumb: {
    width: 64,
    height: 64
  },
  text: {
    flex: 1,
    marginTop: 5,
    fontWeight: 'bold'
  },
});

//AppRegistry.registerComponent('ListViewGridLayoutExample', () => ListViewGridLayoutExample);
module.exports = Listicons;

The logs of console.log of _renderRows-

11-22 11:05:13.234 11283-22341/com.sahasraa D/ReactNativeJS: 'inside _renderRow rowData = {"rowData":"Cell 2"}imgSource = {"imgSource":{"uri":"https://bitbucket-assetroot.s3.amazonaws.com/c/photos/2014/May/02/coronium-mongo-demo-logo-469707550-0_avatar.png"}}'
11-22 11:05:13.244 11283-22341/com.sahasraa D/ReactNativeJS: 'inside _renderRow rowData = {"rowData":"Cell 3"}imgSource = {"imgSource":{"uri":"http://e38.ru/files/imagecache/192x192/files/pictures/picture-2293.jpg"}}'
11-22 11:05:13.253 11283-22341/com.sahasraa D/ReactNativeJS: 'inside _renderRow rowData = {"rowData":"Cell 4"}imgSource = {"imgSource":{"uri":"http://www.justinparks.com/wp-content/uploads/2009/10/google-badge-128x128.png"}}'
11-22 11:05:13.276 11283-22341/com.sahasraa D/ReactNativeJS: 'inside _renderRow rowData = {"rowData":"Cell 5"}imgSource = {"imgSource":{"uri":"https://en.opensuse.org/images/1/1d/Skype-icon-128x128.png"}}'
11-22 11:05:13.287 11283-22341/com.sahasraa D/ReactNativeJS: 'inside _renderRow rowData = {"rowData":"Cell 6"}imgSource = {"imgSource":{"uri":"http://vectorlogo.biz/wp-content/uploads/2013/01/NEW-INTEL-VECTORLOGO-DOT-BIZ-128x128.png"}}'
11-22 11:05:13.294 11283-22341/com.sahasraa D/ReactNativeJS: 'inside _renderRow rowData = {"rowData":"Cell 7"}imgSource = {"imgSource":{"uri":"http://www.mstoic.com/wp-content/uploads/2013/07/Speed-128x128.png"}}'
11-22 11:05:13.304 11283-22341/com.sahasraa D/ReactNativeJS: 'inside _renderRow rowData = {"rowData":"Cell 8"}imgSource = {"imgSource":{"uri":"http://mib.pianetalinux.org/blog/images/stories/d/darktable-128x128.png"}}'
11-22 11:05:13.314 11283-22341/com.sahasraa D/ReactNativeJS: 'inside _renderRow rowData = {"rowData":"Cell 9"}imgSource = {"imgSource":{"uri":"http://citruspay.com/DevelopersGuide/citrusjs/images/logo@2x.png"}}'
11-22 11:05:13.354 11283-22341/com.sahasraa D/ReactNativeJS: 'inside _renderRow rowData = {"rowData":"Cell 10"}imgSource = {"imgSource":{"uri":"http://e38.ru/files/imagecache/192x192/files/pictures/picture-2293.jpg"}}'
11-22 11:05:13.381 11283-22341/com.sahasraa D/ReactNativeJS: 'inside _renderRow rowData = {"rowData":"Cell 11"}imgSource = {"imgSource":{"uri":"http://mib.pianetalinux.org/blog/images/stories/d/darktable-128x128.png"}}'
11-22 11:05:13.388 11283-11283/com.sahasraa E/unknown:React: Exception in native call from JS
11-22 11:05:13.388 11283-11283/com.sahasraa E/unknown:React: com.facebook.react.uimanager.IllegalViewOperationException: Trying to add unknown view tag: 69
11-22 11:05:13.388 11283-11283/com.sahasraa E/unknown:React:  detail: View tag:66
11-22 11:05:13.388 11283-11283/com.sahasraa E/unknown:React:   children(1): [
11-22 11:05:13.388 11283-11283/com.sahasraa E/unknown:React: 68,
11-22 11:05:13.388 11283-11283/com.sahasraa E/unknown:React:  ],
11-22 11:05:13.388 11283-11283/com.sahasraa E/unknown:React:   viewsToAdd(1): [
11-22 11:05:13.388 11283-11283/com.sahasraa E/unknown:React: [1,69],
11-22 11:05:13.388 11283-11283/com.sahasraa E/unknown:React:  ],
11-22 11:05:13.426 11283-22341/com.sahasraa D/ReactNativeJS: 'inside _renderRow rowData = {"rowData":"Cell 12"}imgSource = {"imgSource":{"uri":"http://kansascitysnowcones.com/wp-content/uploads/2012/06/128x128-youtube.png"}}'
11-22 11:05:13.469 11283-22341/com.sahasraa D/ReactNativeJS: 'inside _renderRow rowData = {"rowData":"Cell 10"}imgSource = {"imgSource":{"uri":"http://e38.ru/files/imagecache/192x192/files/pictures/picture-2293.jpg"}}'
11-22 11:05:13.504 11283-22341/com.sahasraa D/ReactNativeJS: 'inside _renderRow rowData = {"rowData":"Cell 13"}imgSource = {"imgSource":{"uri":"http://vectorlogo.biz/wp-content/uploads/2013/01/NEW-INTEL-VECTORLOGO-DOT-BIZ-128x128.png"}}'
11-22 11:05:13.530 11283-22341/com.sahasraa D/ReactNativeJS: 'inside _renderRow rowData = {"rowData":"Cell 14"}imgSource = {"imgSource":{"uri":"http://e38.ru/files/imagecache/192x192/files/pictures/picture-2293.jpg"}}'
11-22 11:05:13.563 11283-22341/com.sahasraa D/ReactNativeJS: 'inside _renderRow rowData = {"rowData":"Cell 15"}imgSource = {"imgSource":{"uri":"http://mib.pianetalinux.org/blog/images/stories/d/darktable-128x128.png"}}'

I am not sure why that error is throwing up. What am I doing wrong?

Screenshot-

// cc : @ide @vjeux @paramaggarwal @akiran

[skevy]

Looks like this could be related to #4319.

[bozzmob]

Thanks @skevy Yes. It looks similar. But, in my case I am not using any 3rd party code. Purely React Native components from UIExplorer Examples(Without any modification). I am not able to understand the reason for the issue.

[ide]

You might have a JS error somewhere.

[bozzmob]

@ide Thanks for your reply :)

This is the section of code that the error is pointing to-

      <TouchableHighlight onPress={() => this._pressRow(rowID)} underlayColor="transparent">
        <View>
          <View style={styles.row}>
            <Image style={styles.thumb} source={imgSource} />
            <Text style={styles.text}>
              {rowData}
            </Text>
          </View>
        </View>
      </TouchableHighlight>

Basically the 1st view tag. I have not changed any code from UIExplorer example of ListviewGridExample.js file. Except replacing some Image URLs. That's all.

[bozzmob]

@skevy @ide Thanks for your time and effort :) Not sure how, but, I re-coded the same stuff from the scratch again. And it seems to be working fine.

Here is the code- https://github.com/bozzmob/navigator-react-native

I will figure out the diff between files, across projects and update this issue on what had gone wrong.

Thanks again @ide and @skevy ! Will try my best to help in this community :)