DEV Community: Guilherme Toledo

React and Angular: Common Patterns Comparison

Guilherme Toledo — Fri, 26 Dec 2025 02:04:09 +0000

This is by no means intended to be an in-depth guide to the differences between React and Angular. On the contrary, it is a first-glance perspective from a developer who has been working with React and has historically avoided Angular’s OOP boilerplate, but finally decided to take a look at how things are going on the other side of the fence.

Starting with my biggest pain point: boilerplate. I quickly discovered that just looking at Angular code snippets does not do justice to the work its CLI puts into handling that complexity. It defines naming conventions, folder structures, creates files, and manages required imports. Part of what can be considered boilerplate is also related to project structure, and becoming more familiar with MVC helps in dealing with the mental model of OOP-based programming languages. This makes Angular feel well structured and predictable, which is probably why it is often deemed an enterprise framework suited for large organizations.

Over the last few years, Angular has also been shifting toward a more approachable development experience, with its relatively recent move to standalone components as the default, and toward a much more performant framework with the adoption of a signal-based architecture, a path that the React team unfortunately has explicitly chosen not to pursue.

At the end of the day, both React and Angular will remain, at least for a while, the two most popular front-end frameworks, so it is only wise to be familiar with both.

Key Philosophical Differences

Aspect	React	Angular
Language	JavaScript or TypeScript	TypeScript
Paradigm	Functional, UI/State/Logic coupled	Object-oriented, MVC-like
Templates	JSX (JavaScript Syntax Extension)	HTML templates + directives
State	Immutable updates (useState)	Mutable class properties
Data Flow	Unidirectional (parent to child)	Two-way binding
Rendering	DOM + Virtual DOM (diff algorithm)	DOM with change detection (Zone.js or signals)
Philosophy	Minimal, "library"	Complete framework

TL;DR

Links	React Concept	Angular Equivalent
⬇️	`useState`	Component properties / signals
⬇️	`useEffect`	Lifecycle hooks (`ngOnInit`, `ngOnDestroy`) / `effect()`
⬇️	Data fetching (`useEffect`/`fetch()`/`useState`)	`HttpClient`/`effect()`
⬇️	Props (data / callbacks )	`@Input()` `@Output()` / signal input output
⬇️	Context API	@Injectable Service (singleton via DI)
⬇️	CSS Modules	View Encapsulation
⬇️	Conditional rendering (`&&`, `?:`)	`*ngIf` / `@if`
⬇️	Lists / keys (`.map` + `key`)	`*ngFor` + `trackBy` / `@for`
⬇️	Inline style objects	`[style]` / `[ngStyle]` / computed signal objects
⬇️	Two-way binding (`value` + `onChange`)	`[(ngModel)]` / reactive forms

State Management

One of the key aspects of modern frameworks is how they handle state and changes to that state in order to display dynamic, up-to-date content.

In React, state updates are expected to be immutable so React can detect changes via reference comparison. Updating state variables directly does not trigger re-renders, so state is managed through hooks such as useState.

In Angular, component properties can be mutated directly. Change detection is handled by the framework, or, when using signals, by precise reactive updates.

React - useState

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => setCount((val) => val + 1);
  const decrement = () => setCount((val) => val - 1);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </div>
  );
}

Angular - Class Properties

export class CounterComponent {
  count = 0;

  increment() {
    this.count++;
  }

  decrement() {
    this.count--;
  }
}

Signals (Angular 16+)

export class CounterComponent {
  count = signal(0);

  increment() {
    this.count.update((val) => val + 1);
  }

  decrement() {
    this.count.update((val) => val - 1);
  }
}

<div>
  <p>Count: {{ count() }}</p>
  <button (click)="increment()">+</button>
  <button (click)="decrement()">-</button>
</div>

Lifecycle

Another key aspect of modern frameworks is how they manage a component’s lifecycle, from creation to updates and eventual cleanup.

In React, the lifecycle is driven by rendering and re-rendering. Side effects are handled through hooks such as useEffect, which run in response to render cycles and dependency changes, and cleanup logic is defined within those effects.

In Angular, the lifecycle has traditionally been explicit and structured, with well-defined hooks such as ngOnInit, ngOnChanges, and ngOnDestroy, called by the framework at specific moments. With the introduction of signals and effect(), Angular also supports a more reactive, render-adjacent model, where side effects run automatically in response to state changes rather than fixed lifecycle phases.

React - useEffect

function Component() {
  useEffect(() => {
    // Run on mount
    console.log("Mounted");

    // Cleanup function on return
    return () => {
      console.log("Unmounting");
    };

    // Re-run when dependency changes
  }, [dependency]);
  // No dependecy in array, runs just once
  // No array as second parameter, re-run every time

  return <div>Render</div>;
}

Angular

Lifecycle hooks

@Component({ template: `<div>Render</div>` })
export class Component implements OnInit, OnDestroy, OnChanges {
  ngOnInit() {
    console.log("Mounted");
  }

  ngOnChanges(changes: SimpleChanges) {
    console.log("Updated", changes);
  }

  ngOnDestroy() {
    console.log("Unmounting");
  }
}

Effect (Angular 17+)

@Component({ template: `<div>{{ count() }}</div>` })
export class Component {
  constructor() {
    // Run on mount and on updates
    effect((onCleanup) => {
      console.log("Mounted");

      // Cleanup function on return
      onCleanup(() => console.log("Cleaning up effect"));
    });

    afterNextRender(() => {
      console.log("DOM ready");
    });
  }
}

Data Fetching

In React, data fetching is commonly performed using the Fetch API, or some other library, inside useEffect and data is then stored in a state using useState.

In Angular, data fetching is typically handled in services using HttpClient, often triggered from lifecycle hooks such as ngOnInit. With signals and effect(), Angular also supports a reactive model where data updates propagate without relying on lifecycle hooks.

React - useEffect + fetch() + useState

function User() {
  const [user, setUser] = React.useState(null);

  React.useEffect(() => {
    fetch("/api/user")
      .then((res) => res.json())
      .then((data) => setUser(data));
  }, []);

  return <div>{user?.name}</div>;
}

Angular

HttpClient + lifecycle (ngOnInit)

@Component({
  selector: "app-user",
  template: "{{ user?.name }}",
})
export class UserComponent implements OnInit {
  user: any;

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.http.get("/api/user").subscribe((data) => {
      this.user = data;
    });
  }
}

HttpClient + signal + effect (Angular 17+)

@Component({
  selector: "app-user",
  template: "{{ user()?.name }}",
})
export class UserComponent {
  user = signal<any>(null);

  constructor(private http: HttpClient) {
    effect(() => {
      this.http.get("/api/user").subscribe((data) => {
        this.user.set(data);
      });
    });
  }
}

Global and Shared State

Another key aspect of modern frameworks is how state that must be shared across multiple, unrelated components is handled.

In React, global state is commonly managed via the Context API, often combined with useReducer or external libraries that help optimize and structure state management.

In Angular, shared state is typically handled via services, which are singletons by default and can be injected where needed, or via signals that act as reactive global stores.

React – Context API

import { createContext, useContext, useState } from "react";

const ThemeContext = createContext<"light" | "dark">("light");

function ThemeProvider({ children }: { children: React.ReactNode }) {
  const [theme, setTheme] = useState<"light" | "dark">("light");

  return (
    <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>
  );
}

function App() {
  return (
    <ThemeProvider value="light">
      <MyComponent />
    </ThemeProvider>
  );
}

function MyComponent() {
  const theme = useContext(ThemeContext);

  return <div>Current theme: {theme}</div>;
}

Angular – Services (Singleton State)

import { Injectable } from "@angular/core";

@Injectable({ providedIn: "root" })
export class ThemeService {
  theme: "light" | "dark" = "light";
}

import { Component } from "@angular/core";
import { ThemeService } from "./theme.service";

@Component({
  selector: "app-my-component",
  template: `<div>Current theme: {{ themeService.theme }}</div>`,
})
export class MyComponent {
  constructor(public themeService: ThemeService) {}
}

Signals (Angular 16+)

import { Injectable, signal } from "@angular/core";

@Injectable({ providedIn: "root" })
export class ThemeService {
  theme = signal<"light" | "dark">("light");

  toggle() {
    this.theme.update((t) => (t === "light" ? "dark" : "light"));
  }
}

@Component({
  selector: "app-my-component",
  template: `<div>Current theme: {{ themeService.theme() }}</div>`,
})
export class MyComponent {
  constructor(public themeService: ThemeService) {}
}

CSS Scoping

Modern frameworks have ways to deal with style encapsulation to avoid conflicting CSS class names and selectors overwriting each other across unrelated components.

React has no built-in CSS scoping but achieves it through its ecosystem. The common approach is creating custom class names to prevent conflicts. CSS cascading is not affected (child components also receive the parent's styles).

Angular creates a custom attribute selector to apply the styles to. CSS cascading is affected (child components do not receive the parent's styles).

React - CSS Modules

function MyComponent() {
  return <div className={styles.container} />;
}

<div class="container_a3f2b"></div>

Angular - View Encapsulation

@Component({
  selector: "app-my-component",
  template: `<div class="container"></div>`,
  styles: [
    `
      .container {
        color: blue;
      }
    `,
  ],
})
export class MyComponent {}

<div class="container" _ngcontent-abc-123></div>

.container[_ngcontent-abc-123] {
  color: blue;
}

Style Binding

fontSize is a static value while width and backgroundColor are dynamic values.

React - Style Objects

function MyButton() {
  const [width, setWidth] = useState(200);
  const [isActive, setIsActive] = useState(true);

  const buttonStyles = {
    fontSize: "16px",
    width: `${width}px`,
    backgroundColor: isActive ? "green" : "teal",
  };

  return <button style={buttonStyles}>Click</button>;
}

Angular - Property Binding

Individual style properties:

export class MyButtonComponent {
  width = 200;
  isActive = true;
}

<button
  style="font-size: 16px;"
  [style.width.px]="width"
  [style.background-color]="isActive ? 'green' : 'teal'"
>
  Click
</button>

Or with ngStyle for multiple styles:

export class MyButtonComponent {
  width = 200;
  isActive = true;

  get buttonStyles(): Partial<CSSStyleDeclaration> {
    return {
      fontSize: "16px",
      width: this.width + "px",
      backgroundColor: this.isActive ? "green" : "teal",
    };
  }
}

Signals (Angular 16+)

export class MyButtonComponent {
  width = signal(200);
  isActive = signal(true);

  buttonStyles = computed<Partial<CSSStyleDeclaration>>(() => ({
    fontSize: "16px",
    width: this.width() + "px",
    backgroundColor: this.isActive() ? "green" : "teal",
  }));
}

<button [ngStyle]="buttonStyles">Click</button>

Class Binding

btn is a class statically applied to the button while active and primary are dynamically applied.

React - String Manipulation

function MyButton() {
  const [isActive, setIsActive] = useState(true);
  const [isPrimary, setIsPrimary] = useState(false);

  return (
    <button
      className={`btn ${isActive ? "active" : ""} ${
        isPrimary ? "primary" : ""
      }`}
    >
      Click
    </button>
  );
}

Angular - Boolean Binding

export class MyButtonComponent {
  isActive = true;
  isPrimary = false;
}

<button class="btn" [class.active]="isActive" [class.primary]="isPrimary">
  Click
</button>

Or with ngClass for multiple classes:

export class MyButtonComponent {
  isActive = true;
  isPrimary = false;

  get btnClasses() {
    return {
      btn: true,
      active: this.isActive,
      primary: this.isPrimary,
    };
  }
}

Signals (Angular 16+)

export class MyButtonComponent {
  isActive = signal(true);
  isPrimary = signal(false);

  btnClasses = computed(() => ({
    btn: true,
    active: this.isActive(),
    primary: this.isPrimary(),
  }));
}

<button [ngClass]="btnClasses">Click</button>

Conditional Rendering

React - Logical Operators (AND and Ternary)

function MyComponent() {
  const [isVisible, setIsVisible] = useState(true);
  const [user, setUser] = useState({ name: "John" });

  return (
    <div>
      {isVisible && <p>This is visible</p>}

      {user ? <p>Hello, {user.name}</p> : <p>Please log in</p>}
    </div>
  );
}

Angular - Structural Directives (Angular 16-)

export class MyComponent {
  isVisible = true;
  user = { name: "John" };
}

<div>
  <p *ngIf="isVisible">This is visible</p>

  <p *ngIf="user; else noUser">Hello, {{ user.name }}</p>
  <ng-template #noUser>
    <p>Please log in</p>
  </ng-template>
</div>

Angular - Control Flow (Angular 17+)

<div>
  @if (isVisible) {
  <p>This is visible</p>
  } @if (user) {
  <p>Hello, {{ user.name }}</p>
  } @else {
  <p>Please log in</p>
  }
</div>

Lists and Loops

React uses key to help optimize list updates while Angular uses track.

React - Array.map()

function MyComponent() {
  const [items, setItems] = useState([
    { id: 1, name: "Apple" },
    { id: 2, name: "Banana" },
    { id: 3, name: "Orange" },
  ]);

  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

Angular - ngFor (Angular 16-)

export class MyComponent {
  items = [
    { id: 1, name: "Apple" },
    { id: 2, name: "Banana" },
    { id: 3, name: "Orange" },
  ];

  trackById(index: number, item: any): number {
    return item.id;
  }
}

<ul>
  <li *ngFor="let item of items; trackBy: trackById">{{ item.name }}</li>
</ul>

Angular - `@for` (Angular 17+)

<ul>
  @for (item of items; track item.id) {
  <li>{{ item.name }}</li>
  }
</ul>

Event Handling

React - Event Binding

In React, an input is considered uncontrolled when its value is accessed via a ref rather than being bound to component state.

function MyComponent() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
  };

  const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => {
    console.log(e.target.value);
  };

  return (
    <div>
      <button onClick={handleClick}>Count: {count}</button>
      <input onChange={handleInput} />
    </div>
  );
}

React - Controlled Components

function MyComponent() {
  const [inputValue, setInputValue] = useState("");

  return (
    <input value={inputValue} onChange={(e) => setInputValue(e.target.value)} />
  );
}

Angular - Event Binding

export class MyComponent {
  count = 0;

  handleClick() {
    this.count++;
  }

  handleInput(event: Event) {
    const value = (event.target as HTMLInputElement).value;
    console.log(value);
  }
}

<div>
  <button (click)="handleClick()">Count: {{ count }}</button>
  <input (input)="handleInput($event)" />
</div>

Angular - Two-Way Binding

export class MyComponent {
  inputValue = "";
}

<!-- NgModel (requires FormsModule) -->
<input [(ngModel)]="inputValue" />

<!-- Or manually with property + event binding -->
<input [value]="inputValue" (input)="inputValue = $any($event.target).value" />

Angular - Reactive Forms

Requires ReactiveFormsModule

import { Component } from "@angular/core";
import { FormControl, FormGroup, Validators } from "@angular/forms";

@Component({
  selector: "app-login",
  templateUrl: "./login.component.html",
})
export class LoginComponent {
  form = new FormGroup({
    email: new FormControl("", {
      nonNullable: true,
      validators: [Validators.required, Validators.email],
    }),
    password: new FormControl("", {
      nonNullable: true,
      validators: Validators.required,
    }),
  });

  submit() {
    if (this.form.valid) {
      console.log(this.form.value);
    }
  }
}

<form [formGroup]="form" (ngSubmit)="submit()">
  <input type="email" formControlName="email" />
  <input type="password" formControlName="password" />

  <button type="submit" [disabled]="form.invalid">Submit</button>
</form>

Parent Child Communication

React - Props and Callbacks

// Parent Component
function ParentComponent() {
  const [count, setCount] = useState(5);

  const handleIncrement = () => {
    setCount((prev) => prev + 1);
  };

  return (
    <ChildComponent title="Hello" count={count} onIncrement={handleIncrement} />
  );
}

// Child Component
interface ChildProps {
  title: string;
  count: number;
  onIncrement: () => void;
}

function ChildComponent({ title, count, onIncrement }: ChildProps) {
  return (
    <div>
      <h1>{title}</h1>
      <p>Count: {count}</p>
      <button onClick={onIncrement}>Increment</button>
    </div>
  );
}

Angular - Inputs and Outputs (Angular 16-)

// Parent Component
@Component({
  selector: "app-parent",
  template:
    '<app-child title="Hello" [count]="count" (increment)="handleIncrement()"></app-child>',
})
export class ParentComponent {
  count = 5;

  handleIncrement() {
    this.count++;
  }
}

// Child Component
@Component({
  selector: "app-child",
  template: `
    <div>
      <h1>{{ title }}</h1>
      <p>Count: {{ count }}</p>
      <button (click)="onIncrement()">Increment</button>
    </div>
  `,
})
export class ChildComponent {
  @Input() title!: string;
  @Input() count!: number;
  @Output() increment = new EventEmitter<void>();

  onIncrement() {
    this.increment.emit();
  }
}

Angular - Signal Inputs and Outputs (Angular 17+)

// Child Component
@Component({
  selector: "app-child",
  template: `
    <div>
      <h1>{{ title() }}</h1>
      <p>Count: {{ count() }}</p>
      <button (click)="onIncrement()">Increment</button>
    </div>
  `,
})
export class ChildComponent {
  title = input.required<string>();
  count = input.required<number>();
  increment = output<void>();

  onIncrement() {
    this.increment.emit();
  }
}

Computed / Derived Values

While React's useMemo and Angular’s computed() can be compared, they are not equivalent.

useMemo is a performance optimization and does not provide reactive guarantees.
computed() creates a declarative reactive value that automatically updates when its dependencies change.

React - Derived State

function ShoppingCart() {
  const [items, setItems] = useState([
    { name: "Apple", price: 1.5, quantity: 3 },
    { name: "Banana", price: 0.8, quantity: 5 },
  ]);

  const total = useMemo(() => {
    return items.reduce((sum, item) => sum + item.price * item.quantity, 0);
  }, [items]);

  return <p>Total: ${total.toFixed(2)}</p>;
}

Angular - Getter Methods (Angular 15-)

export class ShoppingCartComponent {
  items = [
    { name: "Apple", price: 1.5, quantity: 3 },
    { name: "Banana", price: 0.8, quantity: 5 },
  ];

  get total(): number {
    return this.items.reduce(
      (sum, item) => sum + item.price * item.quantity,
      0
    );
  }
}

<p>Total: ${{ total | number:'1.2-2' }}</p>

Angular - Computed Signals (Angular 16+)

export class ShoppingCartComponent {
  items = signal([
    { name: "Apple", price: 1.5, quantity: 3 },
    { name: "Banana", price: 0.8, quantity: 5 },
  ]);

  total = computed(() => {
    return this.items().reduce(
      (sum, item) => sum + item.price * item.quantity,
      0
    );
  });
}

<p>Total: ${{ total() | number:'1.2-2' }}</p>

I must confess, I’m actually enjoying learning Angular after having stayed away from it for so long. I guess the next step will be the loved/hated RxJS.

Leave a comment if this article sparked your interest in Angular or React, or if you think it can be improved.

And you, what side of the fence are you on? React or Angular?

I just published my first dev article! While working on a React Native project, I couldn’t find a good guide on setting up push notifications with Expo and Firebase, so I decided to write one myself.

Guilherme Toledo — Mon, 26 May 2025 21:50:58 +0000

Guilherme Toledo

May 26 '25

A quick guide to push notifications with expo-notifications and Firebase

#reactnative #expo #firebase #javascript

Comments 11

7 min read

A quick guide to push notifications with expo-notifications and Firebase

Guilherme Toledo — Mon, 26 May 2025 21:20:24 +0000

These days I had to implement push notifications, and since I really like the direction Expo is going, I decided to lean more into its ecosystem, so I chose to use expo-notifications to implement the feature. To my surprise, I couldn't find any good guides on how to do it. Expo has a guide on how to set it up through their proprietary services, which I decided not to use to avoid the feeling of being platform-locked. Personally, the biggest benefit of Expo is keeping the manual implementation and management of native code to a minimum, as the longer a project lives, the harder it becomes to keep track of changes in different files for numerous libraries. So we will leverage Expo's strengths using expo-notifications to set up pretty much all the native code and handle push notifications in the foreground while using Firebase Messaging to listen to notification events coming from Firebase and handle notifications in the background.

npx expo install expo-notifications @react-native-firebase/app @react-native-firebase/messaging

Here we configure Google Services and push notifications.
The path to the files and defaultChannel are my preference and can be changed.
If enableBackgroundRemoteNotifications is set to true, the needed permissions to handle background messages (when the app is open but not in focus or the app is closed/killed) will be set.

app.json

{
  "expo": {
    "ios": {
      "googleServicesFile": "./assets/GoogleService-Info.plist"
    }
    "android": {
      "googleServicesFile": "./assets/google-services.json"
    }
  }
  "plugins": [
    [
      "expo-notifications",
      {
        "icon": "./assets/icon.png",
        "color": "#002d2d",
        "defaultChannel": "default",
        "enableBackgroundRemoteNotifications": true
      }
    ],
    "@react-native-firebase/app",
    "@react-native-firebase/messaging",
  ]
}

 npx expo prebuild

You can see that all the Android adaptive icons for notifications have been created, and the required native implementations and permissions are set.
But nothing is perfect. In this case, you're probably going to get an error if you try to build. Both expo-notifications and @react-native-firebase/messaging are trying to set the Android values for notifications, and we'll have to resolve it manually by overriding the values of com.google.firebase.messaging.

android/app/src/main/AndroidManifest.xml

- <meta-data android:name="com.google.firebase.messaging.default_notification_channel_id" android:value="default" />
+ <meta-data android:name="com.google.firebase.messaging.default_notification_channel_id" android:value="default" tools:replace="android:value"/>

- <meta-data android:name="com.google.firebase.messaging.default_notification_color" android:resource="@color/notification_icon_color" />
+ <meta-data android:name="com.google.firebase.messaging.default_notification_color" android:resource="@color/notification_icon_color" tools:replace="android:resource"/>

- <meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@drawable/notification_icon" />
+ <meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@drawable/notification_icon" tools:replace="android:resource"/>

Now we are going to create and use Expo config plugins to apply this fix in a more robust and permanent manner since Expo Continuous Native Generation (CNG) cannot guarantee the persistence of native changes done manually. If you do not want to deal with this right now, feel free to skip this section. Check the config plugins docs for more information.

plugins / withNotificationAndroidPlugin.ts;

/**
 * This plugin fixes the conflict between expo-notifications and @react-native-firebase/messaging for Android while maintaining CNG support.
 *
 * @see <https://dev.to/totoledao/a-quick-guide-to-push-notifications-with-expo-notifications-and-firebase-3lf4>
 * @see <https://github.com/invertase/react-native-firebase/blob/3d0d497f5a00444c8b3b4a6161e02d09c64cb1a2/packages/messaging/plugin/src/android/setupFirebaseNotifationIcon.ts#L13>
 */
import { ConfigPlugin, withAndroidManifest } from "expo/config-plugins";

export const withNotificationAndroidPlugin: ConfigPlugin = (config) => {
  return withAndroidManifest(config, (config) => {
    const application = config.modResults.manifest.application![0];
    // make sure it's not undefined
    application["meta-data"] ??= [];
    const metaData = application["meta-data"];

    // Check if the entry already exists to prevent duplicating it
    const existingAndroidEntry = (name: string) =>
      metaData.find((item) => item.$["android:name"] === name);

    if (
      !existingAndroidEntry(
        "com.google.firebase.messaging.default_notification_channel_id",
      )
    ) {
      metaData.push({
        $: {
          "android:name":
            "com.google.firebase.messaging.default_notification_channel_id",
          "android:value": "default",
          // @ts-ignore
          "tools:replace": "android:value",
        },
      });
    }

    if (
      !existingAndroidEntry(
        "com.google.firebase.messaging.default_notification_color",
      )
    ) {
      metaData.push({
        $: {
          "android:name":
            "com.google.firebase.messaging.default_notification_color",
          "android:resource": "@color/notification_icon_color",
          // @ts-ignore
          "tools:replace": "android:resource",
        },
      });
    }

    if (
      !existingAndroidEntry(
        "com.google.firebase.messaging.default_notification_icon",
      )
    ) {
      metaData.push({
        $: {
          "android:name":
            "com.google.firebase.messaging.default_notification_icon",
          "android:resource": "@drawable/notification_icon",
          // @ts-ignore
          "tools:replace": "android:resource",
        },
      });
    }

    return config;
  });
};

plugins / withPlugin.ts;

import { ConfigPlugin } from "expo/config-plugins";
import { withNotificationAndroidPlugin } from "./withNotificationAndroidPlugin";

const withPlugin: ConfigPlugin = (config) => {
  // example to apply multiple configs
  // config = withAndroidPlugin(config);
  // return withIosPlugin(config);

  // Android notificaiton fix
  return withNotificationAndroidPlugin(config);
};

export default withPlugin;

Expo recommends using TS, so we need a parser for the new config file in our project.
If you decided to use JS for the configs you can skip this install.

npm install --save-dev tsx

app.config.ts;

import "tsx/cjs";

import { ExpoConfig } from "expo/config";

module.exports = ({ config }: { config: ExpoConfig }) => ({
  ...config,
  plugins: [...(config.plugins || []), ["./plugins/withPlugin.ts"]],
});

 npx expo prebuild --clean

Now we can build and run the app.

 npm run android

You can test `@react-native-firebase/messaging` push notifications on real Android and iOS devices or Android emulators.

We will now configure our app to start listening to the messages sent from Firebase. When in the background (app not in focus or closed), the OS will automatically handle the notifications for us, so we need to grant the necessary permissions to allow the OS to display push notifications.

import { getMessaging } from "@react-native-firebase/messaging";
import { PermissionsAndroid } from "react-native";

// Get a Firebase Messaging service instance
const messaging = getMessaging();

//IOS Permission
await messaging.requestPermission();
//Android Permission
await PermissionsAndroid.request(
  PermissionsAndroid.PERMISSIONS.POST_NOTIFICATIONS,
);

// Subscribe to receive events from Firebase messaging service
await messaging.registerDeviceForRemoteMessages();
// Get a FCM token for the device
const pushToken = await messaging.getToken();
// You probably would like save the token in a database
console.log("Firebase Token:", pushToken);

You can send messages from the Firebase console at
Execute > Messaging > New Campaign > Notifications > Send a test message

We already have a basic notification system working, but as a design choice, Firebase Messaging does not automatically handle messages when the app is in the foreground (open, being used), since we wouldn't necessarily want to show a push notification if the user is already using the app. In my use case, I would like to show the push notification, so we can create an event listener to handle messages when the app is in the foreground and use expo-notifications to trigger the OS to display the push notification.

import { getMessaging } from "@react-native-firebase/messaging";
import * as Notifications from "expo-notifications";

// Configure push notification behavior when app is in foreground
Notifications.setNotificationHandler({
  handleNotification: async () => ({
    shouldShowAlert: true,
    shouldPlaySound: true,
    shouldSetBadge: false,
    shouldShowBanner: true,
    shouldShowList: true,
  }),
});

// Trigger notification at same moment
async function schedulePushNotification({
  title = "New message",
  body = "You have a new message!",
  data = {},
}) {
  await Notifications.scheduleNotificationAsync({
    content: {
      title,
      body,
      data,
    },
    trigger: null,
  });
}

// Get a Firebase Messaging service instance
const messaging = getMessaging();

useEffect(() => {
  // Handle foreground messages and returns the cleanup function
  const unsubscribeForeground = messaging.onMessage(async (remoteMessage) => {
    schedulePushNotification({
      title: remoteMessage?.notification?.title,
      body: remoteMessage?.notification?.body,
      data: remoteMessage?.data || {},
    });
  });

  return () => {
    // Clean the resources used for the listener
    unsubscribeForeground();
  };
}, []);

If you want to control how notifications interact with your app when opened by clicking on them, for example redirecting to a specific screen, you can create a listener for this type of event as well.

useEffect(() => {
  // Handle app opening from a background messages and returns the cleanup function
  const unsubscribeBackground = messaging.onNotificationOpenedApp(
    // Handle navigation or app state changes
    (remoteMessage) => {
      console.log("Background message opened:", remoteMessage);
    },
  );

  return () => {
    // Clean the resources used for the listener
    unsubscribeBackground();
  };
}, []);

So, for the complete implementation, I created a hook in a separate file to keep the code clean and call it to register the device and save the token to a DB. I save the token on the back end along with the device ID to update the token when it is refreshed or when the app is reinstalled on the same device. Since data is being saved to the DB, for security reasons, I also use a bearer token as a form of authentication.

import { getMessaging } from "@react-native-firebase/messaging";
import * as Notifications from "expo-notifications";
import { useEffect } from "react";
import { PermissionsAndroid, Platform } from "react-native";
import { getUniqueIdSync } from "react-native-device-info";

import { postPushNotification } from "../services/services";

// Configure push notification behavior when app is in foreground
Notifications.setNotificationHandler({
  handleNotification: async () => ({
    shouldShowAlert: true,
    shouldPlaySound: true,
    shouldSetBadge: false,
    shouldShowBanner: true,
    shouldShowList: true,
  }),
});

// Trigger notification
async function schedulePushNotification({
  title = "New message",
  body = "You have a new message!",
  data = {},
}) {
  await Notifications.scheduleNotificationAsync({
    content: {
      title,
      body,
      data,
    },
    trigger: null,
  });
}

// Configure push notification
export function useConfigPushNotification() {
  // Firebase messaging service instance
  const messaging = getMessaging();
  const deviceId = getUniqueIdSync();
  const platform = Platform.OS;

  /**
   * Handle permissions, register device in Firebase and save token in back end
   * @param {string} bearerToken
   */
  async function register(bearerToken) {
    // IOS permission
    await messaging.requestPermission();
    // Android permission
    await PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.POST_NOTIFICATIONS,
    );

    // Register device
    await messaging.registerDeviceForRemoteMessages();
    const pushToken = await messaging.getToken();

    // Save token in back end
    try {
      await postPushNotification(bearerToken, platform, pushToken, deviceId);
    } catch (err) {
      console.log(err?.response);
    }
  }

  useEffect(() => {
    // Handle foreground messages and returns the cleanup function
    const unsubscribeForeground = messaging.onMessage(async (remoteMessage) => {
      schedulePushNotification({
        title: remoteMessage?.notification?.title,
        body: remoteMessage?.notification?.body,
        data: remoteMessage?.data || {},
      });
    });

    // Handle app opening from a background messages and returns the cleanup function
    const unsubscribeBackground = messaging.onNotificationOpenedApp(
      // Background message pop up is handled automatically
      // Handle navigation or app state changes
      (remoteMessage) => {
        console.log("Background message opened:", remoteMessage);
      },
    );

    return () => {
      unsubscribeForeground();
      unsubscribeBackground();
    };
  }, []);

  return { register };
}

And finally, call the hook to handle the configurations.

const { register } = useConfigPushNotification();

// Config Push Notifications
try {
  await register("bearer_token");
} catch (err) {
  console.log(err);
}

I hope this guide helps you (and my future self) set up push notifications using Expo and Firebase!
Let me know if you have any questions or if there's anything that could be improved.

DEV Community: Guilherme Toledo

React and Angular: Common Patterns Comparison

Key Philosophical Differences

TL;DR

State Management

React - useState

Angular - Class Properties

Lifecycle

React - useEffect

Angular

Data Fetching

React - useEffect + fetch() + useState

Angular

Global and Shared State

React – Context API

Angular – Services (Singleton State)

CSS Scoping

React - CSS Modules

Angular - View Encapsulation

Style Binding

React - Style Objects

Angular - Property Binding

Class Binding

React - String Manipulation

Angular - Boolean Binding

Conditional Rendering

React - Logical Operators (AND and Ternary)

Angular - Structural Directives (Angular 16-)

Angular - Control Flow (Angular 17+)

Lists and Loops

React - Array.map()

Angular - ngFor (Angular 16-)

Angular - @for (Angular 17+)

Event Handling

React - Event Binding

React - Controlled Components

Angular - Event Binding

Angular - Two-Way Binding

Angular - Reactive Forms

Parent Child Communication

React - Props and Callbacks

Angular - Inputs and Outputs (Angular 16-)

Angular - Signal Inputs and Outputs (Angular 17+)

Computed / Derived Values

React - Derived State

Angular - Getter Methods (Angular 15-)

Angular - Computed Signals (Angular 16+)

I just published my first dev article! While working on a React Native project, I couldn’t find a good guide on setting up push notifications with Expo and Firebase, so I decided to write one myself.

A quick guide to push notifications with expo-notifications and Firebase

A quick guide to push notifications with expo-notifications and Firebase

Now we can build and run the app.

You can test @react-native-firebase/messaging push notifications on real Android and iOS devices or Android emulators.

You can send messages from the Firebase console atExecute > Messaging > New Campaign > Notifications > Send a test message

Angular - `@for` (Angular 17+)

You can test `@react-native-firebase/messaging` push notifications on real Android and iOS devices or Android emulators.

You can send messages from the Firebase console at
Execute > Messaging > New Campaign > Notifications > Send a test message