Documentation Index
Fetch the complete documentation index at: https://mintlify.com/afkcodes/react-native-audio-pro/llms.txt
Use this file to discover all available pages before exploring further.
The sleep timer lets you schedule an automatic pause after a given number of seconds. When the timer elapses, the player pauses and fires a SLEEP_TIMER_COMPLETE event so your UI can react — ideal for bedtime listening, guided meditations, or any scenario where you want audio to stop without user interaction.
Methods
AudioPro.startSleepTimer(seconds)
Starts a countdown. When seconds have elapsed, playback is paused automatically.
// Pause playback after 30 minutes
AudioPro.startSleepTimer(30 * 60);
| Parameter | Type | Description |
|---|
seconds | number | Duration in seconds before pausing playback. |
AudioPro.cancelSleepTimer()
Cancels the currently active sleep timer. Safe to call even if no timer is running.
AudioPro.cancelSleepTimer();
The SLEEP_TIMER_COMPLETE Event
When the timer elapses, the event listener receives an event of type AudioProEventType.SLEEP_TIMER_COMPLETE. The payload includes the original timer duration.
| Payload field | Type | Description |
|---|
timerDuration | number | The duration (in seconds) that was set for the timer. |
Complete Example: 30-Minute Timer in a React Component
The example below wires up a sleep timer inside a React component — it starts a 30-minute timer, listens for SLEEP_TIMER_COMPLETE to clear the active state, and gives the user a toggle button.
import React, { useEffect, useState } from 'react';
import { Button, Text, View } from 'react-native';
import { AudioPro, AudioProEventType } from 'react-native-audio-pro';
const THIRTY_MINUTES = 30 * 60; // seconds
export function SleepTimerButton() {
const [timerActive, setTimerActive] = useState(false);
useEffect(() => {
const subscription = AudioPro.addEventListener((event) => {
if (event.type === AudioProEventType.SLEEP_TIMER_COMPLETE) {
// Timer elapsed — playback is already paused by the native layer
setTimerActive(false);
console.log(
'Sleep timer completed after',
event.payload?.timerDuration,
'seconds'
);
}
});
return () => {
subscription.remove();
};
}, []);
const handleToggle = () => {
if (timerActive) {
AudioPro.cancelSleepTimer();
setTimerActive(false);
} else {
AudioPro.startSleepTimer(THIRTY_MINUTES);
setTimerActive(true);
}
};
return (
<View>
<Text>{timerActive ? 'Timer active — tap to cancel' : 'No timer set'}</Text>
<Button
title={timerActive ? 'Cancel Sleep Timer' : 'Sleep in 30 min'}
onPress={handleToggle}
/>
</View>
);
}
Call AudioPro.cancelSleepTimer() inside a cleanup effect or when the user navigates away from the player screen to avoid leaving a stale timer running in the background after the component unmounts.
Practical Pattern: Preset Durations
Offering a handful of preset durations is a common pattern for sleep-timer UIs. The example below renders a duration picker and a single toggle button that starts or cancels the timer depending on the current state.
import React, { useEffect, useState } from 'react';
import { Button, Text, TouchableOpacity, View } from 'react-native';
import { AudioPro, AudioProEventType } from 'react-native-audio-pro';
const PRESETS = [
{ label: '15 min', seconds: 15 * 60 },
{ label: '30 min', seconds: 30 * 60 },
{ label: '60 min', seconds: 60 * 60 },
];
export function SleepTimerPicker() {
const [selectedSeconds, setSelectedSeconds] = useState(PRESETS[1]!.seconds);
const [timerActive, setTimerActive] = useState(false);
useEffect(() => {
const subscription = AudioPro.addEventListener((event) => {
if (event.type === AudioProEventType.SLEEP_TIMER_COMPLETE) {
setTimerActive(false);
}
});
return () => {
// Always cancel the timer when the component unmounts
if (timerActive) {
AudioPro.cancelSleepTimer();
}
subscription.remove();
};
}, [timerActive]);
const handleToggle = () => {
if (timerActive) {
AudioPro.cancelSleepTimer();
setTimerActive(false);
} else {
AudioPro.startSleepTimer(selectedSeconds);
setTimerActive(true);
}
};
return (
<View>
{/* Preset selector — disabled while a timer is running */}
<View style={{ flexDirection: 'row', gap: 8, marginBottom: 12 }}>
{PRESETS.map((preset) => (
<TouchableOpacity
key={preset.seconds}
onPress={() => !timerActive && setSelectedSeconds(preset.seconds)}
disabled={timerActive}
>
<Text
style={{
fontWeight: selectedSeconds === preset.seconds ? 'bold' : 'normal',
opacity: timerActive ? 0.4 : 1,
}}
>
{preset.label}
</Text>
</TouchableOpacity>
))}
</View>
<Button
title={timerActive ? 'Cancel Timer' : `Sleep in ${selectedSeconds / 60} min`}
onPress={handleToggle}
/>
</View>
);
}