Skip to content

enable changing active options label color #103

@vellvj

Description

@vellvj

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch react-native-multi-selectbox@1.5.0 for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-multi-selectbox/.DS_Store b/node_modules/react-native-multi-selectbox/.DS_Store
new file mode 100644
index 0000000..9a874b5
Binary files /dev/null and b/node_modules/react-native-multi-selectbox/.DS_Store differ
diff --git a/node_modules/react-native-multi-selectbox/index.js b/node_modules/react-native-multi-selectbox/index.js
index 665fba2..7d733c7 100644
--- a/node_modules/react-native-multi-selectbox/index.js
+++ b/node_modules/react-native-multi-selectbox/index.js
@@ -23,6 +23,7 @@ function SelectBox({
   optionsLabelStyle,
   optionContainerStyle,
   multiOptionContainerStyle,
+  activeOptionsLabelStyle,
   multiOptionsLabelStyle,
   multiListEmptyLabelStyle,
   listEmptyLabelStyle,
@@ -35,12 +36,19 @@ function SelectBox({
   const [showOptions, setShowOptions] = useState(false)
 
   function renderLabel(item) {
-    const kOptionsLabelStyle = {
+    let kOptionsLabelStyle = {
       fontSize: 17,
       color: 'rgba(60, 60, 67, 0.6)',
-      ...optionsLabelStyle,
+      ...optionsLabelStyle
     }
-    return <Text style={kOptionsLabelStyle}>{item}</Text>
+
+    if(activeOptionsLabelStyle && selectedValues.some(i => item.id === i.id)){
+      kOptionsLabelStyle = {
+        fontSize: 17,
+        ...activeOptionsLabelStyle
+      }
+    }
+    return <Text style={kOptionsLabelStyle}>{item.item}</Text>
   }
 
   function renderItem({ item }) {
@@ -62,7 +70,7 @@ function SelectBox({
         {isMulti ? (
           <>
             <TouchableOpacity hitSlop={hitSlop} style={renderItemStyle} onPress={onPressMultiItem()}>
-              {renderLabel(item.item)}
+              {renderLabel(item)}
             </TouchableOpacity>
             <Toggle
               iconColor={toggleIconColor}
@@ -73,7 +81,7 @@ function SelectBox({
         ) : (
           <>
             <TouchableOpacity hitSlop={hitSlop} style={renderItemStyle} onPress={onPressItem()}>
-              {renderLabel(item.item)}
+              {renderLabel(item)}
               <View />
             </TouchableOpacity>
           </>
diff --git a/node_modules/react-native-multi-selectbox/src/.DS_Store b/node_modules/react-native-multi-selectbox/src/.DS_Store
new file mode 100644
index 0000000..659d42c
Binary files /dev/null and b/node_modules/react-native-multi-selectbox/src/.DS_Store differ

This issue body was partially generated by patch-package.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions