Room for improvement on cloneWithRowsAndSections? #5572

Closed
ffxsam opened this Issue Jan 27, 2016 · 11 comments

Projects

None yet

9 participants

@ffxsam
ffxsam commented Jan 27, 2016

I find this to be extremely confusing the way one has to set up the section ID array and row ID array to pass into this function. It feels like a real brain-buster, and I don't think it should be. I was wondering if the team is open to ideas on refining this and making it much more straightforward.

@facebook-github-bot

Hey ffxsam, thanks for reporting this issue!

React Native, as you've probably heard, is getting really popular and truth is we're getting a bit overwhelmed by the activity surrounding it. There are just too many issues for us to manage properly.

  • If you don't know how to do something or something is not working as you expect but not sure it's a bug, please ask on StackOverflow with the tag react-native or for more real time interactions, ask on Discord in the #react-native channel.
  • If this is a feature request or a bug that you would like to be fixed, please report it on Product Pains. It has a ranking feature that lets us focus on the most important issues the community is experiencing.
  • We welcome clear issues and PRs that are ready for in-depth discussion. Please provide screenshots where appropriate and always mention the version of React Native you're using. Thank you for your contributions!
@ffxsam
ffxsam commented Jan 27, 2016

Like for instance, why can't we pass just a single data blob like this?

[
  {
    section: 'Fruits',
    rows: [
      {
        name: 'Apple',
        color: 'red'
      },
      {
        name: 'Orange',
        color: 'orange'
      }
    ]
  },
  {
    section: 'Vegetables',
    rows: [
      {
        name: 'Celery',
        color: 'green'
      },
      {
        name: 'Carrot',
        color: 'orange'
      }
    ]
  }
]
@ide
Collaborator
ide commented Jan 27, 2016

That could work - write a helper function that takes in that data structure and returns a data source and publish your code to npm.

@ffxsam
ffxsam commented Jan 27, 2016

Hang on.. if I'm understanding the code, it seems like the section ids and row ids arguments for cloneWithRowsAndSections are optional. If you pass a data blob, structured a bit similarly to the above, it'll handle all that for you. I'm testing now.

@ffxsam
ffxsam commented Jan 27, 2016

I tried following the format specified here:

https://github.com/facebook/react-native/blob/0e8b207cc34f230eb2cced3981734b522b601817/Libraries/CustomComponents/ListView/ListViewDataSource.js#L100-L110

And just passed a data blob into cloneWithRowsAndSection (no section IDs or row IDs), and all formats failed. Something's not right. In fact, this should work:

{ sectionID_1: [ <rowData1>, <rowData2>, ... ], ... }

And so I tried doing the following:

  dataBlob = {
    'Fruits': [{name: 'apple'}, {name: 'orange'}],
    'Veggies': [{name: 'broccoli'}]
  };

  this.setState({
    dataSource: this.state.dataSource.cloneWithRowsAndSections(
      dataBlob
      //sectionIds,
      //rowIds
    ),
    loading: false
  });

And I get literally thousands of these errors about sticky header out of range.

screenshot_1_27_16__2_31_am

@ffxsam
ffxsam commented Feb 19, 2016

Thanks for that. Still though, it doesn't function as it's supposed to. The source code comments say you can just pass a certain structure in, and that fails. I'll attempt to do a PR once I have some free time.

@mowi22
mowi22 commented Jun 15, 2016

Any update on this? Im having the same problem. I've tried so many ways and I cant get around thousands of sticky warnings.

@sscaff1
Contributor
sscaff1 commented Jun 15, 2016

I'm having the same issues too.

@benadida

fwiw, I've had success using a blob with sectionId and rowId keys, so a map of maps, not a map of arrays. For example:

{
  "s1": {
      "row1": {...},
      "row2": {...},
  },
  "s2": {
      "row3": {...},
      "row4": {...}
  }
}
@lacker
Contributor
lacker commented Feb 7, 2017

I think Ben's workaround here looks pretty good. We want to improve the ListView in general since it's one of the most feedbacked-about components, see a few more details in the roadmap at https://github.com/facebook/react-native/wiki/Roadmap . I am going to close this issue but I think if someone was interested in sending a PR to improve the documentation that would be great.

@lacker lacker closed this Feb 7, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment