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
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)' }
(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.
I think the problem is that the 鈥減rogress bar" background has a layer with translucence, so we are getting wrong colors.
Therefore I suggest to rewrite the Slider progress bar.
./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>
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>
@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?
Most helpful comment
I think the problem is that the 鈥減rogress bar" background has a layer with translucence, so we are getting wrong colors.
Therefore I suggest to rewrite the Slider progress bar.
./android/app/src/main/res/values/styles.xmlfile:seekbar_style.xmlfile to./android/app/src/main/res/drawabledirectory