How to style a Slider on Android with React Native

Question

I'd like to use a Slider on Android using React Native.

Custom tracking images and thumb are iOS only properties, so what are the available options on Android to style the track and the thumb?

More specifically I'm looking for a way to change the color of the thumb, the color of min/max track, and their thickness...

Answer 1

There is no direct solutions to this, You can do something like the one below

My CustomSlider.js

import React, { Component } from 'react';
import { 
    View, 
    TouchableWithoutFeedback, 
    TouchableOpacity,
    Dimensions,
    Text,
    Slider
} from 'react-native';
import { connect} from 'react-redux';
import rnfs from 'react-native-fs';


class CustomSlider extends Component {

    state={
        slideValue: 0,
    }


    render() {
        const width = Dimensions.get('window').width;
        const sliderStyle = {
            sliderDummy: {
                backgroundColor: '#d3d3d3',
                width: 300,
                height:30,
                borderRadius: 50,
                position: 'absolute',                
            },
            sliderReal: {
                backgroundColor: '#119EC2',
                width: (this.state.slideValue/50) * 300,
                height:30,
            }
        }
        return(
            <View style={{borderRadius: 50, overflow: 'hidden'}}>       
            <View style={{flexDirection: 'row', position: 'absolute'}}>
                <View style={sliderStyle.sliderDummy}></View>
                <View style={sliderStyle.sliderReal}></View>
            </View>
            <Slider 
                style={{width: 300, height: 30, borderRadius: 50}}
                minimumValue={0}
                maximumValue={50}
                value={this.state.slideValue}
                onValueChange={(value)=> this.setState({ slideValue: value}) }
                maximumTrackTintColor='transparent'  
                minimumTrackTintColor='transparent'
                />  

            </View>

        );
    }

};

const mapDispatchToProps = {

};

const mapStateToProps = (state) => {
    return{

    }
};


export default connect(mapStateToProps, mapDispatchToProps)(CustomSlider);

You will achieve the thickness and custom slider like the one below.

Answer 2

As of version 0.42.0, there is now some support for styling Android sliders with the RN Slider component.

See the pull request for more details, or see the docs for more information.

The props that should be usable for Android are:

• thumbTintColor
• minimumTrackTintColor
• maximumTrackTintColor

Answer 3

It's not a first for React Native to have a component customizable on only one platform. Until React Native will add support for styling the Slider component, I suggest implementing it as a Native UI Component on Android: https://facebook.github.io/react-native/docs/native-components-android.html

I know I don't have an easy fix, but since Android support for React Native was added a while after iOS, I think there might still be a while until it catches up.