Expo Push Notifications in React Native (tutorial for beginners) | DEVember Day 14

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

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

50% 1

Day 14 of #DEVember is here! Today we explore the engaging world of push notifications using Expo! In this hands-on tutorial, we'll dive into implementing remote push notifications in your React Native apps. Push Notifications can boost user engagement and provide timely updates, and this tutorial will cover everything you need to know to set up and manage effective push notifications. Perfect for developers of all levels, this video is an essential guide to mastering this crucial aspect of modern app development.
Join us in our continued effort to support education through our "Education for Children" fundraiser, and let's build something amazing together!
✨More info about the event and the fundraiser:
notjust.dev/events/DEVember
🌟DEVember Day 14: www.notjust.dev/projects/deve...
If you have ideas of features, topics or apps you would like me to cover during #DEVember, you can submit them on our 💡Idea Board:
github.com/notJust-dev/DEVemb...
Your contribution helps offer essential learning resources to underprivileged children, ensuring every child has the chance to learn and grow.
💝 Incentives for Donations:
$25 - Your name in every video
$50 - Personal shout-out
$300 - Pick an Idea to Build
$1000 - Brand shout-out + ad-read
$3000 - Tutorial with your Tool/Product/Service
📚 Today's Agenda:
- Understanding Push Notifications in Mobile Apps
- Setting Up Expo Push Notifications
- Implementing Remote Notifications
- Testing Push Notifications
- Managing Notification Content
- Recap and Demo
❗Try our FREE 4-day Masterclass on notJust.Academy:
assets.notjust.dev/masterclas...
📚 Enroll NOW in The Full-Stack Mobile Developer course and don’t miss out on your chance to become a 6-figure dev! Check out what our successful students are saying about their experience:
academy.notjust.dev/?...
💬 Join the notJust Development gang and let's build together:
Twitter: / vadimnotjustdev
Instagram: / vadimnotjustdev
Facebook: / notjustdev
LinkedIn: / vadimsavin
Discord: / discord
Timecodes:
0:00 - Introduction and Project Overview
3:58 - Setting Up and Starting the Push Notifications Project
8:19 - Push Notification Service Functionality
10:22 - Remote Notifications in Mobile Apps
10:55 - Implementing Expo Notifications
12:22 - Setting Up FCM and APNs
13:55 - Creating Notifications Folder and Screen
15:23 - Notifications in Layout File
16:47 - Notification Functionality and State Management
18:02 - Configuring Handlers and Permissions
20:31 - Android and iOS Notification Settings
23:22 - Obtaining Expo Push Token
24:48 - Running Application on Physical Device
32:01 - Notifications in Background or Killed State
34:15 - Scheduling Local Notifications
35:38 - Listeners for Received Notifications
39:06 - Testing on Devices and Emulator
43:04 - Additional Configuration and Testing
47:51 - Exploring Advanced Notification Features
1:12:19 - Notification Response and Redirection
1:20:57 - Integrating Firebase for Remote Notifications
1:23:03 - Setting Up Firebase Project
1:24:02 - Configuring Expo Project with Firebase
1:30:18 - Testing Remote Notifications with Expo
1:31:07 - Troubleshooting Notification Delivery
1:32:26 - Completing Firebase Cloud Messaging Setup
1:33:23 - Creating Firebase API Key
1:34:25 - Verifying Package Name and Configuration
1:35:31 - Linking Firebase to Expo for Android
1:36:42 - iOS Push Notification Setup with Expo and Firebase
1:37:48 - Configuring iOS Bundle Identifier in Firebase
1:38:24 - Adding Firebase Configuration to Expo
1:39:08 - Setting Up API Keys and Services
1:39:41 - Integrating Firebase into Expo for iOS
1:40:18 - Final Steps for Firebase Integration
1:41:03 - Verifying API Key in Google Cloud Platform
1:41:53 - Credential Management in Google Services
1:42:56 - Completing Firebase Setup for Notifications
1:43:31 - Triggering New Builds with EAS
1:44:09 - Managing Build Configurations with Git
1:45:12 - Testing Notifications on Different Platforms
1:46:18 - Configuring Expo Account for Notifications
1:47:14 - Server Key Setup in Firebase Console
1:48:07 - Linking Expo Project with Firebase Server Key
1:49:05 - Completing Setup and Final Testing
2:29:03 - Final Adjustments and Deployment Preparation
Disclaimer: This build is for educational purposes only. All views, opinions, and technology choices expressed in this video are my own and do not represent the views, opinions, or technology choices of any entity I have been, am now, or will be affiliated with.
#notjustdev #ReactNative

Наука

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

24 июл 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

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

Absolute legend! It is also great to see how you handle the errors because this helps a lot to learn error patterns and how to handle them 🤙

@night_city_nights 4 месяца назад

Great tutorial. Super helpful and now I have a much better understanding on notifications!

@wisdomelue 7 месяцев назад

thanks for all the good work

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

Great work!

@megame_24 4 месяца назад

Thank you for this detailed tutorial!

@notjustdev 4 месяца назад

Any time!

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

I found out I had to send PNs directly from my backend to APNS in order to use custom sounds in my Expo app. Maybe worth mentioning it. Rich notifications would be a plus too, but not possible using expo-notifications 😕

@user-ko9on9sd7u 7 месяцев назад

what you're using as extension in visual code ?

@richardwilliamsmusic 4 месяца назад

I would like to create an app that has flashcards for memorization, and I want it to send notifications for each flashcard to appear on a phone with expo react native app. On each flashcard will be a button that if you press, it will remember or alter the order of the array of flashcards. or it can remember it for later, and have it play a new set of remembered cards after the first initial cards is done notifying. Is there a way to do that? I already tried, and I for the life of me wasn't able to figure out how to have a button on each flashcard populate an array which will then start a new array with it's notifications.

@champi-metal 4 месяца назад

Thanks man!

@notjustdev 4 месяца назад

No problem!

@faithkerubo8357 7 месяцев назад

Could you also have a polling react native app...like the custom polls in WhatsApp?Would really appreciate it

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

How could i use actions on my notification? To make it interactive

@laputaux8580 7 месяцев назад

Good evening, I am having trouble setting up my Expo mobile phone as an emulator. I don't want to use Android Studio, my system is not powerful enough .

@eniskalyon 16 дней назад

Thanks a lot, would the IOS setup work with Azure Notification Hub instead of Firebase as well? Or what could be done for this to work?

@notjustdev 16 дней назад

You're welcome! It should

@iamyou6555 4 месяца назад

do you need to have paid for apple dev account before trying this?

@scotly_emi 7 месяцев назад

Can you do a app like xender please

@SandraWantsCoke 4 месяца назад

14:46:43 V1 Legacy will be deprecated soon though

@Bright-Great 7 месяцев назад

Please create a voice call recording app

@orionpro79 3 месяца назад

А что случилось с getLastNotificationResponseAsync когда ты попал на тот же экран и опять редирект сработал, так и не понятно на 1 час 19 сек. Ты просто пошёл отдыхать от микрофона , но дальше продолжил совсем другую тему обговаривать. А как сделать ресет этого getLastNotificationResponseAsync который сработал когда ты просто вернулся на экран не понятно...