How to show media controls in lockscreen/background state in react-native

Question

I am doing react-native project. And I am playing some network url's which are getting from server. It is single player.

So, To play audio, I am using following library.

https://www.npmjs.com/package/react-native-sound-player

And I have customised the player controls according to my UI. Audio playing well and also I have enabled playing audio in background mode in settings.

But, If I go to foreground/lockscreen state, Audio playing but, Media controls are not showing.

I am new to react-native, Do I need to customise media controls for background/lockscreen state too? Or anything do I need to do to achieve this?

  componentDidMount() {
  const { audioURL } = this.state;
  SoundPlayer.playUrl(audioURL);
  }

    playPauseHandler = () => {
    const {
      paused, currentDuration, currentTime, audioSelectedIndex,
    } = this.state;
    console.log('currentDuration', currentDuration);
    console.log('currentTime', currentTime);
    this.getInfo();

    if (paused === true) {
      SoundPlayer.play();
      this.setState({ paused: !paused });
    } else {
      SoundPlayer.pause();
      this.setState({ paused: !paused });
    }
  }

       render() {

          return (

            <View style={styles.audioPlayerContainer}>
              <Image
                style={styles.podcastImage}
                source={{ uri: podcastImage }}
              />
              {/* <Text> {playTime} </Text> */}

              <View style={styles.sliderCloseButtonContainer}>
                <Slider
                  maximumValue={totalLength}
                  step={1}
                  value={currentTime}
                  onSlidingComplete={value => this.onValueChange(value)}
                  style={styles.slider}
                  thumbTintColor=“blue”
                // onSeek={this.seek.bind(this)}
                  trackLength={totalLength}
                // onSlidingStart={() => this.setState({ paused: true })}
                />
              </View>
              <View style={styles.stylesContainer}>
                  {title}
                </TextTicker>
                <TouchableWithoutFeedback onPress={this.playPauseHandler}>
                  <View style={styles.playButton}>
                    <Image source={paused ? res.images.play : 
                   res.images.pause} />
                  </View>
                </TouchableWithoutFeedback>
              </View>
            </View>
            )
            }
         );
      }

Any suggestions?

Answer 1

there is a react-native module (a kind of outdated), but still working:

react-native-music-control