Needs audio progress bar like soundcloud react-native - reactjs

Question

I needs progress bar like soundcloud (Pointer fixed in center) Like This
I tried with React Native Slider but unable fixed in center
function TrackProgres() {
const bufferedPosition = 0
const duration = 600
return (
<ScrollView horizontal={true}>
<ImageBackground source={require('../../../../assets/images/sound.png')} style={{width:550, height: 40,zIndex:-1,left: 50,marginRight: -50 }} imageStyle={{resizeMode: 'repeat'}}>
<Slider
style={{width: 550}}
value={bufferedPosition}
maximumValue={duration}
minimumTrackTintColor="#292b2c"
maximumTrackTintColor="#292b2c"
thumbStyle={styles.thumb}
trackStyle={styles.track}
onValueChange={(value) => seekTo(value)}
/>
</ImageBackground>
</ScrollView>
)

Answer 1

What you're looking for isn't a slider - it's just a conditional rendering on a background position. Think of it like this:
const { width } = Dimensions.get('window');
return (
<View
style={{
position: 'absolute',
height: 30,
width,
top: 0,
left: (width / 2) - (width * percentComplete),
backgroundColor: '#F00',
}}
>
<View
style={{
position: 'absolute',
backgroundColor: '#FFF',
top: 0,
left: (width / 2) - 1,
width: 2,
height: 30,
}}
/>
</View>
);
If you render these with percentComplete as a value between 0 and 1, the background View will be offset properly.
At 0% complete, the View will start at left: width / 2, or the center of the screen. As percentComplete increases, that offset will decrease, and go beyond the left edge of the screen after 50% complete. At 100%, the right edge of the background View will be at the midpoint of the screen.
The foreground View remains in the center.