skip to Main Content

My notification codes here.

import React, { useState, useEffect } from 'react';
import {
    StyleSheet,
    Pressable,
    Alert,
    Text,
} from 'react-native';
import DateTimePicker from 'react-native-modal-datetime-picker';
import { connect } from 'react-redux';
import { addAlarm } from "../Actions/alarms";
import PushNotification, {Importance} from 'react-native-push-notification';

const TimePicker = (props) => {
    const [isDateTimePickerVisible, setIsDateTimePickerVisible] = useState(false);
    const [id, setId] = useState(0);
    
    useEffect(() => {
        createChannels();
        handleNotificationAction();
    }, []);

    const generateId = () => {
        const newId = id + 1;
        setId(newId);
        return newId;
    };

    const createChannels = () => {
        PushNotification.createChannel({
            channelId: "alarm-channel",
            channelName: "Alarm Channel",
        });
    };

    const handleNotificationAction = () => {
        PushNotification.configure({
            onNotification: function (notification) {
                console.log("NOTIFICATION:", notification);
            },
            popInitialNotification: true,
            requestPermissions: true,
        });
        
    };

    const showDateTimePicker = () => {
        setIsDateTimePickerVisible(true);
    };
    const hideDateTimePicker = () => {
        setIsDateTimePickerVisible(false);
    };

    const handleDatePicker = (dateTime) => {
        var currentTime = Date.now();
        if (dateTime.getTime() < currentTime) {
            Alert.alert("Please choose future time");
            hideDateTimePicker();
            return;
        }
        const fireDate = dateTime;

        const alarmNotifData = {
            channelId: "alarm-channel",
            ticker: "My Notification Message",
            importance: Importance.HIGH,
            id: generateId(),
            title: "Alarm Ringing",
            message: "Message Here",
            autoCancel: false,  // Bildirim otomatik kapanmayacak
            vibrate: true,
            vibration: 100,
            smallIcon: "ic_launcher",
            largeIcon: "ic_launcher",
            playSound: true,
            soundName: "alarm_tone",  // Sürekli çalacak alarm sesi
            color: 'red',
            tag: "some_tag",
            fire_date: fireDate,
            date: { value: dateTime },
        };
        
        props.add(alarmNotifData);
        console.log('ID: ' + alarmNotifData.id);
        
        PushNotification.localNotificationSchedule({
            channelId: "alarm-channel",
            title: alarmNotifData.title,
            id: alarmNotifData.id,
            message: "Breastfeeding Time!",
            date: alarmNotifData.fire_date,
            actions: ["Snooze", "Stop Alarm"], // Stop Alarm eklendi
            importance: Importance.HIGH,
            allowWhileIdle: true,
            invokeApp: true,
            playSound: !!alarmNotifData.soundName,                        //<-----
            soundName: alarmNotifData.soundName ? alarmNotifData.soundName : 'default',  //<-----
        });

        hideDateTimePicker();
    };

    return (
        <>
            <Pressable
                style={styles.buttonStyle}
                onPress={() => {
                    showDateTimePicker(),
                    console.log("ShowDateTime");
                }}>
                <Text style={styles.buttonText}>+ Add Alarm</Text>
            </Pressable>
            <DateTimePicker
                mode='datetime'
                isVisible={isDateTimePickerVisible}
                onConfirm={handleDatePicker}
                onCancel={hideDateTimePicker}
            />
        </>
    );
};

const styles = StyleSheet.create({
    buttonStyle: {
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: 'blue',
        paddingHorizontal: 10,
        paddingVertical: 10,
    },
    buttonText: {
        fontSize: 15,
        color: 'white',
    }
});

const mapStateToProps = state => {
    return {};
};
const mapDispatchToProps = dispatch => {
    return {
        add: alarmNotifData => {
            dispatch(addAlarm(alarmNotifData));
        }
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(TimePicker);

I created a notification and set my own custom sound (I also added it to the raw file) but it still plays the standard sound.

I setted in AndroidManifest.

<meta-data android:name="com.dieam.reactnativepushnotification.notification_sound"
    android:resource="@raw/alarm_tone" />

React Native version: [v0.75.3 ]

My dependencies:

  "dependencies": {
    "@react-native-async-storage/async-storage": "^1.24.0",
    "@react-native-community/datetimepicker": "^8.2.0",
    "@react-native-firebase/app": "^20.5.0",
    "@react-native-firebase/auth": "^20.5.0",
    "@react-native-firebase/firestore": "^20.5.0",
    "@react-native-firebase/messaging": "^20.5.0",
    "i": "^0.3.7",
    "moment": "^2.30.1",
    "npm": "^10.8.3",
    "paths-js": "^0.4.11",
    "react": "^18.2.0",
    "react-native": "0.74.3",
    "react-native-background-timer": "^2.4.1",
    "react-native-chart-kit": "^6.12.0",
    "react-native-elements": "^3.4.3",
    "react-native-gesture-handler": "^2.17.1",
    "react-native-iap": "^12.15.3",
    "react-native-modal-datetime-picker": "^18.0.0",
    "react-native-paper": "^5.12.3",
    "react-native-permissions": "^4.1.5",
    "react-native-push-notification": "^8.1.1",
    "react-native-safe-area-context": "^4.10.8",
    "react-native-svg": "^15.5.0",
    "react-redux": "^9.1.2",
    "redux": "^5.0.1"
  },

Still ringing default phone sound. I tried restart app but doesn’t worked. How can i fix this issue?

2

Answers


  1. According to the documentation in the ‘custom sound’ section it should have the same name as you left in the resource, but in this section it specifies with example where you leave the extension. You could try leaving the extension e.g:

    soundName: ‘my_sound.mp3’.
    

    This property can be specified in:

    PushNotification.localNotification({})
    PushNotification.createChannel({})
    

    Example:

    import PushNotification, {Importance} from 'react-native-push-notification';
    ...
      PushNotification.createChannel(
        {
          channelId: "channel-id", // (required)
          channelName: "My channel", // (required)
          channelDescription: "A channel to categorise your notifications", // (optional) default: undefined.
          playSound: false, // (optional) default: true
          soundName: "alarm_tone.mp3", // (optional) See `soundName` parameter of `localNotification` function
          importance: Importance.HIGH, // (optional) default: Importance.HIGH. Int value of the Android notification importance
          vibrate: true, // (optional) default: true. Creates the default vibration pattern if true.
        },
        (created) => console.log(`createChannel returned '${created}'`) // (optional) callback returns whether the channel was created, false means it already existed.
      );
    

    or

    PushNotification.localNotification({
        ...
        soundName: "alarm_tone.mp3", // (optional) Sound to play when the notification is shown. Value of 'default' plays the default sound. It can be set to a custom sound such as 'android.resource://com.xyz/raw/my_sound'. It will look for the 'my_sound' audio file in 'res/raw' directory and play it. default: 'default' (default sound is played)
        ...
    });
    

    As an observation in the documentation there is no resource for com.dieam.reactnativepushnotification.notification_sound so the line in the Android Manifest is unnecessary. You can also try without the extension in case it doesn’t work.

    https://www.npmjs.com/package/react-native-push-notification#custom-sounds
    https://www.npmjs.com/package/react-native-push-notification#channel-management-android

    Login or Signup to reply.
  2. Since your project looks new, I recommend you to use notifee along with firebase instead of using react-native-push-notification, it is too old and not support anymore

    Custom sound using notifee: https://notifee.app/react-native/docs/android/behaviour#custom-sound

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search