Forem: haider mukhtar

Stop Typing JSON Manually: The VS Code Extension That Makes TypeScript Fast ⚡

haider mukhtar — Thu, 30 Oct 2025 07:34:02 +0000

If you work with React, React Native, or any large-scale TypeScript project, you understand that strong typing is mandatory for maintainability and preventing bugs.

But every time your application talks to an API, you hit the same bottleneck: converting a complex, deeply-nested JSON response into a set of structured TypeScript interfaces. Manually translating raw API payloads into types like IUserProfile, IResourceArray, and nested sub-interfaces is tedious, slow, and prone to human error—slowing down feature development.

This is where the JSON to TS VS Code extension by MariusAlchimavicius steps in as a critical velocity multiplier. With over 720,000 installs, it’s the definitive solution to instantly translate chaotic JSON into clean, reusable TypeScript code, eliminating manual transcription entirely.

✨ Instant Interfaces: The High-Speed Workflow
The power of this extension lies in its lack of friction. You never leave your editor, turning a multi-minute task into a quick keyboard command.

⬇️ Installation

Search the VS Code Extensions: Marketplace for “JSON to TS” or use the unique identifier MariusAlchimavicius.json-to-ts.

⌨️ How to Use: Two Essential Shortcuts

The extension is designed around two global keyboard commands, allowing you to generate interfaces exactly where you need them:

From Clipboard (API Responses): 📋

Action: Copy your raw JSON response (from a browser console, Postman, etc.).
Shortcut: Shift + Ctrl +Alt +V
Result: The TypeScript interfaces are instantly inserted at your cursor.3

From Selection (Inline JSON): ✍️

Action: Highlight a JSON object directly in your current file.
Shortcut: Shift + Ctrl + Alt + S
Result: The selected JSON is replaced with the generated TypeScript interfaces.3

🧠 The Intelligence: Why This Tool Is So Good for React/RN

The extension doesn’t just convert strings to types; it intelligently structures the code for long-term use in component-based frameworks. This intelligence is crucial for complex data consumed by React state and component props.

Array Type Merging (The “Huge Deal”): 📐 The most common problem with API data is that arrays of objects are often inconsistent (e.g., one item has an optional field, the next doesn’t). The converter analyzes all objects in an array and merges them into a single, clean, normalized interface. This feature ensures you only generate one reusable type for your data: IItem and eliminates the need for manual cleanup.
Optional and Union Types: ❓ It correctly infers optional properties by adding the ? modifier to fields that are sometimes missing. It can also generate union types (e.g., field: string | null or status: string | number) to handle polymorphic or sparse data.

✅ Conclusion: Faster Component Development

For modern React and React Native development, typing is often the bottleneck. By instantly generating normalized interfaces, the JSON to TS extension provides immediate type safety for your custom data fetching hooks and component props.

You eliminate hours of manual transcription and debugging, allowing you to focus purely on business logic. This tool is not a luxury; it is an essential productivity multiplier that directly translates to faster feature delivery and higher quality, type-safe code.

📬 Stay Connected

Want more React Native tutorials and tips?

🌐 Website: haidermukhtar.vercel.app
💼 LinkedIn: Haider Mukhtar
🌎 Github: Haider-Mukhtar

Happy Coding! 🚀💻

Migrating to React Native 0.82: Unlocking the Full Power of the New Architecture in Expo Apps

haider mukhtar — Tue, 28 Oct 2025 10:30:39 +0000

As of October 8, 2025, React Native 0.82 has officially landed, marking a pivotal shift in cross-platform mobile development. This release isn’t just another incremental update; it’s the dawn of a “new era” where the New Architecture becomes the default and only option, phasing out legacy systems for good. For Expo users, this means enhanced performance, better tooling, and future-proofing your apps, but it also requires a thoughtful migration strategy. [reactnative.dev]

In this guide, we’ll dive into what’s new in 0.82, why the New Architecture matters (especially for Expo workflows), and a step-by-step migration process drawn from official docs and community insights. Whether you’re building a simple prototype or a production-scale app, upgrading unlocks smoother animations, faster renders, and access to cutting-edge features like React 19 integrations.

What’s New in React Native 0.82?

React Native 0.82 builds on the foundation laid in previous versions, with over 868 commits from 93 contributors. Here’s a breakdown of the headline features:

1. New Architecture as Default:

No more toggling 0.82 enforces the New Architecture, ignoring any disable flags. This refactor addresses long-standing limitations, enabling synchronous execution, better concurrency, and improved native module interactions via Fabric (renderer) and TurboModules (native modules).

2. Experimental Hermes V1:

A major evolution of the Hermes JS engine, offering up to 9% faster bundle loads and 7.6% quicker Time to Interactive (TTI) on Android low-end devices. It’s experimental and requires building from source, but early benchmarks show real-world gains.

3. React 19.1.1 Integration:

Full support for owner stacks in error reporting and fixed behaviors for useDeferredValue and startTransition in Suspense boundaries, aligning React Native more closely with web paradigms.

4. DOM Node APIs:

Refs now expose DOM-like nodes for UI tree traversal, layout measurement, and more think parentNode, getBoundingClientRect(), and text node access.

Other Enhancements:

Canary support for web performance APIs (e.g., performance.now()), an optimized Android debug build variant for smoother dev iterations, and breaking changes like uncaught promise rejections now log errors.

For Expo specifically, 0.82 is available via expo@canary releases, with the upcoming SDK 55 set to include React Native 0.83. If you’re on SDK 54 (which ships with 0.81), it’s the last version supporting the legacy architecture, perfect as a stepping stone.

Understanding the New Architecture

The New Architecture is a ground-up refactor of React Native’s internals, born from years of production learnings at Meta and beyond. It replaces the old bridge-based system with:

Fabric: A new renderer that enables synchronous execution between JS and native, reducing jank and supporting advanced features like concurrent rendering.
TurboModules: On-demand loading of native modules, cutting startup times and allowing typed interfaces for better dev ergonomics.
Codegen: Automated code generation for seamless JS-native interop.

In Expo, this translates to broader compatibility; all expo-* packages support it since SDK 53, and about 75% of SDK 52+ projects on EAS Build already use it. The legacy architecture may be fully removed by late 2025, so migrating now ensures you can leverage new React features like full Suspense support and enhanced styling.

Benefits for Expo Apps

Upgrading isn’t just about compliance; it’s about gains:

Hermes V1 adds another layer, with benchmarks showing 2.5–9% TTI improvements. For Expo users, the managed workflow makes enabling this straightforward, minimizing native code hassles.

Prerequisites for Migration

Before diving in:

Upgrade to a Compatible Version: Start with React Native 0.81 or Expo SDK 54 if you’re not on the New Architecture yet — these are the last to support legacy mode.
Check Dependencies: Run npx expo-doctor@latest to validate compatibility via React Native Directory. Exclude or update incompatible libs (e.g., replace react-native-maps with expo-maps if needed).
Backup Your Project: Git commit or branch before changes.
Expo-Specific: Use SDK 53+ for default New Arch support; for SDK 52, manual config required.

Step-by-Step Migration Guide

Follow these steps to migrate your Expo app to React Native 0.82 with the New Architecture:

Enable New Architecture in Current Version:

In app.json or app.config.js, add “expo”: { “newArchEnabled”: true } (or platform-specific).
Run npx expo prebuild --clean to generate native projects.
Build and test: npx expo run:android or npx expo run:ios (or use EAS: eas build -p all).
Verify functionality; fix any native module issues using interop layers.

Upgrade to React Native 0.82:

Update package.json: Set “react-native”: “0.82.0”.
For Expo, install canary: npm install expo@canary (until SDK 55 releases).
Run npx expo install --fix to align dependencies.
Use the Upgrade Helper tool for diff: https://react-native-community.github.io/upgrade-helper/?from=0.81.0&to=0.82.0.

Handle Breaking Changes:

Update promise handling for new error logging.
Migrate any custom native code to TurboModules/Fabric.
For Hermes V1 (optional): Add resolutions in package.json and configure builds as per the docs.

Test Thoroughly:

Run unit/integration tests.
Profile performance with new APIs.
On iOS/Android emulators, check for jank or crashes.

Deploy and Monitor:

Build with EAS or locally.
Monitor crashes via tools like Sentry, watching for New Arch-specific issues.

If using bare React Native (outside Expo), set flags in gradle.properties (Android) and Podfile.properties.json (iOS).

Common Issues and Troubleshooting

Incompatible Libraries: Use React Native Directory to check; fall back to interop or forks. Common culprits: react-native-fs, react-native-geolocation-service, swap with Expo alternatives.
Build Failures: Update to the latest lib versions; clean caches with npx expo prebuild clean.
Performance Regressions: Rare, but test on low-end devices. Enable Hermes V1 for boosts.
Expo Go Limitations: It only supports the New Arch use development builds for testing.

Report bugs to React Native or Expo repos with minimal repros.

Conclusion

Migrating to React Native 0.82 in Expo is more than an upgrade; it’s an investment in faster, more reliable apps. By enforcing the New Architecture, this release paves the way for innovation while shedding legacy baggage. Start with SDK 54 if needed, enable the New Arch, and leverage canary for 0.82 today. Your users (and your dev team) will thank you.

Have questions or hit a snag? Drop a comment below, I’d love to hear your migration stories! For more, check the official RN blog and Expo docs. 🚀

📬 Stay Connected

Want more React Native tutorials and tips?

🌐 Website: haidermukhtar.vercel.app
💼 LinkedIn: Haider Mukhtar
🌎 Github: Haider-Mukhtar

Happy Coding! 🚀💻

Interactive Resizable Split View in React Native

haider mukhtar — Thu, 02 Oct 2025 05:47:06 +0000

In modern mobile UI development, responsive layouts help make an app feel vibrant and alive. Static screens can feel rigid, but interactive layouts that adapt dynamically to user input create a noticeable sense of control and polish. This guide walks you through building an interactive, resizable split-screen view in React Native using popular libraries such as React Native Reanimated and Gesture Handler.

✨ Why Micro-animations Matter:

Micro-animations are small, functional animations that make a big difference in user experience:

Provide Feedback: Instantly Confirm User Actions.
Guide the User: Direct attention and maintain spatial awareness.
Add Polish: Make the UI feel crafted and deliberate. These animations only truly shine when paired with a consistent, well-designed UI foundation. Even the best animations can’t elevate an unpolished interface.

🏗️ Setting Up the Layout:

The screen splits into two sections: a top and a bottom pane. Using React Native Reanimated’s sharedValue,The height of the top section changes dynamically as the user drags a divider. Shared values update on the UI thread smoothly, without triggering costly re-renders.

const HEADER_HEIGHT = 60;
const MIN_SECTION_HEIGHT = 100;
const MAX_TOP_SECTION_HEIGHT = SCREEN_HEIGHT * 0.7;
const DEFAULT_TOP_SECTION_HEIGHT = SCREEN_HEIGHT * 0.45;

export default function Index() {
  const topSectionHeight = useSharedValue(DEFAULT_TOP_SECTION_HEIGHT);

  const topSectionAnimatedStyle = useAnimatedStyle(() => ({
    height: topSectionHeight.value,
  }));

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <SafeAreaView style={styles.container}>

        {/* Top Section - Resizable */}
        <Animated.View style={[styles.topSection, topSectionAnimatedStyle]}>
        </Animated.View>

        {/* Bottom Section - Auto-adjusting */}
        <View style={styles.bottomSection}>
        </View>

      </SafeAreaView>
    </GestureHandlerRootView>
  )
};

✋ Draggable with Gesture Handler:

Using the powerful gesture system from React Native Gesture Handler:

onStart records the starting height of the top section.
onStart records the starting height of the top section.
onUpdate adjusts the height dynamically, clamping it within min and max bounds to keep the UI stable.
onEnd snaps the height to the closest preset point (minimum, default, or maximum height) to optimize usability and predictability.

const ANIMATION_CONFIG = { damping: 25, stiffness: 300, mass: 0.8 };
const VELOCITY_THRESHOLD = 800;

const startY = useSharedValue(0);
const isDragging = useSharedValue(false);

const panGesture = Gesture.Pan()
  .onStart(() => {
    startY.value = topSectionHeight.value;
    isDragging.value = true;
  })
  .onUpdate((event) => {
    const newHeight = startY.value + event.translationY;
    topSectionHeight.value = Math.max(
      MIN_SECTION_HEIGHT,
      Math.min(newHeight, MAX_TOP_SECTION_HEIGHT)
    );
  })
  .onEnd((event) => {
    isDragging.value = false;
    const velocity = event.velocityY;
    let targetHeight;

    if (Math.abs(velocity) > VELOCITY_THRESHOLD) {
      targetHeight =
        velocity > 0 ? DEFAULT_TOP_SECTION_HEIGHT : MAX_TOP_SECTION_HEIGHT;
    } else {
      const distances = [
        {
          h: MIN_SECTION_HEIGHT,
          d: Math.abs(topSectionHeight.value - MIN_SECTION_HEIGHT),
        },
        {
          h: DEFAULT_TOP_SECTION_HEIGHT,
          d: Math.abs(topSectionHeight.value - DEFAULT_TOP_SECTION_HEIGHT),
        },
        {
          h: MAX_TOP_SECTION_HEIGHT,
          d: Math.abs(topSectionHeight.value - MAX_TOP_SECTION_HEIGHT),
        },
      ];
      targetHeight = distances.sort((a, b) => a.d - b.d)[0].h;
    }

    topSectionHeight.value = withSpring(targetHeight, ANIMATION_CONFIG);
  });

Subtle handle scaling during drag:

const dragHandleAnimatedStyle = useAnimatedStyle(() => ({
  transform: [
    {
      scale: withSpring(isDragging.value ? 1.2 : 1, ANIMATION_CONFIG),
    },
  ],
}));

const dragHandleContainerAnimatedStyle = useAnimatedStyle(() => ({
  top: topSectionHeight.value - DRAG_HANDLE_HEIGHT / 2,
}));

{/* Drag Handle - Positioned at boundary */}
<GestureDetector gesture={panGesture}>
  <Animated.View
    style={[
      styles.dragHandleContainer,
      dragHandleContainerAnimatedStyle,
    ]}
  >
    <Animated.View
      style={[styles.dragHandle, dragHandleAnimatedStyle]}
    />
  </Animated.View>
</GestureDetector>

📂 Code & GitHub Repository:

Check out the full source code on GitHub for hands-on exploration:

Repo: Interactive-Resizable-Split-View

📄 Key Dependencies:

react-native-reanimated: For shared values and animations.
react-native-gesture-handler: For pan gesture handling.
react-native-safe-area-context: For safe area handling.

🎯 Conclusion:
A resizable split view with smooth, responsive animations enhances your app’s interactivity and polish. Utilizing shared values improves performance, while snap points create predictable, user-friendly behavior. Carefully crafted micro-animations add meaningful feedback, transforming a static UI into one that truly feels alive.

Polishing the core layout and motion together delivers a compelling mobile experience that users appreciate.

🔗 Haider Mukhtar on LinkedIn
🔗 Haider Mukhtar on Bento

Stunning Animated Drawer Navigation in Expo React Native

haider mukhtar — Tue, 23 Sep 2025 11:55:26 +0000

💡 Why I Built This

While React Navigation’s standard drawer works, I wanted to create a visually immersive experience where screens dynamically respond to drawer interactions. The goal? An iOS-style navigation with:

Smooth 3D rotations
Scale/perspective animations
Custom profile integration
Seamless gesture control

🧩 Key Tech Stack

expo-router (File-based routing)
react-native-reanimated (Animations)
@react-navigation/drawer (Core navigation)
react-native-gesture-handler (Swipe gestures)

🚀 Step-by-Step Implementatio

1. Core Setup

npx create-expo-app@latest
npx expo install @react-navigation/drawer react-native-gesture-handler react-native-reanimated

2. Magic Animation Wrapper (`drawer-scene-wrapper.tsx`)

This component makes screens dance when the drawer opens:

const DrawerSceneWrapper = ({ children }: { children: ReactNode }) => {
  const progress = useDrawerProgress();

  const animatedStyled = useAnimatedStyle(() => ({
    transform: [
      { scale: interpolate(progress.value, [0, 1], [1, 0.8]) },
      { translateX: interpolate(progress.value, [0, 1], [0, 170]) },
      { rotateY: `${interpolate(progress.value, [0, 1], [0, -25])}deg` }
    ],
    borderRadius: 20
  }));

  return <Animated.View style={[styles.container, animatedStyled]}>
    {children}
  </Animated.View>;
};

3. Custom Drawer UI (`custom-drawer-content.tsx`)

Added user profile + logout button:

<SafeAreaView style={{ flex: 1, backgroundColor: "transparent" }}>
  {/* Profile Section */}
  <TouchableOpacity style={styles.userContainer}>
    <Image source={{ uri: "USER_AVATAR_URL" }} style={styles.userImage} />
    <View>
      <Text style={styles.userName}>Haider Mukhtar</Text>
      <Text style={styles.userEmail}>haider@example.com</Text>
    </View>
  </TouchableOpacity>

  {/* Navigation Items */}
  <DrawerContentScrollView {...props}>
    <DrawerItemList {...props} />
  </DrawerContentScrollView>

  {/* Logout Button */}
  <TouchableOpacity style={styles.logoutButton}>
    <Ionicons name="log-out" size={24} color="#FFFFFF" />
    <Text style={styles.logoutText}>Logout</Text>
  </TouchableOpacity>
</SafeAreaView>

4. Drawer Configuration (`_layout.tsx`)

Styled the drawer with effects:

<GestureHandlerRootView style={{ flex: 1 }}>
  <Drawer
    drawerContent={(props) => <CustomDrawerContent {...props} />}
    screenOptions={{
      headerShown: false,
      drawerActiveBackgroundColor: "#33b3a6",
      drawerInactiveBackgroundColor: "transparent",
      drawerActiveTintColor: "#FFFFFF",
      drawerInactiveTintColor: "#FFFFFF",
      overlayColor: "transparent",
      drawerStyle: {
        backgroundColor: "transparent",
        width: "60%",
        paddingTop: 40,
      },
      drawerLabelStyle: {
        marginLeft: -6,
        fontSize: 18,
        fontFamily: "PoppinsMedium500",
        color: "#FFFFFF",
      },
      drawerItemStyle: {
        marginLeft: -16,
        marginRight: 35,
        borderTopLeftRadius: 0,
        borderBottomLeftRadius: 0,
        borderTopRightRadius: 50,
        borderBottomRightRadius: 50,
      },
      sceneStyle: {
        backgroundColor: "#26867C",
      },
      // drawerType: 'front',
    }}
  >
    <Drawer.Screen 
      name="index" 
      options={{ 
        title: "Home",
        drawerIcon: ({ color }) => <Ionicons name="home" color={color} />
      }} 
    />
    {/* Add other screens here */}
  </Drawer>
</GestureHandlerRootView>

5. Screen Implementation (`index.tsx`)

Wrapped every screen in DrawerSceneWrapper:

const HomeScreen = () => {
  const navigation = useNavigation();
  return (
    <DrawerSceneWrapper>
      <View style={styles.header}>
        <TouchableOpacity 
          onPress={() => navigation.dispatch(DrawerActions.openDrawer())}
        >
          <Ionicons name="menu" size={28} color="#000" />
        </TouchableOpacity>
        <Text style={styles.headerTitle}>Home</Text>
      </View>
      {/* Screen content */}
    </DrawerSceneWrapper>
  );
}

👀 Demo Time!

Here’s what it looks like in action:

🎨 Design Highlights

Animated Perspective 3D rotation + scaling synchronized with drawer gestures.
Bubble Menu Items Rounded active-state highlights with borderTopRightRadius: 50.

🚫 Common Pitfalls Solved

Gesture Conflicts: Wrapped root in <GestureHandlerRootView>.
Animation Jank: Used Extrapolation.CLAMP for smooth interpolation.
Safe Areas: Leveraged react-native-safe-area-context for notch support.
TypeScript: Strict typing for drawer props (DrawerContentComponentProps).

📱 Try It Yourself!

Clone the full project:

👉 Github Repo: Animated-Drawer-Navigation-Expo

💬 Final Thoughts

This implementation proves that with:

Reanimated’s interpolation magic ✨
Expo’s zero-config tooling 🧰
Strategic styling 🎨

… you can create navigation that delights users while maintaining code simplicity. What would you add to this? Share your ideas below! 👇

🔗 Haider Mukhtar on LinkedIn

My First Expo Experience as a React Native CLI Developer: What Impressed Me Most

haider mukhtar — Thu, 18 Sep 2025 06:31:54 +0000

Having built apps with the React Native CLI, I finally decided to try Expo on a new project. I’d always heard mixed opinions: some praised its simplicity, others warned of limitations. But after diving in, I found myself genuinely impressed, especially by file-based routing, automatic native module handling, the quality of Expo’s documentation, and the Expo Application Services (EAS). Here’s what stood out from a seasoned React Native CLI developer’s perspective.

📄 File-Based Routing:

One of the first things that caught my attention was Expo Router’s file-based routing. Coming from the traditional navigation setup, where you manually configure stacks and screens, Expo’s approach felt refreshingly simple. You create files and folders in the app directory, and each file becomes a route, mirroring the way modern web frameworks like Next.js work.

For example, adding a app/settings/index.tsx file instantly creates a /settings route. No more tedious route registration or navigation boilerplate. This not only speeds up development but also keeps your project structure clear and maintainable.

“Expo Router is a routing framework for React Native and web applications. It allows you to manage navigation between screens in your app and use the same components on multiple platforms (Android, iOS and web). It uses a file-based method to determine routes inside your app.”

📦 Automatic Native Module Handling:

If you’ve ever spent hours fiddling with Podfile, build.gradle, or troubleshooting native dependency issues, Expo’s autolinking feels like magic. With Expo, you install a package, and the platform takes care of the native linking behind the scenes. No more manual edits to native configuration files, just install and go.

This is a huge relief, especially when working with third-party libraries that require native modules. The Expo autolinking system ensures your dependencies are correctly integrated, dramatically reducing setup time and potential errors.

“Expo Autolinking is a mechanism that automates this process and reduces the library installation process to the minimum — usually just installing the package from npm and re-running pod install.”

📚 Expo Documentation:

As a developer, I live and die by documentation. Expo’s docs are some of the best I’ve used in the mobile ecosystem. Whether you’re looking up how to use a specific API, troubleshoot a build, or implement advanced features, the guides are detailed, well-organized, and regularly updated.

I found answers to nearly every question I had, often with clear examples and explanations. Compared to piecing together information from scattered blog posts or outdated Stack Overflow threads, Expo’s documentation is a breath of fresh air.

⚙ Expo Application Services (EAS):

Building and deploying mobile apps can be a headache, especially when dealing with certificates, provisioning profiles, and different build environments. Expo Application Services (EAS) takes care of all this in the cloud. With a few commands, you can build your app for iOS and Android, manage credentials, and even submit directly to the app stores.

For someone used to wrestling with Xcode and Android Studio, this was a game-changer. EAS abstracts away the complexity, letting you focus on your app instead of the build process.

“The new EAS Build service will let you make pretty much any app you want for iOS and Android by writing just React JS/TS code. Expo can build your app in the cloud for you, including any native libraries you need.”

👉 Thoughts:

I started this project skeptically, but Expo quickly won me over with its developer experience and thoughtful tooling. File-based routing, autolinking, stellar documentation, and EAS have made mobile development smoother and more enjoyable than I expected.

If you’re a React Native CLI developer on the fence about Expo, give it a try. You might be as pleasantly surprised as I was.

📌 Let’s connect and collaborate!
🔗 Haider Mukhtar on LinkedIn
🔗 Haider Mukhtar on GitHub

Happy coding with React Native! 🚀

React Native (CLI) Firebase Push Notifications for Android 📱🔔

haider mukhtar — Tue, 16 Sep 2025 11:20:45 +0000

If you’re building a React Native CLI app and want to integrate Firebase push notifications for Android, you’re in the right place. This guide walks you through every step I took while implementing push notifications in my own project — from setting up Firebase to handling foreground and background notifications with Notifee.

📌 1. Create a Firebase Project

Start by heading to Firebase Console and creating a new project.

Set your project name.
Register your Android app with the correct package name (e.g., com.yourappname).
Download the google-services.json file and place it into your Android app folder: android/app/google-services.json

⚙️ 2. Firebase SDK Integration for Android

Modify your Android project:

android/build.gradle

buildscript {
  dependencies {
    classpath("com.google.gms:google-services:4.4.2") // Make sure this is up to date
  }
}

android/app/build.gradle

apply plugin: "com.google.gms.google-services"

dependencies {
    // your code
    implementation(platform("com.google.firebase:firebase-bom:33.11.0"))
    implementation("com.google.firebase:firebase-analytics")
    // your code
}

📦 3. Install Firebase Packages

Install Firebase libraries using npm:

npm install --save @react-native-firebase/app
npm install --save @react-native-firebase/messaging

Then, rebuild your app:

npx react-native run-android

🔐 4. Request Notification Permission (Android 13+)

Since Android 13 requires runtime permission for notifications:

import {PermissionsAndroid} from 'react-native';

const requestPermissionAndroid = async () => {
  const granted = await PermissionsAndroid.request(
    PermissionsAndroid.PERMISSIONS.POST_NOTIFICATIONS,
  );

  console.log(granted === PermissionsAndroid.RESULTS.GRANTED
    ? '✔ Permissions Granted'
    : '❌ Permissions Denied');
};

Call this inside useEffect on app load.

  useEffect(() => {
    if (Platform.OS === 'android') {
      requestPermissionAndroid();
    } else {
      console.log('This OS not supported.');
    }
  }, []);

🔑 5. Get FCM Token

This token uniquely identifies the device. You can send notifications to this token using Firebase.

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

const getFCMToken = async () => {
  const token = await messaging().getToken();
  console.log('FCM Token:', token);
};

🧩 6. Handle Foreground Notifications

useEffect(() => {
  const unsubscribe = messaging().onMessage(async remoteMessage => {
    Alert.alert('New FCM Message', JSON.stringify(remoteMessage));
  });

  return unsubscribe;
}, []);

📲 7. Setup Notifee for Foreground Notification Display

Install Notifee:

npm install --save @notifee/react-native

Display foreground notifications using Notifee:

import notifee from '@notifee/react-native';

const onDisplayNotification = async (remoteMessage) => {
  const channelId = await notifee.createChannel({
    id: 'default',
    name: 'Default Channel',
  });

  await notifee.displayNotification({
    title: remoteMessage.notification.title,
    body: remoteMessage.notification.body,
    android: {
      channelId,
      pressAction: { id: 'default' },
    },
  });
};

useEffect(() => {
    const unsubscribe = messaging().onMessage(async remoteMessage => {
    onDisplayNotification(remoteMessage);
});

📳 8. Background & Quit State Notifications

In index.js, register the background message handler:

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

messaging().setBackgroundMessageHandler(async remoteMessage => {
  console.log('Background message:', remoteMessage);
});

Now, even when the app is killed or in the background, it captures and logs the message.

💻 9. Sending Notifications via Postman

Get your Firebase project’s Access Token using a service account JSON.
Hit this endpoint from Postman:

POST https://fcm.googleapis.com/v1/projects/<project-id>/messages:send

Use the FCM token in your request body to target your device.

🎯 Summary

You’ve now successfully integrated Firebase push notifications in a React Native CLI app for Android. From requesting permissions and getting tokens to handling notifications in all states (foreground, background, quit), everything is covered in this guide.

📄 Source Code on GitHub

Want to explore the full code implementation of Firebase Push Notifications in React Native CLI?

Check out the complete project on GitHub:
👉 GitHub Repository: React Native Firebase Notifications
Feel free to star ⭐ the repo if it helps you!

📺Live Demo: Receiving Firebase Push Notifications on Android

Want to see it in action? Here’s a screen recording showing how Firebase push notifications are delivered to an Android device using React Native CLI. The video demonstrates:
-Receiving a notification while the app is in the foreground.
-Handling notifications in the background and the quit state.
-Custom notification appearance using Notifee.
Watch how seamlessly the integration works in a real scenario:

💡 Pro Tips

Use Notifee for better control over notification appearance and behavior.
Test in both the emulator and physical devices
Make sure your AndroidManifest has the required services and permissions.

✉️ Happy coding with React Native and Firebase!

Forem: haider mukhtar

Stop Typing JSON Manually: The VS Code Extension That Makes TypeScript Fast ⚡

⬇️ Installation

⌨️ How to Use: Two Essential Shortcuts

🧠 The Intelligence: Why This Tool Is So Good for React/RN

✅ Conclusion: Faster Component Development

📬 Stay Connected

Happy Coding! 🚀💻

Migrating to React Native 0.82: Unlocking the Full Power of the New Architecture in Expo Apps

What’s New in React Native 0.82?

1. New Architecture as Default:

2. Experimental Hermes V1:

3. React 19.1.1 Integration:

4. DOM Node APIs:

Other Enhancements:

Understanding the New Architecture

Benefits for Expo Apps

Prerequisites for Migration

Step-by-Step Migration Guide

Common Issues and Troubleshooting

Conclusion

📬 Stay Connected

Interactive Resizable Split View in React Native

✨ Why Micro-animations Matter:

🏗️ Setting Up the Layout:

✋ Draggable with Gesture Handler:

📂 Code & GitHub Repository:

📄 Key Dependencies:

Stunning Animated Drawer Navigation in Expo React Native

💡 Why I Built This

🧩 Key Tech Stack

🚀 Step-by-Step Implementatio

1. Core Setup

2. Magic Animation Wrapper (drawer-scene-wrapper.tsx)

3. Custom Drawer UI (custom-drawer-content.tsx)

4. Drawer Configuration (_layout.tsx)

5. Screen Implementation (index.tsx)

👀 Demo Time!

🎨 Design Highlights

🚫 Common Pitfalls Solved

📱 Try It Yourself!

💬 Final Thoughts

My First Expo Experience as a React Native CLI Developer: What Impressed Me Most

📄 File-Based Routing:

📦 Automatic Native Module Handling:

📚 Expo Documentation:

⚙ Expo Application Services (EAS):

👉 Thoughts:

React Native (CLI) Firebase Push Notifications for Android 📱🔔

📌 1. Create a Firebase Project

⚙️ 2. Firebase SDK Integration for Android

📦 3. Install Firebase Packages

🔐 4. Request Notification Permission (Android 13+)

🔑 5. Get FCM Token

🧩 6. Handle Foreground Notifications

📲 7. Setup Notifee for Foreground Notification Display

📳 8. Background & Quit State Notifications

💻 9. Sending Notifications via Postman

🎯 Summary

📄 Source Code on GitHub

📺Live Demo: Receiving Firebase Push Notifications on Android

💡 Pro Tips

2. Magic Animation Wrapper (`drawer-scene-wrapper.tsx`)

3. Custom Drawer UI (`custom-drawer-content.tsx`)

4. Drawer Configuration (`_layout.tsx`)

5. Screen Implementation (`index.tsx`)