react native : selectable section list view gives error

Question

I am working on a react native code project. i am using one plugin on github- selectablesectionlistview to get the selectable section list view working.

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 doesn't work. I am getting errors in javascript inside the render function.

Error is- SelectableSectionsListView is undefined. THIS IS RESOLVED NOW.

New error - data is undefined.

I am using the code above. any help. please.

Answer 1

The code that you are showing I feel is just a library code. I had encountered same problem. and I got it working after sending a data json 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 data as props to the library. It will work.

Answer 2

I have gone through this problem for a long time I can say. Here is my git repo where I have the example set up.

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

Here is how the code of index.js 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 it helps :) Happy coding!