Android: Tint color inconsistency

Environment

  React Native Environment Info:
    System:
      OS: macOS 10.14.5
      CPU: (8) x64 Intel(R) Core(TM) i7-4850HQ CPU @ 2.30GHz
      Memory: 1.16 GB / 16.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 11.14.0 - ~/.nvm/versions/node/v11.14.0/bin/node
      Yarn: 1.15.2 - ~/.yarn/bin/yarn
      npm: 6.9.0 - ~/.nvm/versions/node/v11.14.0/bin/npm
      Watchman: 3.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2
      Android SDK:
        API Levels: 23, 24, 25, 26, 27, 28
        Build Tools: 23.0.1, 23.0.2, 23.0.3, 24.0.0, 25.0.0, 25.0.1, 25.0.2, 25.0.3, 26.0.1, 26.0.2, 26.0.3, 27.0.1, 27.0.2, 27.0.3, 28.0.3
        System Images: android-19 | Google APIs Intel x86 Atom, android-23 | Google APIs Intel x86 Atom, android-24 | Google APIs Intel x86 Atom, android-25 | Google Play Intel x86 Atom, android-26 | Google APIs Intel x86 Atom, android-26 | Google Play Intel x86 Atom, android-27 | Google APIs Intel x86 Atom, android-27 | Google Play Intel x86 Atom, android-28 | Google Play Intel x86 Atom
    IDEs:
      Android Studio: 3.4 AI-183.6156.11.34.5522156
      Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.8.3 => 16.8.3
      react-native: 0.59.8 => 0.59.8
    npmGlobalPackages:
      react-native-cli: 2.0.1
      react-native-git-upgrade: 0.2.7

Description

When maximumTintColor matches minimumTintColor, Android overrides the colour setting and makes maximumTintColor lighter than minimumTintColor.

Also, something like below will be ignored as it appears that Android likes to paint a more visible shade on the minimum side.

{ minimumTrackTintColor: 'rgba(255,255,255,0.1)', maximumTrackTintColor: 'rgba(255,255,255,0.4)' }

[Iyoss]

I think the problem is that the “progress bar" background has a layer with translucence, so we are getting wrong colors. Therefore I suggest to rewrite the Slider progress bar.

• you need to change your ./android/app/src/main/res/values/styles.xml file:

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        . . .
        <item name="android:seekBarStyle">@style/SeekbarStyle</item>
    </style>

    <style name="SeekbarStyle" parent="Widget.AppCompat.SeekBar">
        <item name="android:progressDrawable">@drawable/seekbar_style</item>
    </style>
</resources>

• and to add a seekbar_style.xml file to ./android/app/src/main/res/drawable directory

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@android:id/background"
        android:gravity="center_vertical|fill_horizontal"
        >
        <shape android:shape="line">
            <stroke android:width="2dp" android:color="#ffffff"/>
            <corners android:radius="2dp"/>
        </shape>
    </item>
    <item
        android:id="@android:id/progress"
        android:gravity="center_vertical|fill_horizontal">
        <clip>
            <scale android:scaleWidth="100%">
                <selector>
                    <item android:state_enabled="false"
                        android:drawable="@android:color/transparent" />
                    <item>
                        <shape android:shape="line">
                            <stroke android:width="2dp" android:color="#2ea5de" />
                            <corners android:radius="2dp"/>
                        </shape>
                    </item>
                </selector>
            </scale>
        </clip>
    </item>
</layer-list>

[BartoszKlonowski]

Thank you for checking and letting me know, @ThomasStubbe! I will reopen this obviously 👍