search

toystars / react-native-multiple-select

Simple multi-select component for react-native
MIT License
565 stars 313 forks source link

Flex on MultipleSelect parent view removed #36

Closed SushilShrestha closed 6 years ago

SushilShrestha commented 6 years ago

At present the Main View inside the lib is taking flex: 1 https://github.com/toystars/react-native-multiple-select/blob/010aaa609f49bdae8748b6beaf8ce95ea46c2a58/lib/react-native-multi-select.js#L396

Below is snapshot of present state of UI. preset status

I would like my component (yellow part) in above gif to be right below the selector. I think it is safe enough to remove the line to make it less greedy in terms of the height it occupies. Below is final result of this pull request. solution

The code I am using to test is as follow

 <View style={{flex: 1}}>
  <MultiSelect
    fixedHeight={false}
    hideTags
    items={this.items}
    uniqueKey="id"
    ref={(component) => { this.multiSelect = component }}
    onSelectedItemsChange={this.onSelectedItemsChange}
    selectedItems={selectedItems}
    selectText="Pick Items"
    searchInputPlaceholderText="Search Items..."
    altFontFamily="ProximaNova-Light"
    tagRemoveIconColor="#CCC"
    tagBorderColor="#CCC"
    tagTextColor="#CCC"
    selectedItemTextColor="#CCC"
    selectedItemIconColor="#CCC"
    itemTextColor="#000"
    searchInputStyle={{ color: '#CCC' }}
    submitButtonColor="#CCC"
    submitButtonText="Submit"
  />
  <View>
    {this.multiSelect && this.multiSelect.getSelectedItemsExt(selectedItems)}
  </View>

  <View style={{backgroundColor: 'gold'}}>
    <Text> Hello World</Text>
    <Text> Hello World</Text>
    <Text> Hello World</Text>
    <Text> Hello World</Text>
  </View>
</View>