DEV Community: Pradeep

How to Implement Push Notifications in React Native for Android and iOS

Pradeep — Sun, 22 Dec 2024 13:19:29 +0000

Push notifications are a crucial feature in modern mobile applications, enabling real-time communication with users. In this article, I'll guide you through implementing push notifications in a React Native app for both Android and iOS. We'll cover setting up the notification prompt and managing permissions, along with code examples.

Why Push Notifications?

Push notifications allow you to:

1. - Engage users with timely updates.
2. - Increase user retention through reminders.
3. - Notify users about important events, offers, or updates.
4. - Let’s dive into implementing this in React Native. Setting Up Push Notifications

Prerequisites Before starting, ensure you have:

A React Native app set up.
Dependencies installed:

@react-native-async-storage/async-storage
react-native-push-notification
@react-native-firebase/messaging (if using Firebase for
notifications)
Requesting Notification Permissions
Permissions are critical for enabling push notifications. Here’s how to set up a prompt when a user clicks a button (e.g., "Remind Me") to request notification permissions.

import { Alert, PermissionsAndroid, Platform } from 'react-native';
import PushNotification from 'react-native-push-notification';

export async function requestNotificationPermission() {
  if (Platform.OS === 'ios') {
    // iOS-specific permission request
    const authStatus = await messaging().requestPermission();
    if (
      authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
      authStatus === messaging.AuthorizationStatus.PROVISIONAL
    ) {
      setupPushNotificationChannel();
    } else {
      Alert.alert('Permission Denied', 'Notifications are disabled.');
    }
  } else if (Platform.OS === 'android') {
    // Android-specific permission request
    if (Platform.Version >= 33) {
      try {
        const granted = await PermissionsAndroid.request(
          PermissionsAndroid.PERMISSIONS.POST_NOTIFICATIONS,
          {
            title: 'Notification Permission',
            message: 'Allow this app to send notifications?',
          }
        );
        if (granted === PermissionsAndroid.RESULTS.GRANTED) {
          setupPushNotificationChannel();
        } else {
          Alert.alert(
            'Permission Denied',
            'Please enable notifications from settings.'
          );
        }
      } catch (error) {
        console.error('Permission request failed:', error);
      }
    } else {
      setupPushNotificationChannel();
    }
  }
}

Setting Up Notification Channels Notification channels are essential on Android to categorize and prioritize notifications. The following code demonstrates how to create a channel using react-native-push-notification:

const setupPushNotificationChannel = () => {
  PushNotification.createChannel(
    {
      channelId: 'default_channel', // Unique ID for the channel
      channelName: 'Default Notifications', // Channel name
      channelDescription: 'A default notification channel', // Description
      vibrate: true, // Vibration setting
    },
    (created) => console.log(`Notification channel created: ${created}`)
  );
};

Triggering Local Notifications You can trigger a local notification using react-native-push-notification. This is useful for testing or sending reminders.

const triggerLocalNotification = () => {
  PushNotification.localNotification({
    channelId: 'default_channel',
    title: 'Reminder!',
    message: 'Don’t forget to check this out!',
    playSound: true,
    soundName: 'default',
    vibrate: true,
  });
};

Handling Notifications in Foreground, Background, and Quit States To manage notification behavior in different app states, you can use @react-native-firebase/messaging or a similar package.

import messaging from '@react-native-firebase/messaging';

export const notificationListener = () => {
  // Handle notification when the app is in the foreground
  messaging().onMessage(async (remoteMessage) => {
    console.log('Foreground notification:', remoteMessage);
    triggerLocalNotification();
  });

  // Handle notification when the app is opened from the background
  messaging().onNotificationOpenedApp((remoteMessage) => {
    console.log('Notification opened:', remoteMessage);
  });

  // Handle notification when the app is launched via a notification
  messaging()
    .getInitialNotification()
    .then((remoteMessage) => {
      if (remoteMessage) {
        console.log('Initial notification:', remoteMessage);
      }
    });
};

Final Implementation in Your App

Integrate the above functions into your app. Here’s how you can wire everything together:

Request permission when the user clicks a button:

<Button title="Remind Me" onPress={requestNotificationPermission} />

Trigger local notifications:

<Button title="Test Notification" onPress={triggerLocalNotification}/>

Initialize listeners in your app entry point:

import { notificationListener } from './NotificationService';

useEffect(() => {
  notificationListener();
}, []);

Impact of Push Notifications

Implementing push notifications can significantly enhance user engagement. Here are some key benefits:

Real-time updates: Notify users about important events immediately.
Improved retention: Send reminders to encourage users to return to the app.
Enhanced experience: Personalise messages to create a tailored experience.

Firebase Crashlytics : Integration in React Native App

Pradeep — Thu, 20 Jun 2024 07:50:47 +0000

Crashlytics is one of the powerful tool from the Firebase that helps us to track and analyze the crashes in real-time, by enabling the Crashlytics in your App you can determine the root cause of the crash and you can understand the impact on your users hence you can keep your app stable authentic.
In this article you can check the steps for configuration and the sample code to test the crash in real-time

Setting Up Crashlytics in Your React Native App
Step 1 : Install Firebase SDK
npm install @react-native-firebase/app npm install @react-native-firebase/crashlytics

Step 2 : Setup Firebase Project
Next, you need to go to firebase console and create a new project and follow the instructions to generate a google-services.json file for Android or a GoogleService-Info.plist file for iOS.
if you have already has a project running in firebase you can just download the google-services.json for Android and GoogleService-Info.plist for iOS

Step 3: Integrate Crashlytics in your app
This is one of the important and exciting part of integration
copy the google-services.json fie you downloaded in firebase to the following path
/android/app/.
Next open android/build.gradle file and add the following dependency:

// .. buildscript { // .. dependencies { // .. classpath 'com.google.firebase:firebase-crashlytics-gradle:3.0.0' } // .. }
Next open android/app/build.gradle file and add the following plugins

apply plugin: 'com.android.application' apply plugin: 'com.google.gms.google-services' // apply after this line apply plugin: 'com.google.firebase.crashlytics' // ..

Step 4 : Add a file to the base folder of your project with the name firebase.json and copy the following content

{ "react-native": { "crashlytics_debug_enabled": true } }

Step 5 : Rebuild the project

npx react-native run-android

Step 6 : Force a test crash

Add the following code in your app :

`import React, { useEffect } from 'react';
import { View, Button } from 'react-native';
import crashlytics from '@react-native-firebase/crashlytics';

async function onSignIn(user) {
crashlytics().log('User signed in.');
await Promise.all([
crashlytics().setUserId(user.uid),
crashlytics().setAttribute('credits', String(user.credits)),
crashlytics().setAttributes({
role: 'admin',
followers: '13',
email: user.email,
username: user.username,
}),
]);
}

export default function App() {
useEffect(() => {
crashlytics().log('App mounted.');
}, []);

return (

title="Sign In"
onPress={() =>
onSignIn({
uid: 'Aa0Bb1Cc2Dd3Ee4Ff5Gg6Hh7Ii8Jj9',
username: 'Pradeep',
email: 'pradeep@example.com',
credits: 42,
})
}
/>
crashlytics().crash()} />

);
}`

Happy Coding !!

Using SQLite in React Native: Installation and Usage Guide

Pradeep — Wed, 01 May 2024 07:31:43 +0000

SQLite is a popular relational database management system that provides a lightweight and self-contained solution for storing and managing data. In React Native development, SQLite can be a powerful tool for building offline-first applications, caching API responses, and managing local data storage.

Installation
To use SQLite in your React Native project, you'll need to install the react-native-sqlite-storage package. Follow these steps to get started:

Install the Package: Run the following command in your project directory to install the react-native-sqlite-storage package:

npm install react-native-sqlite-storage

Link the Library (for React Native < 0.60): If you're using a React Native version less than 0.60, you need to link the native dependencies by running:

react-native link react-native-sqlite-storage

Getting Started

Now that you have SQLite installed in your project, you can start using it to manage local data storage, cache API responses, or implement other data management features. Here's a basic guide to get you started:

- Initialize SQLite Database: Open or create a new SQLite database in your React Native application. You can use the react-native-sqlite-storage package to initialize and interact with the database.
- Perform Database Operations :Perform CRUD (Create, Read, Update, Delete) operations on your SQLite database. You can execute SQL queries to insert, retrieve, update, or delete data from tables in the database.
- Handle Errors and Edge Cases: Handle errors gracefully and consider edge cases such as database versioning, migrations, and transaction management. Proper error handling ensures the reliability and stability of your application.

Let's break down the steps page by page and file by file:

Database Setup (Database.js):

import SQLite from 'react-native-sqlite-storage';

const db = SQLite.openDatabase(
  { name: 'mydatabase.db', location: 'default' },
  () => { },
  error => { console.error('Error opening database:', error); }
);

export default db;

API Caching Functions (APIUtils.js):

import db from './Database';

// Function to insert or update data in the cache
export const cacheResponse = (url, data) => {
  const timestamp = Date.now();
  db.transaction(tx => {
    tx.executeSql(
      'INSERT OR REPLACE INTO api_cache (url, data, timestamp) VALUES (?, ?, ?)',
      [url, JSON.stringify(data), timestamp],
      () => console.log('Data cached successfully'),
      (_, error) => console.error('Error caching data:', error)
    );
  });
};

// Function to retrieve data from the cache
export const getCachedResponse = (url, callback) => {
  db.transaction(tx => {
    tx.executeSql(
      'SELECT data FROM api_cache WHERE url = ?',
      [url],
      (_, { rows }) => {
        if (rows.length > 0) {
          const data = JSON.parse(rows.item(0).data);
          callback(data);
        } else {
          callback(null);
        }
      },
      (_, error) => console.error('Error retrieving cached data:', error)
    );
  });
};

API Fetching and Caching (VideoPlay.js):

import { cacheResponse, getCachedResponse } from './APIUtils';

// Function to fetch API data, cache it, and return it
const fetchAPI = async url => {
  try {
    const cachedData = await new Promise(resolve => getCachedResponse(url, resolve));
    if (cachedData) {
      console.log('Data retrieved from cache:', cachedData);
      return cachedData;
    } else {
      const response = await fetch(url);
      const data = await response.json();
      cacheResponse(url, data);
      console.log('Data retrieved from API and cached:', data);
      return data;
    }
  } catch (error) {
    console.error('Error fetching data:', error);
    return null;
  }
};

// Usage example:
const apiUrl = 'https://api.example.com/data';
fetchAPI(apiUrl);

Database Initialization (App.js):

import React, { useEffect } from 'react';
import db from './Database';

const App = () => {
  useEffect(() => {
    // Create a table to store cached API responses
    db.transaction(tx => {
      tx.executeSql(
        'CREATE TABLE IF NOT EXISTS api_cache (id INTEGER PRIMARY KEY AUTOINCREMENT, url TEXT UNIQUE, data TEXT, timestamp INTEGER)',
        [],
        () => console.log('Table created successfully'),
        (_, error) => console.error('Error creating table:', error)
      );
    });
  }, []);

  return (
    // Your app components and navigation here
  );
};

export default App;

Use Cases
SQLite can be used for a variety of purposes in React Native applications:

Offline Data Storage: Store application data locally on the device, allowing the application to function offline or in areas with poor network connectivity.
Caching API Responses: Cache network requests and API responses to improve performance and reduce bandwidth usage. Cached data can be retrieved quickly without the need for repeated network requests.
Persistent Data Storage: Persist user preferences, settings, or application state across sessions by storing data in the SQLite database.
Data Synchronization: Synchronize local data with remote servers or other devices, ensuring consistency and integrity of the data across multiple sources.

Conclusion
SQLite is a versatile and powerful tool for managing data in React Native applications. By integrating SQLite into your projects, you can leverage its capabilities for offline data storage, caching, and synchronization, enhancing the user experience and performance of your applications.

In this guide, we covered the installation of SQLite in React Native, basic usage patterns, and common use cases for incorporating SQLite into your projects. With this knowledge, you're well-equipped to start using SQLite in your React Native applications and unlock its full potential for data management.