React-native-awesome-list NPM

react-native-awesome-list

React Native animated list with groups and subgroups

npm.io npm.io

Installation

npm install react-native-awesome-list --save or yarn add react-native-awesome-list
react-native link react-native-awesome-list

Usage

import AwesomeList from 'react-native-awesome-list'
...
render() {
    let data = [
      {
        id: Math.random(),
        type: 'group',
        items: [{
          id: Math.random(),
          type: 'subgroup',
          items: [{id: Math.random()}, {id: Math.random()}]
        }, {
          id: Math.random(),
          type: 'subgroup',
          items: [{id: Math.random()}, {id: Math.random()}]
        }]
      },
      {
        id: Math.random(),
        type: 'group',
        items: [{id: Math.random()}, {id: Math.random()}]
      },
      {
        id: Math.random(),
      },
    ]
    return (
      <AwesomeList
        data={data}
        renderItem={this.renderItem}
        renderGroup={this.renderGroup}
        renderSubGroup={this.renderSubGroup}
        renderAnimatingHeader={()=> this.renderAnimatingHeader('HEADER')}
        renderAnimatingFooter={()=> this.renderAnimatingHeader('FOOTER')}
      />
    );
  }

  renderAnimatingHeader(title){
    return (
      <View style={{flex: 1, backgroundColor: 'yellow', justifyContent: 'center', alignItems: 'center'}}>
        <Text>{title}</Text>
      </View>
    );
  }

  renderItem(row){
    return (
      <View style={{backgroundColor: 'red', height: 50, marginVertical: 1}}/>
    );
  }

  renderGroup(){
    return (
      <View style={{backgroundColor: 'blue', height: 50, marginVertical: 1}}/>
    );
  }
  
  renderSubGroup(){
    return (
      <View style={{backgroundColor: 'green', height: 50, marginVertical: 1}}/>
    );
  }
...

Props

Prop	Default	Type	Description
data	undefined	`array`	data for list
contentContainerStyle	undefined	`style`	root scrollview style
any FlatList props	undefined	`props`	you can provide FlatList props like ItemSeparatorComponent etc.
childListProps	undefined	`props`	you can provide child list props
renderItem	undefined	`func`	render function for list item rendering
renderGroup	undefined	`func`	render function for list group rendering
renderSubGroup	undefined	`func`	render function for list subgroup rendering
toggleGroup	func	`func`	return index of clicked group and is group expanded bool
toggleSubGroup	func	`func`	return id of clicked subgroup and is subgroup expanded bool
headerHeight	100	`number`	header height
footerHeight	100	`number`	footer height
renderAnimatingHeader	undefined	`func`	render function for list animated header rendering
renderAnimatingFooter	undefined	`func`	render function for list animated footer rendering
disableScaleAnimation	false	`bool`	disabling scale animation while scroll
disableOpacityAnimation	false	`bool`	disabling opacity animation while scroll