React Native Multiple Select

React native ile bir den fazla öğe seçmek için , select box yada checkbox tarzı bir component kullanmak için MultiSelect componentini kullanabiliriz.

Bu işlem için birden fazla geliştiricinin geliştirmiş olduğu farklı multi select componentlerini araştırdım ama en kullanışlı olanı bu geldi bana ve sitemdede yer vermek istedim.

componenti kullanmadan önce projemize insatall edelim ,

sudo npm install react-native-multiple-select --save

install işleminden sonra sıra importta ;

 
import MultiSelect from 'react-native-multiple-select';

importtan sonra direk bir data oluşturarak bunu compennte tanımlayarak işlem yapabiliriz, bu componentin en beğendiğim diğer özelliği value – string ayrı tanımalamalar gerçekleştirilebiliyor olması ,

constructor(props){
    super(props)
    this.state={
        data:[
            {id:"1",name:"Kategori1"},
            {id:"2",name:"Kategori2"},
            {id:"3",name:"Kategori3"}
            ]
    }
}

dataların tanımlamasınıda yaptık sonraki işlem componentimizi render methodunda kullanmak .

         <MultiSelect
          items={items}
          uniqueKey="id"
          ref={(component) => { this.multiSelect = component }}
          onSelectedItemsChange={this.onSelectedItemsChange}
          selectedItems={selectedItems}
          selectText="Pick Items"
          searchInputPlaceholderText="Search Items..."
          onChangeInput={ (text)=> console.log(text)}
          altFontFamily="ProximaNova-Light"
          tagRemoveIconColor="#CCC"
          tagBorderColor="#CCC"
          tagTextColor="#CCC"
          selectedItemTextColor="#CCC"
          selectedItemIconColor="#CCC"
          itemTextColor="#000"
          displayKey="name"
          searchInputStyle={{ color: '#CCC' }}
          submitButtonColor="#CCC"
          submitButtonText="Submit"
        />

if burada hideTags eklersek altta bulunan tags ları kapatacaktır .

ilgili componentin github sayfası