Android custom ringtone
Custom ringtone setup
Audio File Requirements
Supported formats:
.mp3(MPEG Audio).ogg(Ogg Vorbis).wav(Waveform Audio).m4a(MPEG-4 Audio)
Requirements:
- Duration: under 30 seconds recommended
- Naming: lowercase, no spaces; use underscores instead of hyphens (e.g.,
ringtone.mp3,my_custom_ringtone.ogg)
The system normalizes names to lowercase and replaces hyphens with underscores
How to add custom ringtone file
Step 1: Prepare Your Sound File
- Ensure your sound file is in a supported format
- Name it using lowercase letters, numbers, and underscores only (e.g.,
ringtone.mp3,incoming_call.ogg)
Step 2: Add the Sound File to Your Android Project
Locate the Android resources directory:
- Navigate to
android/app/src/main/res/in your project
If the raw folder doesn't exist, create it:
mkdir -p android/app/src/main/res/rawCopy your sound file to the raw folder:
# Example: Copy your sound file
cp path/to/your/ringtone.mp3 android/app/src/main/res/raw/ringtone.mp3Or manually:
- Copy your sound file
- Paste it into
android/app/src/main/res/raw/ - Ensure the filename uses lowercase letters, numbers, and underscores only
Verify the file structure:
android/app/src/main/res/
└── raw/
└── ringtone.mp3 (or your sound file)Step 3: Update Your Configuration
In your React Native code where you configure StreamVideoRN.setPushConfig(), set the sound property in the Android configuration:
StreamVideoRN.setPushConfig({
android: {
incomingChannel: {
sound: "ringtone", // Match your file name (without extension, or with extension)
},
},
// ... rest of your configuration
});Examples:
- File:
ringtone.mp3→ Usesound: 'ringtone'orsound: 'ringtone.mp3' - File:
my_custom_ringtone.ogg→ Usesound: 'my_custom_ringtone'orsound: 'my_custom_ringtone.ogg' - File:
incoming-call.wav→ Usesound: 'incoming_call'(hyphens are converted to underscores)
Step 4: Rebuild and Test
Clean and rebuild your Android app:
cd android
./gradlew clean
cd ..
npx react-native run-android
# or
yarn androidTest with an incoming call to verify the custom ringtone plays.
Step 1: Place Your Sound File in the Project
Place your ringtone file anywhere in your project directory (e.g., assets/ringtone.mp3).
Step 2: Add the Plugin Config
In app.json, add the androidRingtone property to the @stream-io/video-react-native-sdk plugin config. The path is relative to the project root:
{
"plugins": [
[
"@stream-io/video-react-native-sdk",
{
"ringing": true,
"androidRingtone": "./assets/ringtone.mp3"
}
]
]
}The plugin copies the file to android/app/src/main/res/raw/ automatically during expo prebuild.
Name normalization: The plugin normalizes the filename for Android resource compatibility:
- Converts to lowercase
- Replaces hyphens with underscores
- Removes any characters that are not alphanumeric or underscores
Examples:
ringtone.mp3→ resource name:ringtoneMy-Custom-Ringtone.ogg→ resource name:my_custom_ringtoneincoming-call.wav→ resource name:incoming_callHabla Doris.mp3→ resource name:habladoris
You must use the normalized name (without extension) in your setPushConfig configuration.
Step 3: Update Your Configuration
Use the normalized resource name (lowercase, underscores, no extension):
StreamVideoRN.setPushConfig({
android: {
incomingChannel: {
sound: "ringtone", // Use the normalized name (without extension)
},
},
// ... rest of your configuration
});Step 4: Rebuild
npx expo prebuild --clean
npx expo run:androidTest with an incoming call to verify the custom ringtone plays.