DEV Community: Virali Vasa

React Native 0.76 version is here

Virali Vasa — Wed, 06 Nov 2024 10:53:20 +0000

Source: Wikipedia

Starting with React Native 0.76, the new architecture (Fabric and TurboModules) is enabled by default, bringing significant improvements in performance, flexibility, and ease of development.

Here’s a quick update of what’s new in React Native 0.76:

New Architecture Enabled by Default-

Fabric Renderer: The Fabric rendering engine is now the default, enabling faster and more efficient UI updates, better compatibility with concurrent rendering, and smoother animations.

TurboModules: By using TurboModules, the communication between JavaScript and native code is more efficient, reducing the overhead associated with the traditional bridge.

New Features and Improvements

Hermes by Default: The Hermes JavaScript engine, which optimizes performance and memory usage, is the default JavaScript runtime. Hermes offers faster startup times and lower memory usage, especially on Android devices.

React Native 0.76 introduces two new style props— boxShadow and filter —specific to the new architecture, providing familiar styling options similar to the web.

boxShadow
Adds shadows to elements, controlling position, color, size, and blurriness.

Syntax: Takes a CSS-like string (e.g., '5 5 5 0 rgba(255, 0, 0, 0.5)') or a JS object with parameters (e.g., {offsetX: 5, offsetY: 5, blurRadius: 5, spreadDistance: 0, color: 'rgba(255, 0, 0, 0.5')}).
Improvements: Fixes previous shadow limitations on Android, supports inset shadows, and now works on views without background color.

Limitations:

The default shadow color is black, not the parent’s color
Android normal shadows are supported on Android 9+
Android inset shadows are supported on Android 10+

filter
Adds filters for brightness, saturation, hue, and blurs to elements.

Syntax: Accepts a CSS-like string (e.g., 'saturate(0.5) grayscale(0.25)') or an array of JS objects (e.g., [{saturate: 0.5}, {grayscale: 0.25}]).
dropShadow differs from boxShadow by only casting shadows on pixels with nonzero alpha and lacks a spread distance.

Limitations:

iOS supports only brightness and opacity, and no outside-the-bounds effects.
Android blur and drop-shadow supported on Android 12+.

Improved Metro Bundler: Metro has been enhanced with faster startup and reload times, which helps speed up the development experience, especially in large projects.

Enhanced DevTools: The development tools are richer, with better React DevTools integration and improved error logging, making it easier to debug and understand performance issues.

New APIs and Module Improvements
Animated Layout Animations: Fabric enables enhanced support for layout animations, allowing more fluid and intuitive UI changes. With Fabric, you can now animate component mount and unmount with ease, improving user experience.
Streamlined Native Module Setup
Native modules in 0.76 are easier to set up and integrate, especially with the new architecture in place. The updates reduce boilerplate and make it easier for modules to work seamlessly with both Fabric and TurboModules.
React 18+ Integration
React Native 0.76 integrates React 18 features more deeply, especially around concurrent rendering, which improves responsiveness and smoothness. For instance, Fabric’s support for React 18's concurrent features helps manage rendering priorities better.
Android Gradle Plugin 8 and JDK 17 Support
The default Android Gradle plugin has been upgraded to support AGP 8 and JDK 17, ensuring better compatibility with recent versions of Android Studio and offering improved build performance.

7.** Enhanced Accessibility Features**
Improved support for accessibility features like voice-over, TalkBack, and screen readers, enhancing the overall accessibility of React Native applications.

Default TypeScript Setup New projects created with React Native 0.76 come with TypeScript configuration by default, reflecting the community’s growing preference for TypeScript.

Since the new architecture is enabled by default, you don’t need additional configuration to use Fabric and TurboModules in 0.76.

However, make sure you:

Update any third-party libraries to their latest versions, as they may need to be compatible with the new architecture.
Test your app thoroughly to ensure that Fabric and TurboModules don't cause unexpected issues, especially in parts of your app that heavily use native modules.

Migration Considerations
If you’re upgrading an older app, run react-native upgrade to manage the process. Check for any deprecated APIs or incompatible libraries, and consider migrating older custom native modules to the TurboModules format for better performance.

Example Project Creation in 0.76
To start a new React Native 0.76 project, run:

npx react-native@latest init your-app-name

With React Native 0.76, you’re set up with all these enhancements out-of-the-box, allowing you to build faster, more responsive, and modern applications right from the start.

Happy reading !!!!

moment.js Alternative - Luxon

Virali Vasa — Thu, 31 Oct 2024 12:16:38 +0000

Introduction:

The Moment.js team has officially declared:

"We now generally consider Moment to be a legacy project in maintenance mode. It is not dead, but it is indeed done."

Although Moment.js remains widely used in many existing projects, the team discourages using it for new development. Instead, they recommend alternative libraries that are better suited to modern applications. Among these, Luxon is one of the top choices.

Why Luxon?

Luxon is a powerful library for handling dates, times, time zones, and formatting, similar to Moment.js. It is particularly well-supported in newer React Native versions (>=0.70), where it works seamlessly. However, older React Native versions may lack the Intl support needed for some of Luxon's advanced functionality. If using React Native >=0.60, you’ll need to configure the build flavor of JSC in your android/app/build.gradle file:

-def jscFlavor = 'org.webkit:android-jsc:+'
+def jscFlavor = 'org.webkit:android-jsc-intl:+'

For further formatting information, refer to the Luxon documentation.

Installation:

Luxon supports Node.js 6+, and you can install it via NPM or Yarn:

npm install --save luxon
# or
yarn add luxon

Luxon Basics in React/React Native

Here are some commonly used functions in Luxon to get you started:

import { DateTime } from 'luxon';

// Current DateTime
DateTime.now()  
// => DateTime 2024-10-31T16:02:34.785+05:30

// Convert to JavaScript Date object for use in date pickers
DateTime.now().toJSDate()
// => Date Thu Oct 31 2024 16:02:34 GMT+0530 (India Standard Time)

// Custom date formatting
DateTime.now().toFormat('MM/dd/yyyy')
DateTime.now().toFormat('yyyy-MM-dd h:mm a')

// Parse an ISO string
let selectedDate = '2024-10-04T16:11:47.000-05:00';
DateTime.fromISO(selectedDate, { setZone: true })

// Get start and end of the current day
DateTime.local().startOf('day')
DateTime.local().endOf('day')

// Add days to current date
DateTime.now().plus({ days: 6 })
// => DateTime 2024-11-06T16:02:34.820+05:30

// Relative difference (e.g., "3 days ago")
DateTime.fromISO(selectedDate).toRelativeCalendar()

// Format for specific day of the week
DateTime.fromISO(selectedDate, { setZone: true }).toFormat('cccc')

Custom Formatting Examples

For advanced formatting, Luxon provides versatile methods:

Calculate time difference in hours and minutes (UTC)


const timeFormatForHoursWorkedInUTC = (utcDateString) => {
  const utcDate = DateTime.fromISO(utcDateString, { zone: 'utc' });
  const currentDate = DateTime.utc();
  const timeDifferenceMs = currentDate.diff(utcDate).as('milliseconds');
  const hours = Math.floor(timeDifferenceMs / (1000 * 60 * 60));
  const minutes = Math.floor((timeDifferenceMs % (1000 * 60 * 60)) / (1000 * 60));
  return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
};
//output:  `01:30`

Some more examples:

import { DateTime } from 'luxon';

// Example ISO Date String
const exampleDate = "2024-10-31T16:11:47.000-05:00";

// 1. Short Date (e.g., "10/31/2024")
console.log(DateTime.fromISO(exampleDate).toLocaleString(DateTime.DATE_SHORT));
// Output: "10/31/2024"

// 2. Medium Date (e.g., "Oct 31, 2024")
console.log(DateTime.fromISO(exampleDate).toLocaleString(DateTime.DATE_MED));
// Output: "Oct 31, 2024"

// 3. Full Date (e.g., "Thursday, October 31, 2024")
console.log(DateTime.fromISO(exampleDate).toLocaleString(DateTime.DATE_FULL));
// Output: "Thursday, October 31, 2024"

// 4. Huge Date (e.g., "Thursday, October 31, 2024 AD")
console.log(DateTime.fromISO(exampleDate).toLocaleString(DateTime.DATE_HUGE));
// Output: "Thursday, October 31, 2024 AD"

// 5. Simple Time (e.g., "4:11 PM")
console.log(DateTime.fromISO(exampleDate).toLocaleString(DateTime.TIME_SIMPLE));
// Output: "4:11 PM"

// 6. Short Time with Seconds (e.g., "16:11:47")
console.log(DateTime.fromISO(exampleDate).toLocaleString(DateTime.TIME_WITH_SECONDS));
// Output: "16:11:47"

// 7. Short Date and Time (e.g., "10/31/2024, 4:11 PM")
console.log(DateTime.fromISO(exampleDate).toLocaleString(DateTime.DATETIME_SHORT));
// Output: "10/31/2024, 4:11 PM"

// 8. Medium Date and Time (e.g., "Oct 31, 2024, 4:11 PM")
console.log(DateTime.fromISO(exampleDate).toLocaleString(DateTime.DATETIME_MED));
// Output: "Oct 31, 2024, 4:11 PM"

// 9. Full Date and Time with Timezone (e.g., "October 31, 2024, 4:11 PM UTC-5")
console.log(DateTime.fromISO(exampleDate).toLocaleString(DateTime.DATETIME_FULL));
// Output: "October 31, 2024, 4:11 PM UTC-5"

// 10. Huge Date and Time (e.g., "Thursday, October 31, 2024 AD, 4:11 PM")
console.log(DateTime.fromISO(exampleDate).toLocaleString(DateTime.DATETIME_HUGE));
// Output: "Thursday, October 31, 2024 AD, 4:11 PM"

Conclusion:

Luxon offers a modern, flexible, and efficient solution for date and time handling, making it an excellent alternative to Moment.js. With its extensive timezone support, intuitive syntax, and compatibility with both Node and the browser, Luxon can cover nearly all your date-time needs in React and React Native projects.

Happy coding! 😊

Troubleshooting Common Issues of React Native Firebase- Cloud Messaging

Virali Vasa — Thu, 31 Oct 2024 06:12:06 +0000

Source: npm @react-native-firebase/app

Are you facing issues while implementing React Native Firebase Cloud Messaging?

Getting notifications up and running smoothly on both Android and iOS can sometimes be challenging, given the unique configurations each platform demands.
This guide will walk you through the important steps to set up Firebase Cloud Messaging (FCM) in React Native and tackle some common errors:

Configuring Firebase:

Download GoogleService-Info.plist (iOS) and google-services.json (Android).

Select the downloaded GoogleService-Info.plist file from your computer, and ensure the "Copy items if needed" checkbox is enabled

Download the google-services.json file and place it inside of your project at the following location:
/android/app/google-services.json.

Enable Push Notifications for iOS in Xcode:

The Push Notifications capability needs to be added to the project. This can be done via the "Capability" option under the "Signing & Capabilities" tab:
Click on the "+ Capabilities" button.
Search for "Push Notifications".

Once selected, the capability will be shown below the other enabled capabilities. If no option appears when searching, the capability may already be enabled

The Background Modes capability needs to be enabled, along with both the Background fetch and Remote notifications sub-modes. This can be added via the "Capability" option on the "Signing & Capabilities" tab.

Now, ensure that both the "Background fetch" and the "Remote notifications" sub-modes are enabled

Setup Guide for React Native FCM:

Follow the official Firebase Cloud Messaging setup guide. This guide includes essential steps to get started with sending and receiving notifications on Android and iOS. Once you’ve completed these steps, you can test notifications directly from the Firebase Console under Messaging by composing a new campaign.

Note:
For M1 Mac users, issues with CocoaPods are common when setting up React Native Firebase. Here are some quick solutions:

Use arch -x86_64 - M1 Macs may encounter compatibility issues with CocoaPods. Run commands with arch -x86_64 to use the x86_64 architecture:

arch -x86_64 pod install

Update CocoaPods Repository- If you face errors related to outdated pod versions, update your CocoaPods repo:

arch -x86_64 pod repo update

Fix ffi Error- You might encounter an ffi library error. To fix it, install the ffi gem specifically for your architecture:

sudo arch -x86_64 gem install ffi

Re-Install Pods - After these steps, re-run the pod installation command:

arch -x86_64 pod install

Following these steps should help resolve architecture-specific issues on M1 Macs when installing and managing pods for your React Native project.

Note:
For Android 13+ devices, you need to request runtime permissions for push notifications explicitly. Add the following permissions to your AndroidManifest.xml:

<uses-permission android:name="android.permission.POST_NOTIFICATIONS" />

Then, in your code, request notification permissions at runtime. You can handle Android permissions directly like this:



import { Platform, PermissionsAndroid } from 'react-native';

async function requestNotificationPermission() {
// Version >= 33(`~project/build.gradle`)
  if (Platform.OS === 'android' ) {
    const granted = await PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.POST_NOTIFICATIONS,
    );

    if (granted === PermissionsAndroid.RESULTS.GRANTED) {
      console.log('Notification permission granted');
    } else {
      console.log('Notification permission denied');
    }
  }
}

Call requestNotificationPermission() during app initialization or before subscribing to notifications to ensure the user has granted permission.

Ensuring Compatibility:

Before diving into the setup, make sure that both @react-native-firebase/app and @react-native-firebase/messaging packages are installed in your project and are compatible.
Consistent versions are crucial to avoiding unexpected integration issues. To verify version compatibility, refer to the official React Native Firebase Release Documentation.
Make sure you have the latest versions of both packages installed to avoid compatibility issues.

If you’re testing on an iOS device, note the following:

Physical iOS devices are generally required to receive push notifications.
If you're on macOS 13+ with Apple Silicon, you can also use an iOS Simulator running iOS 16+ for testing.

Troubleshooting Tips:

After completing the setup, you may still run into issues. Here are some common problems and solutions:

Simulator Not Receiving Notifications:

If notifications aren’t appearing in the iOS simulator, try the following:

Restart or reset the simulator by erasing all content and settings.
Retry after resetting, as sometimes a simulator restart can fix the issue.

After troubleshooting this myself for a couple of hours, I found that a quick restart was the simplest solution!

Check Steps and Common Issues:
Double-check the setup steps in the Firebase guide to ensure everything is configured correctly.

Error Installing CocoaPods:
If you encounter installation errors, such as:



   error: RPC failed; curl stream was reset

   error: 6428 bytes of body are still expected

This could be due to network issues. Try switching from Wi-Fi to a mobile hotspot (or vice versa) and retry the installation. Sometimes, changing your network can solve connection-related pod installation issues. If this doesn’t resolve the problem, you may need to try additional troubleshooting tips, such as clearing the CocoaPods cache or updating Xcode.

Allowing HTTP URLs in iOS (App Transport Security):
If you’re using an HTTP URL for API requests (as opposed to HTTPS), you’ll need to update your iOS Info.plist file to avoid blocked connections due to App Transport Security (ATS) restrictions. Add the following lines in your Info.plist file:



   <key>NSAppTransportSecurity</key>

   <dict>

     <key>NSAllowsArbitraryLoads</key>

     <true/>

     <key>NSExceptionDomains</key>

     <dict>

       <key>localhost</key>

       <dict>

         <key>NSExceptionAllowsInsecureHTTPLoads</key>

         <true/>

       </dict>

     </dict>

   </dict>

This will allow your app to make HTTP requests without interference. Be cautious with this setting in production apps and try to limit it to development environments where possible.

Ensure App Transport Security (ATS) Compatibility:
For iOS, ensure that any HTTPS endpoints you’re using are ATS-compliant. If you’re testing with staging servers or self-signed certificates, make sure they are ATS-compatible, as Firebase requires a secure connection to communicate with APNs (Apple Push Notification Service).

Conclusion:
Setting up Firebase Cloud Messaging in React Native can be straightforward, but minor setup mistakes or device configuration quirks can lead to issues. Following this guide and troubleshooting tips should help you get notifications running smoothly. For any additional issues, you can check out the official documentation, forums, or GitHub discussions to find solutions shared by other developers.

Happy coding !!!!