React Native Local Push Notifications Tutorial

Подписаться 398 тыс.

Просмотров 126 тыс.

50% 1

Learn how to perform React Native Local Push Notifications as well as Scheduled Push Notifications.
Local Push Notifications and Scheduled Push Notifications using the react-native-push-notification library requires a number of steps to get up and running. In this guide, we will take a look at how to setup react-native to run the local notifications as well as making sure all the dependencies are set up and configured for both iOS and Android.
React Native Local Push Notifications:
github.com/zo0r/react-native-...
I have also done a video on remote push notifications using react native if you want to see how that's done:
• React Native Push Noti...
Follow and support me:
Patreon: / adriantwarog
Twitter: / adrian_twarog
Dev.to: dev.to/adriantwarog
Discord: / discord
Do you want me to review some of your own designs or work? Visit the discord channel and share your project and I'll do my best to leave some feedback!
#reactnative #pushnotifications #adriantwarog
Learn Design for Developers!
A book I've created to help you improve the look of your apps and websites.
📘 Enhance UI: www.enhanceui.com/
Feel free to follow me on:
🐦 Twitter: intent/follow?scr...
💬 Discord: / discord
💸 Patreon: / adriantwarog
Software & Discounts:
🚾 Webflow: webflow.grsm.io/adrian
🌿 Envato: 1.envato.market/yRZjz2
🌿 Envato Elements: 1.envato.market/LP0OJZ
🔴 Elementor: elementor.com/adrian/?ref=23140
✖ Editor X: www.editorx.com/adrian-twarog
Computer Gear:
⬛ Monitor: amzn.to/3f9DOQI
⌨ Keyboard: amzn.to/3eA5UFD
🐁 Mouse: amzn.to/3xVJO8l
🎤 Mic: amzn.to/3hgCfms
📱 Tablet: amzn.to/3ewt7sa
💡 Lighting: amzn.to/3vOZeZY
💡 Key Lighting: amzn.to/3f6qP2f
Camera Equipment:
📷 Camera: amzn.to/3uCv4J9
📸 Primary Lens: amzn.to/3vT6wMm
📸 Secondary Lens: amzn.to/3tyqWIX
🎥 Secondary Camera: amzn.to/3o2zCGi
🎙 Camera Mic: amzn.to/33tCz9l
🎞 USB to HDMI: amzn.to/33yW9RE

Хобби

Опубликовано:

1 мар 2020

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 185

@AdrianTwarog 4 года назад

I am trying to grow my channel, so if you find this video useful, #subscribe & hitting the #bell :) Thanks for watching and hope you liked and learnt something new!

@warr1 4 года назад

What did you study?

@kuldeepgupta877 4 года назад

you should also give the complete code Link on your Github

@AmitKumar-ex1ot 2 года назад

i am not getting schedule notification when the app is in background or closed . Can someone help ?

@ilhami1299 2 года назад

@@AmitKumar-ex1ot I'm looking at the same. do you have any solution

@guilhermehenrique-zj5tt Год назад

te amo.

@PedroMesmer 2 года назад

i'm finally got it implement push notification without firebase with your video, thanks so much

@Luftjunkie Год назад

Finally someone who describes it with voice and details !

@jolly7506 4 года назад

During hot development process, your calm tone helps to feel that the world is not over and life just goes on in a natural manner. By the way, your videos are great!

@AdrianTwarog 4 года назад

Thanks that’s really nice to hear!

@suryansh3809 3 года назад

Hahaah true

@basiccodingwithadam8125 3 года назад

Great Video! Very helpful in an area most people are confused on.

@herisusanto2654 3 года назад

Thank you for your great content..keep up the good work!

@nathanguedes7726 3 года назад

this tutorial saved my life thanks a lot

@krisden7122 4 года назад

Nice video, keep it up man!

@basiccodingwithadam8125 4 года назад

Just what I was looking for!

@andresfelipemezamendez1194 2 года назад

simple and clear thankyou man

@michaelhe461 4 года назад

I am a bit confused. You have been running this mostly in console, is it possible to integrate it as a component and run it whenever it is being called?

@noorulhuda1661 3 года назад

Nicely explained 😊😊

@adhriadly4815 2 года назад

Hi Adrian, thanks your upload video tutorial. i want to ask you, how do you do when the user clicks notification background and it will be redirected to the page you want to go to?

@globalassistance1050 3 года назад

Nice video thank you very much . N I ve a question if you can help. Don't we ve to run some kind of function on some interval to hit the api to see if any new notifications has been recorded?? +Can it be triggered if application is not running?

@latifuluman7982 3 года назад

It is very helpful video. Thank you so much.

@AdrianTwarog 3 года назад

Great to hear :)

@alimodz6253 4 года назад

Hey, awesome video really no time wasted. I'm trying to display a notification of something like a call in progress or a VPN connection time, it's like when calling someone with an app and it shows in the notifcation bar the ongoing call duration and action buttons. Does this library help me do that?

@Aleweslei 3 года назад

very good, I have a question, is it possible to trigger local notification in the background with react native?

@marvann544 3 года назад

i have completed , the installation process but couldn't test the first notification need help in Deciding the place where to configure and add the testpush function.

@ArthurSilva-kt2bx 3 года назад

Hey how are you? Question: what happened when I double click the push notification? Does it open the app automatically or do I have to do something?

@vuongqtvn 2 года назад

thanks, nice tutorial

@chrisyoonful 3 года назад

WIll this still work if im not using firebase? THanks so much for the vid btw!

@NehaGupta-mu7hu 3 года назад

Push notifications not coming when create release mode build, any quick fix please?

@gibo588 3 года назад

Can you add an audio as well when there is notification?

@anupsinghrana5735 3 года назад

is it possible to use react native push notification with php/mysql without using firebase and oneSignal

@doksa2702 3 года назад

Can you help me, i followed your walktrough but im getting the following error when triggering a local notification: failed to post notification on channel null

@SalomDunyoIT 2 года назад

Can we play a sound with push notification, like an incoming call RN?

@ramicesmoises5170 3 года назад

Witch version of the react native are you using? And the push notification lib version? And the nodejs?

@berkslv 3 года назад

thank you for explanation

@soulking6982 2 года назад

Thanks bro Very+++ Much. May God Bless u

@kristinlau8018 2 года назад

Great video! Are you planning on doing a video on Firebase Cloud Messaging?

@shubhammaurya96 9 месяцев назад

HI, i have tried this and its working while in development mode but on release build apk local notification is not workin. Can you please tell me reason ?

@roohalmahaba5209 3 года назад

have question from where the folder android come from? Because I have my react native app without it and there is no gradle file , I am using expo, how I can have these files that you have ??

@igorordecha 3 года назад

The whole point of expo is that you DONT have native android and ios projects. As you might have guessed by now, to change any native code you need to eject from expo. But then you'll have to manage it yourself and compile your apks locally

@shrutirao5073 3 года назад

so how can I Locally push schedule notifications when the app is closed. I can pop notification while it's in the foreground and in the background but when I close the app I cannot get notifications

@RamaKrishna-ip6cg 2 года назад

I just tried with your getting error required channelId but your video there is no ChannelId mentioned.Could you please guide me for Local schedule push notifications

@HemalRathod 3 года назад

Can you show, how to get local notification working with expo react native app?

@dibayuin7859 3 года назад

if it's in local it need firebase too ?

@sagarchavan973 2 года назад

Is it possible to send notification from server ??

@sachitwadhawan3856 4 года назад

Hi Adrian, Thanks for posting this video but I have one question on the scheduled notification. What about if we want a notification to be triggered at, let say 5 PM in the evening. What are the changes required to set the timings of the notification? Any help would be appreciated.

@AdrianTwarog 4 года назад

Not sure, might need to look on github for finer details

@minhlenhat3759 2 года назад

Have you found any solutions yet? im having the same issse :((

@captaingrimm6236 4 года назад

Hello. I have one question. If i add this push notifications to my react native app, after published id to google play. Will the person who installed this app get also notifications? I mean these notifications work in production? Please answer me

@AdrianTwarog 4 года назад

Yep

@ivanhsiaolung2178 3 года назад

how to add link / deeplink at bottom message notification, example go to playstore for update. thanks

@serhatkoroglu6708 3 года назад

I cannot see the local notification as popup even popInitialNotification is true. It doesn't work in emulator or any other real device. Also vibration is not working. What could be wrong? (i use hooks could it be related?)

@sawarikabzoo5791 2 года назад

how can we navigate to specific screen on pressing notification?? need help

@dotauniverse3305 2 года назад

Is it possible to use local notifications without classes?

@reactdeveloper5480 3 года назад

Can u implement App open Ads in react native.

@ajikusbandono 3 года назад

what os android do u use ? is that os.9 or 8.1 ?

@AmitKumar-ex1ot 2 года назад

i am not getting schedule notification when the app is in background or closed . Can someone help ?

@meenurana4570 Год назад

Hey Adrian ... I got surprised that in development did't seen any video like this, who wants to make understandable to all. It sounds like you are saying that you have solution of all the queries related to that.

@vrsoftcoder6171 3 года назад

Hello Sir , local notification is not working if i close the app. Please help me.

@nirmalpatel8069 2 года назад

How to achieve an inline reply of notification received in both iOS and Android platforms?

@thimmacreations9221 3 года назад

i used button to call a testPush function , but not able to trigger a notification can you help me with that

@shreyassadavarte4051 4 года назад

will this work even if the app is killed?

@chintanpanchal3332 2 года назад

How to get real time notification, like for example for app something like when get notification from whatsapp flash light blink for once, when notification is from telegram flash blinks for 2 times something like that, how can I detect in my flash light blinker that notification is coming and blinks accordingly, anyone?? Hope you all get an idea what am I trying to do then please help, else let me know if more explanation is required. Thanks.

@camilo7davila 4 года назад

Thanks Adrian it worked to me, You have some video sending push notification from node js?

@AdrianTwarog 4 года назад

Not yet but good idea :)

@ZiosNeon 4 года назад

Have you tried Repeating Notifications ? it keeps calling the notification again and again even if i change the time it will show up, it is a library bug?

@AdrianTwarog 4 года назад

There are ways to set-up repeating notifications and canceling them. Is that what you mean?

@Ranjithkumar-ef1zn 2 года назад

How to update the notification message in already launched notification

@FzReactNativeDeveloper 6 месяцев назад

hi, Thanks for your video and i am in trouble right now iam not recieving background notifications ad popup. iam recieving notification on notification list bar. but not as a popup. could you please help me to do it?

@nazeebnasi8568 5 месяцев назад

did you find any solution?

@MEINS_App 3 года назад

Can you please make a video showing how to use devTools?

@udulaindunil6849 4 года назад

Thank you very much. You save my time.

@AdrianTwarog 4 года назад

That’s great!

@cleristonmartinscardoso2557 4 года назад

Hello man, I have an error message *** (RNpushnotification.getinitialnotification) undefined is not an object *** do you know how to solve it? I have been used expo and autolink

@AdrianTwarog 4 года назад

Check github!

@maazorawala7607 3 года назад

did it work ?

@iLightify 4 года назад

Would you mind doing a vid on how to make this work with datetimepicker? Alot of people are asking for this and it could make your channel grow even more.

@AdrianTwarog 4 года назад

iLightTV sure can do. Any particular use case examples you want me to go through?

@bobbysamuels1308 3 года назад

Hey what you did with using the developer chrome console to do that "window.store." was cool, Where can i find a tutorial dedicated about how exactly that's done? (Calling functionf u wrote in react native from the debug developer window console)

@AdrianTwarog 3 года назад

Sure, but it’s simple enough. When you define your store, also set it against window.store. For example, window.store = store = new AppStore()

@jayaweerageishanrandika6841 2 года назад

Sorry, I didn't understand it? How do you open the store.js in the console?

@gianmy07 3 года назад

Hi, thanks for the video but I have a problem: notifications don't work when app is in background but I see in the video that it works for you, can you help?

@AdrianTwarog 3 года назад

might need to check github issues for that

@gianmy07 3 года назад

@@AdrianTwarog ok thanks

@CreativeJE 4 года назад

hey adrian can you please make a tutorial on using react-native-background-fetch to do some stuff at interval and show a notification ? It would really help many people

@AungMyintThein 4 года назад

@CreativeJE have you found a solution?

@CreativeJE 4 года назад

@@AungMyintThein yeah it worked out

@IamYourFudder 4 года назад

how to use functions in console? that windows.store.functionName() ???

@musicandshorts30 3 года назад

hi, where to use that window.store.testPush command please help

@AdrianTwarog 3 года назад

Just in console, you can save your store against window.store variable to assess it

@k.a6 3 года назад

how to create store and devtools like that?... i'm so tired

@kenzoymc1717 4 года назад

Thank You Sir , that helping me out , but can you explain to me , how i can push a notification to another phone, if in this case , i wanna make a build two app, for customer , and driver, if driver touch a button “finish” if will showing a notification in spesific customer that order his service , can you explain to me ? Or create a video about that? Am i have to get his id_customer for do that ?

@AdrianTwarog 4 года назад

Kenzo Ymc that would need remote push notifications. I’ve done a video about it with onesignal

@kenzoymc1717 4 года назад

Ok sir

@kenzoymc1717 4 года назад

Adrian Twarog but it’s only for ios right? Hmm ? And also for test ,it’s send a notification by One Signal Console, can you create a video how to push a notification by another phone to another phone with One Signal in Android ? Thank You , it’s just my request, because i have no seen a complex react native push notification in RU-vid before

@israelbravo3930 3 года назад

Hi @Adrian Twarog. I have followed the prompts but the notification does not appear.

@danielalbert4077 3 года назад

Hey..read this part of the document.. In the notifications options, you must provide a channel id with channelId: "your-channel-id", if the channel doesn't exist the notification might not e triggered. Once the channel is created, the channel cannot be update. Make sure your channelId is different if you change these options. If you have created a channel in another way, it will apply options of the channel.

@maksimbezditko3517 Год назад

How to implement allow notifications popup using react-native?

@hypersudo8092 2 года назад

Getting warning message for chanelId. please help.

@josephsaunders4168 3 года назад

Hey great video! One question, after accidently not running the PushNotification.configure() it worked completely fine, but once I ran the configure I got the FirebaseApp is not initialized error (no solution found after many hours). Do I have to run the configuration or does everything work without it?

@AdrianTwarog 3 года назад

Not sure, might need to check doco or github issues for that

@vbsadmin9876 3 года назад

same issue here. looking for soluton.

@uturn232002 3 года назад

If you're only using local notifications then change your requestPermissions in config PushNotification.configure({ ... requestPermissions: Platform.OS === 'ios' ... } When requestPermissions is set to true it automatically calls Firebase

@fernando72496 3 года назад

@@uturn232002 OMG, THANK YOU!!!!

@GSYSWTF 2 года назад

@@uturn232002 thanks a lot, been struggling with this error for hours lol

@haqoda8378 4 года назад

hello, can u explain what the store.js ? like app.js when u first install react ? thank u

@AdrianTwarog 4 года назад

hafizh holmes sure it’s in my earlier videos on react native and it’s the store I use with Mobx

@drhootch 4 года назад

@@AdrianTwarog please can you link the video? i searched the playlist but i can't find it

@GEhehloopf 4 года назад

I get the error: "default firebaseapp is not initialized in this process" despite me trying to use local push notifications only. I thought local push notificatinos don't need firebase?

@felipepereira1967 4 года назад

Push Notification doesn't need Firebase in anyway, your problem is your importation from Firebase on someone class. I recommend you try do to this: Create a new file just for Firebase, and code this: import * as firebase from "firebase" const config = { apiKey: "your api key", authDomain: "your domain", databaseURL: "your databaseURL", projectId: "your project id", storageBucket: "your bucket", messagingSenderId: "your sender id", appId: "your app id", measurementId: "your measurement id" } export default !firebase.apps.length ? firebase.initializeApp(config) : firebase.app() And import like that: import firebase from '../../firebase' Now you can use without error "default firebaseapp is not initialized in this process"

@GEhehloopf 4 года назад

@@felipepereira1967 Does Local Schedule Notifications need firebase? Sorry I just don't want to download firebase if it's not needed

@felipepereira1967 4 года назад

@@GEhehloopf Firebase is not required.

@girishchauhan8009 4 года назад

@Jake I am also creating same app for local notification only. I am facing same error. Did you solved your issue? Please help me.

@rajajaganathan737 4 года назад

@@girishchauhan8009 set requestPermissions: false in PushNotification.configure({....})

@cleristonmartinscardoso2557 4 года назад

do you will make this project available on github?

@AdrianTwarog 4 года назад

I’ll try!

@lukoppc 2 года назад

Why my project doesn’t have an android folder ? Because I’m using expo. So this is not for me.

@emilrasmussen7429 2 года назад

Hi Adrian, really like your videos! But what bothers me is you sometime says stuff like: "Copy all this, except this..., cause we don't need that." It might be because you don't know, but would it be possible for you to explain why we aren't copying it all? Would help developers (my self atleast) to understand why we aren't taking it all. Thank you!

@AdrianTwarog 2 года назад

It’s a bad habit, This is an older video of mine so I’m sure you’ll see my newer videos are much more improved

@ycdcherokee 2 года назад

i am confused. what if i want to send push notifications to my users anytime? your explanation is understandable. but this is not the way push notifications are used.

@harshitkumar6959 4 года назад

sir, i can't find store.js . Where is this file ?

@AdrianTwarog 4 года назад

Harshit Kumar we created this in the earlier video on the react native series about setting up the app and stores.

@binobose 2 года назад

For me its not working. You havent created a Channel-ID, but still the code worked, Im wondering how. Im not getting the notification at all, even after creating a channel. Doesnt seem to be as easy as you did.

@Aleweslei 2 года назад

could update this video using FCM to send push notification :)

@VikashPatel-sf6ub 2 года назад

Android local schedule push notifications not working, if we kill an app. In ios it's working fine.

@AliMohamed-jg6bv 4 года назад

hi brother, hope u r doing good. I'm new to react native. I'm working on my project but i don't have files for each platform (IOS or android) is this should be done manually or this should be automatically ?

@AdrianTwarog 4 года назад

It depends, if you are just learning, focus on one for now

@AliMohamed-jg6bv 4 года назад

Adrian Twarog some of your fantastic tutorial like how to use Firebase need to copy some file in either IOS OR ANDROID folders , how can I implement such things if I have no folders ?!

@mohitarora2190 4 года назад

R u using expo?

@loganathanrajamani8511 4 года назад

please put video for push notification with actions both Android and iOS .

@vishnups5435 Год назад

I could not find the store.jsx 4:08

@zaidqureshi6823 4 года назад

Getting error default firebase app is not initialized in the process com.appname

@snatjz 3 года назад

delete ' requestPermissions: true,' this line and add ' requestPermissions: Platform.OS === 'ios', ' in the PushNotification.configure({

@surestamang33 4 года назад

I follow your step but I got firebase not initalized.

@SINGULURIPREMKUMAR 3 года назад

how did you solve it am facing same issue

@muhammadmuaz3121 3 года назад

Update this tutorial. Notifications not working with latest version

@vihagayohan9496 4 года назад

can you do a video for react native redux. it's so confusing to me

@AdrianTwarog 4 года назад

vihaga yohan94 yeah sure can do

@mairatariq6739 4 года назад

Hi, whenever I start the app, it crashes with "default firebaseapp is not initialized in this process" error. How to fix it?

@melwyncastelino7716 4 года назад

Wow I faced the same and I solved it

@melwyncastelino7716 4 года назад

It's like in gradle we need to add few lines app level gradle and project level . Having lunch will let you know what I did .

@melwyncastelino7716 4 года назад

buildscript { ext { buildToolsVersion = "28.0.3" minSdkVersion = 21 targetSdkVersion = 28 compileSdkVersion = 28 dbFlowVersion = '4.2.4' // buildToolsVersion = '28.0.0' supportLibVersion = '28.0.0' kotlinVersion = '1.3.50' repositoryUrl = "file:${System.env.HOME}/.m2/repository/" googlePlayServicesVersion = "16.1.0" // default: "+" firebaseVersion = "17.3.4" // default: "+" googlePlayServicesIidVersion = "16.0.1" } repositories { google() jcenter() maven { url 'dl.bintray.com/android/android-tools/' } } dependencies { classpath 'com.android.tools.build:gradle:3.5.1' // classpath 'com.google.gms:google-services:4.2.0' //classpath:'com.google.gms:google-services:4.3.3' // classpath 'com.google.gms:google-services:+' classpath 'com.google.gms:google-services:4.3.3' classpath 'com.google.gms:google-services:+' classpath 'de.undercouch:gradle-download-task:3.4.3' // github.com/awslabs/aws-device-farm-gradle-plugin/releases classpath 'com.amazonaws:aws-devicefarm-gradle-plugin:1.3' classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion" } }

@melwyncastelino7716 4 года назад

build script that's project level Gradle

@melwyncastelino7716 4 года назад

in app level Gradle . at the end add this // This has to be down here for some reason apply plugin: 'com.google.gms.google-services'

@umairshehzad6200 3 года назад

I am getting an error of firebase is not initialized, but i dont want to use firebase

@snatjz 3 года назад

delete ' requestPermissions: true,' this line and add ' requestPermissions: Platform.OS === 'ios', ' in the PushNotification.configure({

@umairshehzad6200 3 года назад

@@snatjz i did this, and it gives no error at compile time, but my notification is not appearing, i am calling the function in a button's onPress method, i dont know what to do.

@conghunghoang6783 4 года назад

Can you help me explain why onNotification cannot trigger?

@carlosaugusto-pj4hd 4 года назад

@AdrianTwarog 4 года назад

The app has to be running for onNotification to trigger. If its in the background, iOS or Android may have it in a paused state.

@AdrianTwarog 4 года назад

* See reply for *Cong

@conghunghoang6783 4 года назад

@@AdrianTwarog even app is running, onNotification cannot trigger, I have changed my solution to push notification from sever through FCM.

@tonsantos21 4 года назад

So, what’s the solution for when the app is in a quit state, let’s say? I mean, when the app is closed and the user receives a notification. Something is triggered then?

@codefriendly8528 4 года назад

Your Voice is too much similar to * Academind * youtube channal :-D

@vinayrwt 2 года назад

@horimiyarawstyle 9 месяцев назад

doesnt work anymore Could not determine the dependencies of task ':react-native-push-notification:compileDebugAidl'. > Installed Build Tools revision 33.0.0 is corrupted. Remove and install again using the SDK Manager.

@joolakataka 4 года назад

quick and easy but it would be great if you used same "react-native-push-notification" package for IOS too.

@AdrianTwarog 4 года назад

I know! Next time!

@mayur3049 3 года назад

Hey @Somappa Batikeri, I Used "react-native-push-notification" package in android and it works perfect but how to achieve in IOS with the same package.