How to convert kilometers value into miles using slider in react-native? - react-native

Question

How to convert kilometers value into miles using slider in react-native?
I am using this one dependency for import slider.
import Slider from "react-native-slider";
I want something like this output.
When i click on km then it give me output as in kilometers and when i clicked on ml then it give me output as in miles.
export default class AdvanceFilter extends Component {
render(){
constructor(props) {
super(props);
this.state={
distance: 100,
minDistance: 0,
maxDistance: 300,
};}
return(
<View style={styles.sliderdistance1}>
<Text style={styles.texthead}>Distance</Text>
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
<Text style={styles.txtslider}>0 -</Text>
<Text style={styles.txtslider}>{this.state.distance}</Text>
<TouchableOpacity style={styles.txtsliderkm}><Text style={{ color: 'white', }}>Km</Text></TouchableOpacity>
<TouchableOpacity style={styles.txtsliderml}><Text style={{ color: 'black', }}>ml</Text></TouchableOpacity>
</View>
</View>
<View style={styles.sliderdistance2}>
<Slider
style={{ width: 370, marginLeft: 10, padding: 3, marginRight: 10 }}
step={1}
minimumValue={this.state.minDistance}
maximumValue={this.state.maxDistance}
value={this.state.distance}
onValueChange={val => this.setState({ distance: val })}
thumbTintColor='#FE5F63'
maximumTrackTintColor='gray'
minimumTrackTintColor='#FE5F63'
/>
</View>
);
}
}
}

Answer 1

If I understood correctly, you're talking about two different things.
If you want to convert from kilometers to miles, you need to apply a mathematic formula to this: KM_TO_M = KM * 0.621371 and M_TO_KM = M * 1.609344.
To change the slider you need to change the values in your state, probably. So you need to set the action of the TouchableOpacity (or any button) that changes from KM to M something like:
if (<going to miles mode>) {
this.setState({
distance = this.state.distance * 0.621371,
minDistance: 0,
maxDistance: 186, //aprox result of 300 * 0.621371
});
} else if (<going to kilometers mode>) {
this.setState({
distance = this.state.distance * 1.609344,
minDistance: 0,
maxDistance: 300,
})
}
Remeber to apply rounding as needed

Answer 2

You can create one function which convert km to mile and return mile
const convertKmToM = (values) => {
// you can make change as per requirement
var realMiles = ( values * 0.621371 );
var Miles = Math.floor(realMiles);
return Miles;
}
Use this function like
<Text>({convertKmToM(YOUR_VALUE_IN_KM)}))</Text>