Respond to native: selectable partition list view gives error

Question

I am working on a native code project. I use a single plugin on github- selectablesectionlistview to access the selection list view.

I am using the sample code provided in the documentation -

var SelectableSectionsListView = require('react-native-selectablesectionlistview'); // inside your render function <SelectableSectionsListView data={yourData} cell={YourCellComponent} cellHeight={100} sectionHeaderHeight={22.5} /> 

and it does not work. I get errors in javascript inside the render function.

Error - SelectableSectionsListView is undefined. THIS IS SOLVED NOW.

The new error is data is undefined .

I am using the code above. any help. you are welcome.

Answer 1

The code that you show, I feel, is just the library code. I ran into the same problem. and I got it working after sending json data to the library call.

 class MyComponent extends Component { constructor(props, context) { super(props, context); this.state = { data: { A: ['some','entries','are here'], B: ['some','entries','are here'], C: ['some','entries','are here'], D: ['some','entries','are here'], E: ['some','entries','are here'], F: ['some','entries','are here'], G: ['some','entries','are here'], H: ['some','entries','are here'], I: ['some','entries','are here'], J: ['some','entries','are here'], K: ['some','entries','are here'], L: ['some','entries','are here'], M: ['some','entries','are here'], N: ['some','entries','are here'], O: ['some','entries','are here'], P: ['some','entries','are here'], Q: ['some','entries','are here'], R: ['some','entries','are here'], S: ['some','entries','are here'], T: ['some','entries','are here'], U: ['some','entries','are here'], V: ['some','entries','are here'], X: ['some','entries','are here'], Y: ['some','entries','are here'], Z: ['some','entries','are here'], } }; } 

Use this in your code and pass the data as a props to the library. He will work.

Answer 2

I have been doing this problem for a long time, I can say. Here is my git repo where I have an example.

There are many things to consider after you do npm install <library>

This is what index.js code looks like -

 'use strict'; var React = require('react-native'); var {Component, PropTypes, View, Text, TouchableHighlight,AppRegistry} = React; var AlphabetListView = require('react-native-alphabetlistview'); class SectionHeader extends Component { render() { // inline styles used for brevity, use a stylesheet when possible var textStyle = { textAlign:'center', color:'#fff', fontWeight:'700', fontSize:16 }; var viewStyle = { backgroundColor: '#ccc' }; return ( <View style={viewStyle}> <Text style={textStyle}>{this.props.title}</Text> </View> ); } } class SectionItem extends Component { render() { return ( <Text style={{color:'#f00'}}>{this.props.title}</Text> ); } } class Cell extends Component { render() { return ( <View style={{height:30}}> <Text>{this.props.item}</Text> </View> ); } } class reactnativeAlphabeticalListView extends Component { constructor(props, context) { super(props, context); this.state = { data: { A: ['asome','aentries','are here'], B: ['bbsome','bebntries','bare here'], C: ['csome','centries','care here'], D: ['dsome','dentries','dare here'], E: ['esome','eentries','eare here'], F: ['fsome','fentries','are here'], G: ['gsome','gentries','gare here'], H: ['hsome','hentries','hare here'], I: ['isome','ientries','iare here'], J: ['jsome','jentries','jare here'], K: ['ksome','kentries','kare here'], L: ['lsome','lentries','lare here'], M: ['msome','mentries','mare here'], N: ['nsome','nentries','nare here'], O: ['osome','oentries','oare here'], P: ['psome','pentries','pare here'], Q: ['qsome','qentries','qare here'], R: ['rsome','rentries','rare here'], S: ['some','sentries','sare here'], T: ['tsome','tentries','tare here'], U: ['usome','uentries','uare here'], V: ['vsome','ventries','vare here'], W: ['wsome','wentries','ware here'], X: ['xsome','xentries','xare here'], Y: ['ysome','yentries','yare here'], Z: ['zsome','zentries','zare here'], } }; } render() { return ( <AlphabetListView data={this.state.data} cell={Cell} cellHeight={30} sectionListItem={SectionItem} sectionHeader={SectionHeader} sectionHeaderHeight={22.5} /> ); } } AppRegistry.registerComponent('reactnativeAlphabeticalListView', () => reactnativeAlphabeticalListView); 

Hope this helps :) Happy coding!