Skip to content

iOS | Sound replays when app get focus back #883

@omerts

Description

@omerts

🪲 Description
In iOS, after playing a sound, then minimizing the app, and returning to it, the sound is replayed. This happens even if the sound finished playing.
It also happens when screen is locked, then unlocked.

🪲 What is the observed behavior?
Sound is playing even when it shouldn't, but only when app regains focus. On new app initialized it doesn't play without .play() being called.

🪲 What is the expected behavior?
Sound shouldn't play unless .play() is explicitly called.

🪲 Please post your code:

import React from 'react'
import { AppState, Dimensions } from 'react-native'
import Sound from 'react-native-sound'
import Toast from 'react-native-toast-message'
import { useDispatch, useSelector } from 'react-redux'

import Actions from '@src/actions'
import $t from '@src/i18n'

Sound.setCategory('Ambient')

const scanSound = new Sound('scan.mp3', Sound.MAIN_BUNDLE, (error) => {
  if (error) {
    console.error('failed to load the sound', error)
  }
})

export const ScanToast: React.FC = () => {
  const dispatch = useDispatch()

  const scanData = useSelector((state) => state?.scan.scanData)
  const scanType = useSelector((state) => state?.scan.scanType)

  React.useEffect(() => {
    if (scanType && scanData?.task_id) {
      scanSound.stop(() => {
        console.log('About to call play') // this is not called when sound is replayed
        scanSound.play()
      })

      if (!scanData.noPopup) {
        // Putting it here as it might change due to rotation
        const screenHeight = Dimensions.get('window').height

        Toast.show({
          type: 'success',
          position: 'top',
          topOffset: screenHeight / 2,
          text1: $t('visits.taskId', { taskId: scanData.task_id }),
          text2: $t(
            'visits.addedSuccessfully',
            {
              type: $t(`visitDetails.${scanType}`).toLowerCase(),
            },
          ),
          autoHide: true,
          visibilityTime: 3000,
          swipeable: false,
        })
      }

      dispatch(Actions.createAction(Actions.SCAN_CLEARED))
    }
  }, [dispatch, scanType, scanData?.task_id])

  return null
}

export default ScanToast

💡 If the bug is confirmed, would you be willing to create a pull request?
It seems to be lower level iOS related problem, which I am unfamiliar with.

Is your issue with...

  • iOS
  • Android
  • Windows

Are you using...

  • React Native CLI (e.g. react-native run-android)
  • Expo
  • Other: (please specify)

Which versions are you using?

  • React Native Sound: 0.13.0
  • React Native: 0.81.4
  • iOS: 26.1
  • Android: N/A
  • Windows: N/A

Does the problem occur on...

  • Simulator
  • Device

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

  • Device: iPhone 12 Promax

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions