Cross Platform Development In React Native

React Native achieve cross-platform development by allowing developers to write code once using Java Script and React, and then it translates that code into native components for both ios and Android. it does this by using a bridge between Java Script and native platforms. This means that instead of writing two separate codebase (one for ios and one for Android), you can share most of the code, especially for the UI and logic across both platforms.

1. Shared codebase : you can write most of your code once, and React Native will render native components on both ios and Android →

   React Native runs your Java Script code in a Java Script engine called Java Script Core(used by webkit browsers), when you write Java Script React Native uses bridge to communicate with native modules written in Java or objective-c/swift for Android and ios, respectively.

• JavaScript Thread : Runs your React and application logic. handling things like state updates,events and API (Application Programming Interface)calls.

• Native Thread : Runs the Native code that interacts directly with ios and Android operating systems.

The bridge connects these two words, passing messages back and forth, allowing the app to utilize native components (such as buttons, views,etc.) without rewriting everything for each platform.

2. Platform Specific Code : React Native provides a set of core components that work across both platform, like;

   <View>,<Text>,<Image>,etc

   These components are translated into native UI elements for ios (like UI View) and Android (like View Group), allowing the UI look and feel “native” on each platform.

3. Platform-Specific Code : Even though you can share a lot of code between platforms, there are times when platform-specific behavior is necessary (e.g., design differences between Android and ios). React Native provides tools for handling this:

• Platform Module : you can use platform.os to check if the app is running on ios or Android and then implement platform.specific logic.

import {platform} from 'react-native';
const platformSpecificMessage = Platform.os === 'ios'? 'ios Device' : 'Android Device';

• File extensions : you can create separate files for each platform by naming them with .ios .js and .android.js extensions. react Native will automatically choose the right file based on the platform.

React Native enables cross-platform development by allowing developers to write JavaScript and React code once, which is then translated into native components for iOS and Android using a bridge. This approach lets developers share most of the codebase, especially for UI and logic, across both platforms. React Native uses JavaScript Core to run JavaScript code and a bridge to interact with native modules in Java or Objective-C/Swift. While core components like and provide a native look on both platforms, React Native also supports platform-specific code through tools like the Platform module and platform-specific file extensions.