Android: Tint color inconsistency about react-native-slider HOT 11 OPEN

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>

from react-native-slider.

@artsnr1 Yes, thanks for confirmation!
The issue is due to how Android renders the seekbar by default on the native side, difficult to change that behavior, but I'm working on it.
Thanks for the patience!

from react-native-slider.

This is still the case in version 4.1.12
To get the colors equal you need to set minimum to "#BBBBBB" and maximum to "#000000" and then you get "#BBBBBB" for both:

              <Slider minimumValue={0}
                           maximumValue={10}
                           step={1}
                           minimumTrackTintColor="#BBBBBB"
                           maximumTrackTintColor="#000000" />

from react-native-slider.

(ANDROID) Same problem happens not only "when maximumTintColor matches minimumTintColor". Seems the maximumTintColor is always lighter than the original color. e.g. If you use "#000000", it's obvious that the default grey color is not overridden at all.

from react-native-slider.

@a-koka This issue is reported on the outdated version of package.
Can you please check if the same issue occurs on the latest release v4.1.1?

from react-native-slider.

Closing due to lack of author's feedback.
Feel free to reopen if this issue still occurs.

from react-native-slider.

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

from react-native-slider.

The issue is still there

from react-native-slider.

is this issue not resolved yet?

from react-native-slider.

@artsnr1 Yes, thanks for confirmation! The issue is due to how Android renders the seekbar by default on the native side, difficult to change that behavior, but I'm working on it. Thanks for the patience!

not resolved yet ?

from react-native-slider.

Hello @kumailrazapeekaboo! Yes, as you can see this issue is still in the Backlog.
I will move it to In Progress as soon as I'll start to work on this, or when community folks open a PR, which would be very welcomed!

from react-native-slider.