react-native multi select change select text color

Question

I am new to react-native and i am trying to add multi selection component to my app my code is as follows:

   <SectionedMultiSelect
              items={this.state.days}
              uniqueKey="id"
              hideSearch={true}
              subKey="day"
              selectText="Select Days"
              selectToggle={{ color: '#f79334' }}
              showDropDowns={true}
              readOnlyHeadings={true}
              onSelectedItemsChange={this.onSelectedItemsChangeHomeRepair}
              selectedItems={this.state.selectedDaysHomeRepair}
              showChips={false}
              theme = {
                {
                  Colors:{ 
                    selectToggleTextColor:'#053075',
                    text:'#053075'
                   }
                }
              }
            />

does anyone know how to apply color to "Select Days" text. thanks

Giacomo Mineo · Accepted Answer · 2020-09-18 07:40:38Z

2

You could use the renderSelectText prop and pass your own text component with your custom styles.

<SectionedMultiSelect
  items={this.state.days}
  uniqueKey="id"
  hideSearch={true}
  subKey="day"
  renderSelectText={() => <Text style={{ color: 'red', fontSize: 24 }}>Select Days</Text>}
  selectToggle={{ color: '#f79334' }}
  showDropDowns={true}
  readOnlyHeadings={true}
  onSelectedItemsChange={this.onSelectedItemsChangeHomeRepair}
  selectedItems={this.state.selectedDaysHomeRepair}
  showChips={false}
  theme = {
    {
      Colors: { 
        selectToggleTextColor:'#053075',
        text:'#053075'
      }
    }
  }
/>

Have a look at how this can be used in the example here.

edited Sep 18, 2020 at 7:40

answered Aug 28, 2020 at 16:10

Giacomo Mineo

1398 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Chandler Bing Over a year ago

its working, I want to change toggle icon color also, is there any way to do this?, please help

Giacomo Mineo Over a year ago

Which toggle are you referring to? Could you please provide a full working example?

Chandler Bing Over a year ago

This.component has its built in toggle icon, Thank you by the way, i did it using colors object pass as props to the component as per their docuementation.

Collectives™ on Stack Overflow

react-native multi select change select text color

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related