Rapid App Development with Live Reload
So far, we’ve seen how easy it is to develop a cross-platform app that works everywhere. The development experience is pretty quick, but what if I told you there was a way to go faster?
We can use the Ionic CLI’s Live Reload functionality to boost our productivity when building Ionic apps. When active, Live Reload will reload the browser and/or WebView when changes in the app are detected.
Live Reload
Remember ionic serve
? That was Live Reload working in the browser, allowing us to iterate quickly.
We can also use it when developing on iOS and Android devices. This is particularly useful when writing code that interacts with native plugins. Since we need to run native plugin code on a device in order to verify that it works, having a way to quickly write code, build and deploy it, then test it is crucial to keeping up our development speed.
Let’s use Live Reload to implement photo deletion, the missing piece of our Photo Gallery feature. Select your platform of choice (iOS or Android) and connect a device to your computer. Next, run either command in a terminal, based on your chosen platform:
$ ionic cap run ios -l --external
$ ionic cap run android -l --external
The Live Reload server will start up, and the native IDE of choice will open if not opened already. Within the IDE, click the Play button to launch the app onto your device.
Deleting Photos
With Live Reload running and the app is open on your device, let’s implement photo deletion functionality. Open Tab2.tsx
then import useState
from React and UserPhoto
from the usePhotoGallery
hook:
import React, { useState } from 'react';
import { usePhotoGallery, UserPhoto } from '../hooks/usePhotoGallery';
// other imports
Next, reference the deletePhoto
function, which we'll create soon:
const { photos, takePhoto, deletePhoto } = usePhotoGallery();
Next, add a state value to store information about the photo to delete:
const [photoToDelete, setPhotoToDelete] = useState<UserPhoto>();
When a user clicks on an image, we will show the action sheet by changing the state value to the photo. Update the <IonImg>
element to:
<IonImg onClick={() => setPhotoToDelete(photo)} src={photo.webviewPath} />