react-native-collection v2.0.8

react-native-collection

One of the easiest way of creating list and collection or grid view for both android and iOS. It's even more easier to handle cell selection. This module is specifically created for making your life easier when you need an implementation of multi-select items from the list or collection.

This package handle following features

1. Can display custom view in grid view.
2. Callback handler for item selection in normal mode
3. Long tap to enter into multi-selection mode
4. Callback handler for cancel operation
5. Callback handler for multi-selection done operation
6. Slide down top bar for cancel and done operation.
7. Can pass custom icon for item selection.

#Support Platform Android and iOS

#Installation npm install --save react-native-collection

#Screenshot

#Snippet

<Collection component={Cell}
                dataSource={dataSource}
                selectionMode={true}
                selectIcon={require('./send.png')}
                tapHandler={this.tapHandler}
                cellSize={
                          {
                            height:100,
                            width:100
                          }
                         }
                actions={
                          {cancel:
                            {
                              type:'text',
                              title:'Dismiss',
                              handler:this.leftHandler,
                              //icon:require('/send.png')
                            },
                           done:
                              {
                                //type:'text',
                                //title:'Done',
                                handler:this.rightHandler,
                                icon:require('./send.png')
                              }
                          }
                        } />

and you can have your own component but in this case

export default class Cell extends Component {
  constructor(props){
    super(props);
  }
  render(){
    console.log('////////////Cell/////////////////'+ this.props.item);
    return(
      <View style={{height:100,width:100, margin:10, backgroundColor:'white'}}>
          <Text style={{flex:1}}> {this.props.item} </Text>
          <Image source={require('./akshay-kumar.jpg')} style={{height:100, width:100}}/>
      </View>
    );
  }
}

#Options Option | Description | Default Value | required --- | --- | --- | --- component | Component to render each cell item | Rectangle box of 100*100 | required dataSource | Data source for list | - | required selectionMode | Boolean props to decide whether to enable selection mode | true | optional selectIcon | icon to be display to show item selection | checkmark | optional cellSize | size of each cell item in collection view | {height:100, width:100} | optional tapHandler | callback handler in normal mode while tapping cell item | - | required actions | two action during selection mode (Cancel and Done ). Can decide between text mode or icon mode to represent cancel and done. Can pass callback handler for each action | - | required onEndReached | handler to notify ScrollView have reached to end of the view. | - | optional barBottomPosition | action bar bottom offset value | 0 | optional