CODEWITHSUNDEEP
react-native
Chandler Bing
Chandler Bing

Reputation: 343

react-native multi select change select text color

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

Upvotes: 0

Views: 1677

Answers (1)

Giacomo Mineo
Giacomo Mineo

Reputation: 140

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.

Upvotes: 2

Related Questions