Comments (5)
Hi @AbdullahAlrayes , the SectionedMultiSelect has a styles attribute, you can change the button color like this...
styles={{ button:{backgroundColor:'rgba(8, 119, 190, 1)'}, cancelButton:{backgroundColor:'#06AF8F'}, }}
PS.: it works for me.
<SectionedMultiSelect hideSearch={true} items={this.state.favoriteLists} ref={SectionedMultiSelect => this.SectionedMultiSelect = SectionedMultiSelect} uniqueKey='id' subKey='children' displayKey="name" selectText='please select a list...' noResultsComponent={this.noResults} loadingComponent={this.noResults} readOnlyHeadings={true} onSelectedItemsChange={(selectedItems) => {this.setState({Occurrences : selectedItems}); console.log('onSelectedItemsChange => '+JSON.stringify(this.state.Occurrences));} } selectedItems={this.state.Occurrences} showDropDowns={true} expandDropDowns={true} animateDropDowns={true} modalAnimationType='fade' showChips={true} showCancelButton={true} onCancel={() => this.setState({visibleModal: null})} onConfirm={() => this.setState({visibleModal: 1})} styles={{ button:{backgroundColor:'rgba(8, 119, 190, 1)'}, cancelButton:{backgroundColor:'#06AF8F'}, }} selectedIconComponent={<Icon size={30} name="ios-checkmark-circle-outline" style={{ color: 'green', left:-20 }}/>} />
from react-native-sectioned-multi-select.
Looks like it's styles.button
for the view and styles.confirmText
for the text.
By default the background colour is colors.primary
from react-native-sectioned-multi-select.
Hello @renrizzolo , I am trying to change the button color using the following code. But it is not working
Styling as following:
const styles = StyleSheet.create({ button: { backgroundColor: "#1E6738" }, confirmText: { backgroundColor: "#1E6738" } });
Component as following
<SectionedMultiSelect style={styles} items={items} uniqueKey="id" subKey="children" selectText="Add Tags ..." showDropDowns={false} readOnlyHeadings={true} onSelectedItemsChange={this.onSelectedItemsChange} selectedItems={this.state.selectedItems} alwaysShowSelectText={true} />
from react-native-sectioned-multi-select.
@jrartiga ... Thank you for your feedback, your solution worked.
It seems the problem with word 'style'. I should add 's' at the end to be 'styles'. Following is my correct code
<SectionedMultiSelect items={this.props.tags} uniqueKey="id" subKey="children" selectText="Add Tags ..." showDropDowns={false} readOnlyHeadings={true} onSelectedItemsChange={this.onSelectedItemsChange} selectedItems={this.state.selectedItems} alwaysShowSelectText={true} styles={{ button: { backgroundColor: "rgba(8, 119, 190, 1)" } }} />
from react-native-sectioned-multi-select.
Do you guys know how to change the colour of the dropdown toggle icon?
from react-native-sectioned-multi-select.
Related Issues (20)
- can i use this with expo? HOT 3
- Disable the entire control? HOT 2
- Separate parentSelectedItems and subSelectedItems HOT 4
- Styling the Overall Modal?
- onSelectedItemsChange the Model is getting closed HOT 2
- display more level subItem HOT 2
- Disable backdrop HOT 1
- Disabled items getting removed HOT 2
- Expand dropdown function? HOT 4
- How to hide keyboard during search? HOT 3
- Hide the list of options until user enters a search item HOT 2
- How can you limit items selected while still allowing items to be deselected after the maxItems has been reached? HOT 2
- Checkmark is not visible when an item is selected HOT 8
- How is selectedItems supposed to work? HOT 3
- README.md IconRenderer Typo HOT 4
- Request: Styles Image Labeling ? HOT 3
- Add multiple display keys HOT 5
- Cancel Button does NOT Apprear Correctly on iOS HOT 4
- Adding Accessibility Labels HOT 5
- Display the component in a row along with other components HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-sectioned-multi-select.