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 st

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(
                   
            
                
                
            
             this.setState({ slideValue: value}) }
                maximumTrackTintColor='transparent'  
                minimumTrackTintColor='transparent'
                />  

            

        );
    }

};

const mapDispatchToProps = {

};

const mapStateToProps = (state) => {
    return{

    }
};


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

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