Developer Warning for package * Failed to post notification on channel "fcm_fallback_notification_channel" See log for more details

Question

I am getting this Error Trying to implement Push Notifications in React native.

Developer Warning for package com.pn2
Failed to post notification on channel
"fcm_fallback_notification_channel"

See log for more details

I am very new to this, I followed this video http://youtube.com/watch?v=xSOr_u3Ev1s and managed to implement everything as Told but i get that Warning and the Push notification does not show.

My code Looks thus :

index.js

/**
 * @format
 */

import {AppRegistry, Platform} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
import PushNotification from 'react-native-push-notification';


PushNotification.configure({
  // (optional) Called when Token is generated (iOS and Android)
  onRegister: function (token) {
    console.log("TOKEN:", token);
  },

  // (required) Called when a remote is received or opened, or local notification is opened
  onNotification: function (notification) {
    console.log("NOTIFICATION:", notification);

    // process the notification

    // (required) Called when a remote is received or opened, or local notification is opened
    notification.finish(PushNotificationIOS.FetchResult.NoData);
  },

  // (optional) Called when Registered Action is pressed and invokeApp is false, if true onNotification will be called (Android)
  onAction: function (notification) {
    console.log("ACTION:", notification.action);
    console.log("NOTIFICATION:", notification);

    // process the action
  },

  // (optional) Called when the user fails to register for remote notifications. Typically occurs when APNS is having issues, or the device is a simulator. (iOS)
  onRegistrationError: function(err) {
    console.error(err.message, err);
  },

  // IOS ONLY (optional): default: all - Permissions to register.
  permissions: {
    alert: true,
    badge: true,
    sound: true,
  },

  popInitialNotification: true,
  requestPermissions: Platform.OS ==="ios",
});

AppRegistry.registerComponent(appName, () => App);

App.js

import React from 'react';
import {View, Text, StyleSheet , TouchableOpacity} from 'react-native';
import {showNotification} from './src/notification';

const App = () =>{
  return(
    <View style={styles.container}>
      <Text>
        Push Notification 
      </Text>
      <TouchableOpacity onPress={() => showNotification('hello','test message')} style={styles.Regbutton}>
        <Text style={styles.loginbtn2}> Show Notification! </Text>
         </TouchableOpacity>
    </View>
  )
}


export default App;


const styles = StyleSheet.create({
  container:{
    flex: 1,
    justifyContent : 'center',
    alignItems: 'center'
  },
      Regbutton:{
        marginTop:16,
        width:300,
        height:52,
        padding:10,
        borderRadius:10,
        backgroundColor:'#ffffff',
        alignItems: 'center',
        borderWidth : 2,
        borderColor: '#030303'
    },

    loginbtn2:{
      color:'#030303',
      fontSize : 20,
      fontWeight : 'bold'
  },
})

Notification.android.js

import PushNotification from 'react-native-push-notification';

const showNotification = (title, message) => {
    PushNotification.localNotification({
        title: title,
        message : message
    });
};

export {showNotification};

AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.pn2">

    <uses-permission android:name="android.permission.INTERNET" />
        <uses-permission android:name="android.permission.VIBRATE" />
    <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/>

    <application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:roundIcon="@mipmap/ic_launcher_round"
      android:allowBackup="false"
      android:theme="@style/AppTheme">
      <meta-data  android:name="com.dieam.reactnativepushnotification.notification_foreground"
                    android:value="false"/>
        <!-- Change the resource name to your App's accent color - or any other color you want -->
        <meta-data  android:name="com.dieam.reactnativepushnotification.notification_color"
                    android:resource="@color/white"/> <!-- or @android:color/{name} to use a standard color -->

        <receiver android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationActions" />
        <receiver android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationPublisher" />
        <receiver android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationBootEventReceiver">
            <intent-filter>
                <action android:name="android.intent.action.BOOT_COMPLETED" />
                <action android:name="android.intent.action.QUICKBOOT_POWERON" />
                <action android:name="com.htc.intent.action.QUICKBOOT_POWERON"/>
            </intent-filter>
        </receiver>

        <service
            android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationListenerService"
            android:exported="false" >
            <intent-filter>
                <action android:name="com.google.firebase.MESSAGING_EVENT" />
            </intent-filter>
        </service>
      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
        android:launchMode="singleTask"
        android:windowSoftInputMode="adjustResize">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
      </activity>
    </application>
</manifest>

build.gradle

  ext {
        googlePlayServicesVersion = "+" // default: "+"
        firebaseMessagingVersion = "+" // default: "+"
        buildToolsVersion = "29.0.3"
        minSdkVersion = 21
        compileSdkVersion = 29
        targetSdkVersion = 25
        ndkVersion = "20.1.5948944"
        supportLibVersion = "23.1.1" // default: 23.1.1

Is there something I am not doing rightly? Kindly assist. Screenshot of the Error is as shown below:

Answer 1

As Moustafa Shamma showed in the image, the missing part is the Channel. You need to create a channel in order to show send the notification there.

Try adding this to Index or App:

 PushNotification.createChannel({
    channelId: "my-channel", // (required)
    channelName: "My channel", // (required)
 },
 (created) => console.log(`CreateChannel returned '${created}'`)
 );

Then in your notification add the channelID to it:

const showNotification = (title, message) => {
    PushNotification.localNotification({
        channelId: "my-channel",
        title: title,
        message : message
    });
};

Answer 2

check this image that will help you : https://i.sstatic.net/LUVat.jpg