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 Plugin | React Native / Expo Equivalent | Install Command |
|---|---|---|
cordova-plugin-camera | expo-image-picker / expo-camera | npx expo install expo-image-picker |
cordova-plugin-file | expo-file-system | npx expo install expo-file-system |
phonegap-plugin-push | expo-notifications | npx expo install expo-notifications |
cordova-plugin-geolocation | expo-location | npx expo install expo-location |
cordova-sqlite-storage | expo-sqlite | npx expo install expo-sqlite |
cordova-plugin-device | expo-device | npx expo install expo-device |
cordova-plugin-network-information | @react-native-community/netinfo | npx expo install @react-native-community/netinfo |