How do I play same sound in different components?

[cgruca]

:beetle: Description

I have a couple screens in my app where I'd like some background music to play. For instance on home screen I want background.mp3 to play throughout. Later in the app, in the settings screen I also want that same track to play. When I try and use my below method, it's like the 1st home screen audio related functions get ignored/overwritten and it only uses the logic from the settings screen.

:beetle: What have you tried?

This is how my 2 screens look like:

Home screen

import React, {useEffect, useState} from 'react';
import { Button } from 'react-native';

var Sound = require('react-native-sound');

var background = new Sound('background.mp3', Sound.MAIN_BUNDLE, (error) => {
  if (error) {
      console.log('failed to load the sound', error);
      return;
    } else {
      background.play((success)=> console.log(success)); // have to put the call to play() in the onload callback
  }
  });

const Home = ({navigation}) => {

useEffect(() => {
    background.setVolume(1);
    background.play(success => {
      if (success) {
        console.log('successfully finished playing');
      } else {
        console.log('playback failed due to audio decoding errors');
      }
    });

    return () => {
     background.release();
    };
  }, []);

//other fns and render
}

Settings Screen

import React, {useEffect, useState} from 'react';
import { Button } from 'react-native';

var Sound = require('react-native-sound');

var click = new Sound('background.mp3', Sound.MAIN_BUNDLE, (error) => {
  if (error) {
      console.log('failed to load the sound', error);
      return;
    } else {
      background.play((success)=> console.log(success)); // have to put the call to play() in the onload callback
  }
  });

const Settings = ({navigation}) => {

useEffect(() => {
    background.setVolume(1);
    background.play(success => {
      if (success) {
        console.log('successfully finished playing');
      } else {
        console.log('playback failed due to audio decoding errors');
      }
    });

    return () => {
     background.release();
    };
  }, []);

//other fns and render
}

:bulb: Possible solution

I think it has to do with global variables and me not releasing the first sound properly...?

Is your issue with...

• [ x] iOS
• [x ] Android

Are you using...

• [x ] React Native CLI (e.g. react-native run-android)

Which versions are you using?

• React Native Sound: "^0.11.1",
• React Native: "0.63.4",
• iOS: 14
• Android: 10
• Windows:

Does the problem occur on...

• [x] Simulator
• [x] Device

If your problem is happening on a device, which device?

• Device: IPhone 12 Pixel 3