Introducing Section list

[azeezat]

SectionList enables you to show a sectioned list in your UI.

Options array

      options={[
              {
                title: 'Main dishes',
                data: [
                  { label: 'Pizza', value: 'A' },
                  { label: 'Burger', value: 'B' },
                  { label: 'Risotto', value: 'C' },
                ],
              },
              {
                title: 'Sides',
                data: [
                  { label: 'Ice cream', value: 'D', disabled: true },
                  { label: 'Cheesecake', value: 'E' },
                ],
              },
              {
                title: 'Drinks',
                data: [
                  { label: 'Water', value: 'F' },
                  { label: 'Coke', value: 'G' },
                  { label: 'Juice', value: 'H' },
                ],
              },
            ]}

Example usage

 <DropdownSelect
            label="Menu"
            placeholder="Select multiple dishes..."
            options={[
              {
                title: 'Main dishes',
                data: [
                  { label: 'Pizza', value: 'A' },
                  { label: 'Burger', value: 'B' },
                  { label: 'Risotto', value: 'C' },
                ],
              },
              {
                title: 'Sides',
                data: [
                  { label: 'Ice cream', value: 'D', disabled: true },
                  { label: 'Cheesecake', value: 'E' },
                ],
              },
              {
                title: 'Drinks',
                data: [
                  { label: 'Water', value: 'F' },
                  { label: 'Coke', value: 'G' },
                  { label: 'Juice', value: 'H' },
                ],
              },
            ]}
            selectedValue={menu}
            onValueChange={(itemValue: any) => setMenu(itemValue)}
            isMultiple
            isSearchable
            primaryColor={'#1c2d6b'}
            listComponentStyles={{
              sectionHeaderStyle: {
                paddingVertical: 6,
                paddingHorizontal: 12,
                backgroundColor: '#1c2d6b',
                color: 'white',
                borderRadius: 6,
                overflow: 'hidden',
              },
            }}
            multipleSelectedItemStyle={{
              borderRadius: 0,
              backgroundColor: 'hotpink',
              color: 'black',
            }}
          />