Chapter 5 of 12 ~15 min read

Cordova Plugins vs React Native & Expo Modules

Async/await Promises vs error callbacks, plugin discovery and mappings.


1. From Callback Hell to Modern Async/Await

In Cordova, plugin communication was built on low-level strings and success/error callbacks. In React Native and modern Expo modules, all native APIs return standard JavaScript Promise objects that work seamlessly with async/await.

Cordova Plugin Callback
// Classical Cordova callback structure
navigator.camera.getPicture(
  function onSuccess(imageData) {
    console.log("Photo URI:", imageData);
    const img = document.getElementById('myImg');
    img.src = "data:image/jpeg;base64," + imageData;
  },
  function onError(message) {
    alert('Camera failed: ' + message);
  },
  { quality: 80, destinationType: Camera.DestinationType.DATA_URL }
);
React Native / Expo Async/Await
import * as ImagePicker from 'expo-image-picker';

async function takePhoto() {
  try {
    const result = await ImagePicker.launchCameraAsync({
      mediaTypes: ['images'],
      quality: 0.8,
      allowsEditing: true,
    });

    if (!result.canceled) {
      const imageUri = result.assets[0].uri;
      console.log("Photo URI:", imageUri);
      setImage(imageUri);
    }
  } catch (error) {
    console.error("Camera error:", error);
  }
}

2. Drop-In Library Migration Matrix

Cordova PluginReact Native / Expo EquivalentInstall Command
cordova-plugin-cameraexpo-image-picker / expo-cameranpx expo install expo-image-picker
cordova-plugin-fileexpo-file-systemnpx expo install expo-file-system
phonegap-plugin-pushexpo-notificationsnpx expo install expo-notifications
cordova-plugin-geolocationexpo-locationnpx expo install expo-location
cordova-sqlite-storageexpo-sqlitenpx expo install expo-sqlite
cordova-plugin-deviceexpo-devicenpx expo install expo-device
cordova-plugin-network-information@react-native-community/netinfonpx expo install @react-native-community/netinfo