react-native-awesome-list

React Native animated list with groups and subgroups

Installation

1. npm install react-native-awesome-list --save or yarn add react-native-awesome-list
2. 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

Enjoy

Questions or suggestions?

Feel free to open an issue