Platform Specific Code

Introduction

In today's fast-paced world, mobile application development has become a necessity for businesses and developers alike. However, building separate apps for different platforms, such as iOS and Android, can be time-consuming and resource-intensive. This is where React Native comes in as a game-changer.

React Native, developed by Facebook is an open-source framework that allows you to build mobile applications using JavaScript. It leverages the power of React, a popular JavaScript library for building user interfaces, and extends it to create truly native mobile apps. The key advantage of React Native is that it enables you to write code once and deploy it on multiple platforms, reducing development time and effort.

Unlike traditional app development frameworks that rely on web views or browser-based technologies, React Native uses native components to render UI elements. This means that the apps you build with React Native have the same look, feel, and performance as those built using native languages like Java or Swift.

React Native achieves this by using a bridge that connects JavaScript code with the native APIs of the target platform. This bridge allows React Native to interact with the device's capabilities, such as camera, GPS, and animations, just like a native app. It ensures a smooth and seamless user experience, making React Native apps indistinguishable from their native counterparts.

Platform Module

The Platform module in React Native provides a set of APIs to detect the current platform and other platform-related information. It exposes two properties: Platform.OS and Platform.Version. The Platform.OS property returns a string indicating the current platform (either 'android' or 'ios'). The Platform.Version property returns the specific version of the platform.

Detecting the Android Version

To detect the Android version in React Native, you can use the Platform.Version property in conjunction with conditional statements. For example, you can check if the Android version is greater than or equal to a certain value to enable specific features or apply specific behavior.

Detecting the iOS Version

Similar to Android, you can detect the iOS version using the Platform.Version property and conditional statements. This allows you to adapt your code based on the iOS version running on the device.

Platform-specific Extension

Platform-specific Extension in React Native allows developers to write platform-specific code by creating separate files or components for different platforms. This approach ensures that specific functionalities or UI components are tailored to each platform, optimizing the user experience. Let's explore how platform-specific extensions work in React Native:

• File Structure: To implement platform-specific extensions, you can create separate files with platform-specific suffixes. The most common suffixes are .android.js for Android-specific code and .ios.js for iOS-specific code. React Native will automatically select the appropriate file based on the platform where the app is running.

• Platform-Specific Logic: In each platform-specific file, you can write code specific to that platform. This can include platform-specific UI components, behavior, or any other platform-related logic. When the React Native app is built for a particular platform, the corresponding platform-specific file will be included.

Example - Platform-specific Code for Android:

Example - Platform-specific Code for iOS:

Usage:

In your main code or other components, you can import the component without specifying the platform. React Native will automatically select the appropriate platform-specific component based on the current platform.

Example:

When running the React Native app on an Android device, the MyComponent.android.js file will be used, and when running on an iOS device, the MyComponent.ios.js file will be used. This allows you to provide platform-specific implementations while maintaining a shared codebase.

Platform-specific extensions in React Native enable you to customize your app's behavior, UI, and features for different platforms. This approach ensures optimal performance, a native look and feel, and a seamless user experience across Android and iOS devices.

Native-specific Extensions (i.e. Sharing Code with NodeJS and Web)

Native-specific extensions in React Native allow code sharing with other platforms, such as Node.js and the web. Let's explore how this can be achieved:

React Native provides a platform-agnostic JavaScript runtime that can be utilized outside of the mobile app context. This means that you can reuse your React Native code and business logic across different environments, enabling code sharing and reducing development efforts. Here's how you can achieve native-specific extensions:

Sharing Code with Node.js:

Since React Native uses JavaScript as its programming language, you can reuse your React Native code with Node.js. This is particularly useful when you want to share business logic, utility functions, or other non-UI-related code between your mobile app and server-side logic.

To share code with Node.js, you can create separate JavaScript modules containing the reusable code. These modules can be placed in a shared directory or a separate Node.js package. You can then import these modules into both your React Native app and your Node.js server-side codebase.

Example:

Create a file named mathUtils.js with the following content:

In your React Native app:

In your Node.js server-side code:

Sharing Code with the Web:

React Native also allows you to reuse code with web applications built using React or other JavaScript frameworks. This enables you to create a consistent codebase between your mobile app and web app, reducing duplication and ensuring a cohesive user experience.

To share code with web applications, you can use platforms like React Native Web or Next.js, which provide a unified development approach for building both mobile and web applications using React. With these platforms, you can write code that works seamlessly across mobile and web, including UI components, state management, and business logic.

By structuring your codebase properly and adopting a modular approach, you can share components, utility functions, and even styles between your React Native app and web app.

Example:

Create a shared component named Button.js:

In your React Native app:

In your web app:

By adopting these practices, you can reuse your React Native codebase effectively, improving development efficiency and maintaining consistency across different platforms.