toystars / react-native-multiple-select

Simple multi-select component for react-native
MIT License
566 stars 315 forks source link

Submit Button is not visible when fixedHeight is true. #34

Open SushilShrestha opened 7 years ago

SushilShrestha commented 7 years ago

Hi @toystars, Thanks for creating the library. I am trying to use the library on one of my React-native project and found that on multiselect mode (single=false) with fixedHeight enabled, the submit button is missing. Following is the code snippet I am using.

class MultiSelectExample extends Component {
  constructor() {
    super()

    this.state = {
      selectedItems: []
    };

    this.items = [{
      id: '92iijs7yta',
      name: 'Ondo',
    }, {
      id: 'a0s0a8ssbsd',
      name: 'Ogun',
    }, {
      id: '16hbajsabsd',
      name: 'Calabar',
    }, {
      id: 'nahs75a5sg',
      name: 'Lagos',
    }, {
      id: '667atsas',
      name: 'Maiduguri',
    }, {
      id: 'hsyasajs',
      name: 'Anambra',
    }, {
      id: 'djsjudksjd',
      name: 'Benue',
    }, {
      id: 'sdhyaysdj',
      name: 'Kaduna',
    }, {
      id: 'suudydjsjd',
      name: 'Abuja',
    }, {
      id: 'new1',
      name: 'newnew1'
    }, {
      id: 'new2',
      name: 'newnew2'
    }, {
      id: 'new3',
      name: 'newnew3'
    }, {
      id: 'new4',
      name: 'newnew4'
    }, {
      id: 'new5',
      name: 'newnew5'
    }, {
      id: 'new6',
      name: 'newnew6'
    }
    ];
  }

  onSelectedItemsChange = selectedItems => {
    this.setState({ selectedItems });
  };

  render() {
    const { selectedItems } = this.state;
    return (
      <View style={{ flex: 1 }}>
        <MultiSelect
          fixedHeight={true}
          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"
        />
        <Text> Hello World</Text>
      </View>
    );
  }
}

demo