react native progress bar slider

1import React, { Component } from 'react';
2
3import { defaultString } from '../String/defaultStringValue';
4import {
5  View,
6  Text,
7  StyleSheet,
8  Image,
9  Slider,
10  TouchableOpacity,
11} from 'react-native';
12
13function pad(n, width, z = 0) {
14  n = n + '';
15  return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
16}
17
18const minutesAndSeconds = (position) => ([
19  pad(Math.floor(position / 60), 2),
20  pad(position % 60, 2),
21]);
22
23const SeekBar = ({
24  trackLength,
25  currentPosition,
26  onSeek,
27  onSlidingStart,
28}) => {
29  const elapsed = minutesAndSeconds(currentPosition);
30  const remaining = minutesAndSeconds(trackLength - currentPosition);
31  return (
32    <View style={styles.container}>
33      <View style={{ flexDirection: 'row' }}>
34        <Text style={[styles.text, { color: defaultString.darkColor }]}>
35          {elapsed[0] + ":" + elapsed[1]}
36        </Text>
37        <View style={{ flex: 1 }} />
38        <Text style={[styles.text, { width: 40, color: defaultString.darkColor }]}>
39          {trackLength > 1 && "-" + remaining[0] + ":" + remaining[1]}
40        </Text>
41      </View>
42      <Slider
43        maximumValue={Math.max(trackLength, 1, currentPosition + 1)}
44        onSlidingStart={onSlidingStart}
45        onSlidingComplete={onSeek}
46        value={currentPosition}
47        minimumTrackTintColor={defaultString.darkColor}
48        maximumTrackTintColor={defaultString.lightGrayColor}
49        thumbStyle={styles.thumb}
50        trackStyle={styles.track}
51      />
52    </View>
53  );
54};
55
56export default SeekBar;
57
58const styles = StyleSheet.create({
59  slider: {
60    marginTop: -12,
61  },
62  container: {
63    paddingLeft: 16,
64    paddingRight: 16,
65    paddingTop: 16,
66  },
67  track: {
68    height: 2,
69    borderRadius: 1,
70  },
71  thumb: {
72    width: 10,
73    height: 10,
74    borderRadius: 5,
75    backgroundColor: defaultString.darkColor,
76  },
77  text: {
78    color: 'rgba(255, 255, 255, 0.72)',
79    fontSize: 12,
80    textAlign: 'center',
81  }
82});
83
84