React-native-track-player: react-naative-slider's sliding is not working with progress component?

[harish-everest]

Configuration

React Native Environment Info:
    System:
      OS: macOS 10.14.4
      CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
      Memory: 2.74 GB / 16.00 GB
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 10.15.1 - /usr/local/bin/node
      Yarn: 1.15.2 - /usr/local/bin/yarn
      npm: 6.7.0 - /usr/local/bin/npm
    SDKs:
      iOS SDK:
        Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2
      Android SDK:
        API Levels: 23, 27, 28
        Build Tools: 26.0.2, 27.0.3, 28.0.3
        System Images: android-28 | Google Play Intel x86 Atom
    IDEs:
      Android Studio: 3.3 AI-182.5107.16.33.5264788
      Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.8.3 => 16.8.3 
      react-native: 0.59.2 => 0.59.5 
    npmGlobalPackages:
      react-native-cli: 2.0.1

"react-native-track-player": "^1.1.4",

Issue

Im trying to implement the seekbar to our music player app. And I'm using Slider(react-native-slider) component in ProgressComponent. The slider is not responding to the events. But if I place that slider in another component it's working fine. I'm thinking there is something wrong in this component. Please correct me if I'm wrong. If there is any example which gives the flexibility of seeking I'm open to use that.

EDIT: Removing the flex for main view container solved the issue. I'm wondering why flex causing this issue

Code

import React, { Component } from 'react';
import TrackPlayer from 'react-native-track-player';
import { Text, View, StyleSheet } from 'react-native';
import Slider from 'react-native-slider';
export default class TrackSlider extends TrackPlayer.ProgressComponent {
  state = {
    duration: 0,
    position: 0,
    isSeeking: false,
    seek: 0
  };
  shouldComponentUpdate(nextProps, nextState) {
    const {
      duration: prevDuration,
      position: prevPosition,
      bufferedPosition: prevBufferedPosition
    } = this.state;
    const {
      duration: nextDuration,
      position: nextPosition,
      bufferedPosition: nextBufferedPosition
    } = nextState;
    if (
      prevDuration !== nextDuration ||
      prevPosition !== nextPosition ||
      prevBufferedPosition !== nextBufferedPosition
    ) {
      return true;
    }
    return false;
  }
  formatTime = timeInSec => {
    let mins = parseInt(timeInSec / 60);
    let secs = parseInt(Math.round((timeInSec % 60) * 100) / 100);
    if (mins < 10) {
      mins = '0' + mins;
    }
    if (secs < 10) {
      secs = '0' + secs;
    }
    return mins + ':' + secs;
  };

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.timeContainer}>
          <Text style={styles.position}>{this.formatTime(this.state.position)}</Text>
          <Text style={styles.duration}>{this.formatTime(this.state.duration)}</Text>
        </View>
        <Slider
          style={styles.slider}
          value={this.state.isSeeking ? this.seek : this.state.position}
          thumbTintColor='white'
          minimumValue={0}
          thumbStyle={{ width: 10, height: 10 }}
          animationType='timing'
          maximumValue={this.state.duration}
          minimumTrackTintColor={'white'}
          maximumTrackTintColor={'#70778c'}
          onValueChange={val => {
            TrackPlayer.pause();
            this.setState({ isSeeking: true, seek: val });
          }}
          onSlidingComplete={val => {
            console.log(val);
            this.props.moveTo(val);
            this.setState({ value: val });
          }}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#171F33',
    justifyContent: 'center',
    color: 'white'
  },
  position: {
    color: 'white',
    textAlign: 'left'
  },
  duration: {
    color: 'white',
    textAlign: 'right'
  },
  timeContainer: {
    alignItems: 'center',
    color: 'white',
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    padding: 5
  },
  slider: {
    marginLeft: 30,
    marginRight: 30
  }
});

[harish-everest]

Removing the flex for main view container solved the issue. I'm wondering why flex causing this issue

[Fariha-Khalid]

hi harish-everest .... your progress component is just amazing and working good ..after a long search of progress bars i have found something useful... and i am trying to implement it now but it says moveTo is undefined i am trying to implement that but still getting some errors can you please share the complete code of your progress bar

[Fariha-Khalid]

along with moveTo function

[kenkotch]

@harish-everest using your code, I made a functional version that works nicely.
Thanks for sharing your work.

import React, {useState} from 'react';
import Slider from '@react-native-community/slider';
import TrackPlayer from 'react-native-track-player';
import {useTrackPlayerProgress} from 'react-native-track-player/lib/hooks';

const ProgressBar = () => {
  const [isSeeking, setIsSeeking] = useState(false);
  const [seek, setSeek] = useState(0);

  const progress = useTrackPlayerProgress();
  const {duration, position} = progress;

  return (
    <Slider
      style={{width: '80%', height: 40, justifyContent: 'center'}}
      minimumValue={0}
      maximumValue={duration}
      minimumTrackTintColor="#FFFFFF"
      maximumTrackTintColor="#000000"
      value={isSeeking ? seek : position}
      onValueChange={(value) => {
        TrackPlayer.pause();
        setIsSeeking(true);
        setSeek(value);
      }}
      onSlidingComplete={(value) => {
        TrackPlayer.seekTo(value);
        TrackPlayer.play();
      }}
    />
  );
};

export default ProgressBar;

[ajoykarmakar]

@harish-everest using your code, I made a functional version that works nicely.
Thanks for sharing your work.

import React, {useState} from 'react';
import Slider from '@react-native-community/slider';
import TrackPlayer from 'react-native-track-player';
import {useTrackPlayerProgress} from 'react-native-track-player/lib/hooks';

const ProgressBar = () => {
  const [isSeeking, setIsSeeking] = useState(false);
  const [seek, setSeek] = useState(0);

  const progress = useTrackPlayerProgress();
  const {duration, position} = progress;

  return (
    <Slider
      style={{width: '80%', height: 40, justifyContent: 'center'}}
      minimumValue={0}
      maximumValue={duration}
      minimumTrackTintColor="#FFFFFF"
      maximumTrackTintColor="#000000"
      value={isSeeking ? seek : position}
      onValueChange={(value) => {
        TrackPlayer.pause();
        setIsSeeking(true);
        setSeek(value);
      }}
      onSlidingComplete={(value) => {
        TrackPlayer.seekTo(value);
        TrackPlayer.play();
      }}
    />
  );
};

export default ProgressBar;

Thank you +1