Segmented Buttons need an option to select active and inactive background/text+icon colors

[Isopodus]

Is your feature request related to a problem? Please describe.
In our app we need to set the text and background to be inverse colors, but because of lack of active/inactive text color it is impossible to achieve.
In our case the active button background and text color are the same theme color (onSurface), this results in the text being unreadable:

Describe the solution you'd like
After searching through the library source I came up with a small patch which adds a third text color state being checked color. I've set it to onSecondaryContainer. Below is the patch file content I used with patch-package, it basically sets the icon color to be the text color and adds another if block to apply the checked color (it should really be the else if of disabled block, but you've got the idea):

diff --git a/node_modules/react-native-paper/src/components/SegmentedButtons/SegmentedButtonItem.tsx b/node_modules/react-native-paper/src/components/SegmentedButtons/SegmentedButtonItem.tsx
index 027fdf5..0ad5f81 100644
--- a/node_modules/react-native-paper/src/components/SegmentedButtons/SegmentedButtonItem.tsx
+++ b/node_modules/react-native-paper/src/components/SegmentedButtons/SegmentedButtonItem.tsx
@@ -176,7 +176,7 @@ const SegmentedButtonItem = ({
               testID={`${testID}-check-icon`}
               style={[iconStyle, { transform: [{ scale: checkScale }] }]}
             >
-              <Icon source={'check'} size={iconSize} />
+              <Icon source={'check'} size={iconSize} color={labelTextStyle.color?.toString()}/>
             </Animated.View>
           ) : null}
           {showIcon ? (
diff --git a/node_modules/react-native-paper/src/components/SegmentedButtons/utils.ts b/node_modules/react-native-paper/src/components/SegmentedButtons/utils.ts
index 701fb90..bf1ce4b 100644
--- a/node_modules/react-native-paper/src/components/SegmentedButtons/utils.ts
+++ b/node_modules/react-native-paper/src/components/SegmentedButtons/utils.ts
@@ -124,11 +124,15 @@ const getSegmentedButtonBorderWidth = ({
 const getSegmentedButtonTextColor = ({
   theme,
   disabled,
-}: Omit<BaseProps, 'checked'>) => {
+  checked,
+}: BaseProps) => {
   if (theme.isV3) {
     if (disabled) {
       return theme.colors.onSurfaceDisabled;
     }
+    if (checked) {
+      return theme.colors.onSecondaryContainer;
+    }
     return theme.colors.onSurface;
   } else {
     if (disabled) {
@@ -152,7 +156,7 @@ export const getSegmentedButtonColors = ({
     disabled,
     checked,
   });
-  const textColor = getSegmentedButtonTextColor({ theme, disabled });
+  const textColor = getSegmentedButtonTextColor({ theme, disabled, checked });
   const borderWidth = getSegmentedButtonBorderWidth({ theme });
 
   return { backgroundColor, borderColor, textColor, borderWidth };

So after applying the contrast text color and setting the same color for the icon we get the desired result:

Difficulties
Despite the fact that this solution works perfectly in development mode - after building a release version of the app the button colors return to the same "black on black" problem:

I thought this might be due to the theme.isV3 being false in release version for some reason, but it seems it is not the case.
Any help with investigating the release variant problem is greatly appreciated! Thanks.

Additional context

"react": "18.1.0",
"react-native": "0.70.1",
"react-native-paper": "^5.0.1",
"react-native-safe-area-context": "^4.4.1",
"react-native-vector-icons": "^9.2.0",

[Alenity]

I also wish for this feature to be added

[Isopodus]

Hi @gedu, thank you for you work on this feature, I'm glad this is now close to be done.
I'd like to test it myself before the actual release happening, but i ran into a problem with react-native-package-bob.

I've added your fork with commit hash (or branch name) to the package.json instead of the package version, but when running yarn install I encounter the Node version mismatch:

error [email protected]: The engine "node" is incompatible with this module. Expected version ">= 16.0.0". Got "14.21.2"
error Found incompatible module.

I'm using Node Version Manager and tried different versions from 14 to 18, but still got the error. Node 14.21.2 is not installed anywhere on my system, so I believe this is something to do with the library build configs?

[Isopodus]

Accidentally closed

[AshwinTayson]

@lukewalczak
Can we add textStyle settings for the button? I want to change font settings like family or weight and its not possible currently