List or Grid style item(s) picker for React Native

React Native Item Select

Sometimes selecting items from dropdowns or checkboxes just don't cut it. You may need a fancy grid item picker. May be this highly customizable List Grid item(s) picker for React Native is what you're looking for.

Installation

npm install --save react-native-item-select

Features :tada:

• List or Grid. If Grid, customizable no of items per row.
• Multiselect supported.
• Validation for minimum & maximum no of items to be selected.
• Fine-grained style control.
• Preselect items.
• Provision to implement search.

Demo

You can see the code for the GIF files given above at this repo.

Example

import React, {Component} from 'react';
import { Text, View } from 'react-native';
import ReactNativeItemSelect from 'react-native-item-select';

class LanguageSelectionScreen extends Component {
  render() {
    const textStyle = { textAlign: 'center', color: '#696969', fontWeight: 'bold' };
    const data = [
      { firstLetter: 'அ', displayName: 'தமிழ்', name: 'Tamil' },
      { firstLetter: 'A', displayName: 'English', name: 'English' },
      ...
    ];

    return (
      <ReactNativeItemSelect
        data={data}
        itemComponent={
          item => (
            <View>
                <Text style={{ ...textStyle, fontSize: 35 }}>{item.firstLetter}</Text>
                <Text style={textStyle}>{item.displayName}</Text>
            </View>
          )
        }
        onSubmit={item => navigate('Result')}
      />
    );
  }
}

Props

We can divide props into two types. One is mandatory other one is optional. Without optional props, this library will work properly with its default values. However, you've to pass all required props.

Required Props

Optional Props

Preselect Items

In some cases, you may want to preselect items when ReactNativeItemSelect renders. That can be achieved by setting selected property of the items in data array. In the following example, Apple & Orange are preselected.

Example

<ReactNativeItemSelect
    data={[
      { name: 'Apple', selected: true},
      { name: 'Banana' },
      { name: 'Orange', selected: true}
    ]}
    itemComponent={this.itemComponent}
    onSubmit={this.onSubmit}
/>

Styling

You can alter the styles of any component of this library by passing appropriate prop. For now you can use 11 keys in styles prop to customize the look. They are, btn, btnOpacity, btnTxt, disabledBtnOpacity, disabledBtn, disabledBtnTxt, itemBoxHighlight, activeItemBoxHighlight, tickTxt, itemComponentWrapper, rowWrapper

Example

In the following component, styles prop will change the color of submit button, tick background and selected items border color to material blue.

<ReactNativeItemSelect
    data={data}
    itemComponent={this.itemComponent}
    onSubmit={this.onSubmit}
    styles={
        {
            btn: { backgroundColor: '#2196F3' },
            disabledBtn: { backgroundColor: '#2196F3' },
            tickTxt: { backgroundColor: '#2196F3' },
            activeItemBoxHighlight: { borderColor: '#2196F3' },
        }
    }
/>

btn, disabledBtn

For the Button View. You can use any of the View style props. Use disabledBtn key to style the button when it is in disabled state and use btn for enabled button.

btnOpacity, disabledBtnOpacity

For the TouchableOpacity that encloses the button view. You can use any View style props.

btnTxt, disabledBtnTxt

Use this to style the text inside submit button. Refer Text style props.

itemBoxHighlight, activeItemBoxHighlight

You can use this to style the TouchableHighlight which wraps your item component. All border styling must go here. You can use any View style props here.

itemComponentWrapper

This is a View that wraps your item component. Wrapping order is like this TouchableHighlight > View > itemComponent. You can use this to get rid of the padding inside box. Refer View style props.

tickTxt

You can use this to alter the View the encloses your tick character. Tick color is changed here. Refer Text style props.

rowWrapper

Used to alter the style of the View that wraps the items in a row. Refer View style props.

Search Implementation

To make ReactNativeItemSelect more customizable, styling & implementation of text box for search has to be implemented by the user. You can easily implement search by making use of the state of the parent component. You need to pass searchKey prop to make search work. Just make sure the value of the searchKey is unique for all items. For your better understanding, search has already been implemented in the customized example of demo app - source code.

NOTE: Search implementation is not part of the GIF shown above. Search feature was added after the creation of demo GIF.

GitHub