diff --git a/docs/angular/your-first-app/7-live-reload.md b/docs/angular/your-first-app/7-live-reload.md
index 26fe3b4fbf0..e6d0afe17f9 100644
--- a/docs/angular/your-first-app/7-live-reload.md
+++ b/docs/angular/your-first-app/7-live-reload.md
@@ -32,7 +32,7 @@ The Live Reload server will start up, and the native IDE of choice will open if
 
 ## Deleting Photos
 
-With Live Reload running and the app open on your device, let’s implement photo deletion functionality. Open `tab2.page.html` and add a new click handler to each `<ion-img>` element. When the app user taps on a photo in our gallery, we’ll display an [Action Sheet](https://ionicframework.com/docs/api/action-sheet) dialog with the option to either delete the selected photo or cancel (close) the dialog.
+With Live Reload running and the app open on your device, let’s implement photo deletion functionality. In your code editor (not Android Studio or Xcode), open `tab2.page.html` and add a new click handler to each `<ion-img>` element. When the app user taps on a photo in our gallery, we’ll display an [Action Sheet](https://ionicframework.com/docs/api/action-sheet) dialog with the option to either delete the selected photo or cancel (close) the dialog.
 
 ```html
 <ion-col size="6" *ngFor="let photo of photoService.photos; index as position">
@@ -98,7 +98,7 @@ public async deletePicture(photo: UserPhoto, position: number) {
 
   // delete photo file from filesystem
   const filename = photo.filepath
-                      .substr(photo.filepath.lastIndexOf('/') + 1);
+                      .substring(photo.filepath.lastIndexOf('/') + 1);
 
   await Filesystem.deleteFile({
     path: filename,
diff --git a/docs/react/your-first-app/7-live-reload.md b/docs/react/your-first-app/7-live-reload.md
index 023da7a8844..15d4f643f2f 100644
--- a/docs/react/your-first-app/7-live-reload.md
+++ b/docs/react/your-first-app/7-live-reload.md
@@ -26,7 +26,7 @@ The Live Reload server will start up, and the native IDE of choice will open if
 
 ## 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:
+With Live Reload running and the app open on your device, let’s implement photo deletion functionality. In your code editor (not Android Studio or Xcode), open `Tab2.tsx` then import `useState` from React and `UserPhoto` from the `usePhotoGallery` hook:
 
 ```tsx
 import React, { useState } from 'react';
@@ -94,7 +94,7 @@ const deletePhoto = async (photo: UserPhoto) => {
   Preferences.set({ key: PHOTO_STORAGE, value: JSON.stringify(newPhotos) });
 
   // delete photo file from filesystem
-  const filename = photo.filepath.substr(photo.filepath.lastIndexOf('/') + 1);
+  const filename = photo.filepath.substring(photo.filepath.lastIndexOf('/') + 1);
   await Filesystem.deleteFile({
     path: filename,
     directory: Directory.Data,
diff --git a/docs/vue/your-first-app/7-live-reload.md b/docs/vue/your-first-app/7-live-reload.md
index 9c0cb476b80..ea436f94832 100644
--- a/docs/vue/your-first-app/7-live-reload.md
+++ b/docs/vue/your-first-app/7-live-reload.md
@@ -26,7 +26,7 @@ The Live Reload server will start up, and the native IDE of choice will open if
 
 ## Deleting Photos
 
-With Live Reload running and the app is open on your device, let’s implement photo deletion functionality. Open `Tab2Page.vue` then import the `actionSheetController`. We'll display an [IonActionSheet](https://ionicframework.com/docs/api/action-sheet) with the option to delete a photo:
+With Live Reload running and the app open on your device, let’s implement photo deletion functionality. In your code editor (not Android Studio or Xcode), open `Tab2Page.vue` then import the `actionSheetController`. We'll display an [IonActionSheet](https://ionicframework.com/docs/api/action-sheet) with the option to delete a photo:
 
 ```tsx
 import {
@@ -96,7 +96,7 @@ const deletePhoto = async (photo: UserPhoto) => {
   photos.value = photos.value.filter((p) => p.filepath !== photo.filepath);
 
   // delete photo file from filesystem
-  const filename = photo.filepath.substr(photo.filepath.lastIndexOf('/') + 1);
+  const filename = photo.filepath.substring(photo.filepath.lastIndexOf('/') + 1);
   await Filesystem.deleteFile({
     path: filename,
     directory: Directory.Data,
diff --git a/versioned_docs/version-v5/angular/your-first-app/7-live-reload.md b/versioned_docs/version-v5/angular/your-first-app/7-live-reload.md
index fdce9ac6848..d914d9cd21a 100644
--- a/versioned_docs/version-v5/angular/your-first-app/7-live-reload.md
+++ b/versioned_docs/version-v5/angular/your-first-app/7-live-reload.md
@@ -26,7 +26,7 @@ The Live Reload server will start up, and the native IDE of choice will open if
 
 ## Deleting Photos
 
-With Live Reload running and the app open on your device, let’s implement photo deletion functionality. Open `tab2.page.html` and add a new click handler to each `<ion-img>` element. When the app user taps on a photo in our gallery, we’ll display an [Action Sheet](https://ionicframework.com/docs/api/action-sheet) dialog with the option to either delete the selected photo or cancel (close) the dialog.
+With Live Reload running and the app open on your device, let’s implement photo deletion functionality. In your code editor (not Android Studio or Xcode), open `tab2.page.html` and add a new click handler to each `<ion-img>` element. When the app user taps on a photo in our gallery, we’ll display an [Action Sheet](https://ionicframework.com/docs/api/action-sheet) dialog with the option to either delete the selected photo or cancel (close) the dialog.
 
 ```html
 <ion-col size="6" *ngFor="let photo of photoService.photos; index as position">
@@ -92,7 +92,7 @@ public async deletePicture(photo: UserPhoto, position: number) {
 
   // delete photo file from filesystem
   const filename = photo.filepath
-                      .substr(photo.filepath.lastIndexOf('/') + 1);
+                      .substring(photo.filepath.lastIndexOf('/') + 1);
 
   await Filesystem.deleteFile({
     path: filename,
diff --git a/versioned_docs/version-v5/react/your-first-app/7-live-reload.md b/versioned_docs/version-v5/react/your-first-app/7-live-reload.md
index c7bc374b712..83cae9425c3 100644
--- a/versioned_docs/version-v5/react/your-first-app/7-live-reload.md
+++ b/versioned_docs/version-v5/react/your-first-app/7-live-reload.md
@@ -26,7 +26,7 @@ The Live Reload server will start up, and the native IDE of choice will open if
 
 ## 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:
+With Live Reload running and the app open on your device, let’s implement photo deletion functionality. In your code editor (not Android Studio or Xcode), open `Tab2.tsx` then import `useState` from React and `UserPhoto` from the `usePhotoGallery` hook:
 
 ```tsx
 import React, { useState } from 'react';
@@ -94,7 +94,7 @@ const deletePhoto = async (photo: UserPhoto) => {
   Preferences.set({ key: PHOTO_STORAGE, value: JSON.stringify(newPhotos) });
 
   // delete photo file from filesystem
-  const filename = photo.filepath.substr(photo.filepath.lastIndexOf('/') + 1);
+  const filename = photo.filepath.substring(photo.filepath.lastIndexOf('/') + 1);
   await Filesystem.deleteFile({
     path: filename,
     directory: Directory.Data,
diff --git a/versioned_docs/version-v5/vue/your-first-app/7-live-reload.md b/versioned_docs/version-v5/vue/your-first-app/7-live-reload.md
index 126f166afca..cbc49e8ef31 100644
--- a/versioned_docs/version-v5/vue/your-first-app/7-live-reload.md
+++ b/versioned_docs/version-v5/vue/your-first-app/7-live-reload.md
@@ -26,7 +26,7 @@ The Live Reload server will start up, and the native IDE of choice will open if
 
 ## Deleting Photos
 
-With Live Reload running and the app is open on your device, let’s implement photo deletion functionality. Open `Tab2.vue` then import the `actionSheetController`. We'll display an [IonActionSheet](https://ionicframework.com/docs/api/action-sheet) with the option to delete a photo:
+With Live Reload running and the app open on your device, let’s implement photo deletion functionality. In your code editor (not Android Studio or Xcode), open `Tab2.vue` then import the `actionSheetController`. We'll display an [IonActionSheet](https://ionicframework.com/docs/api/action-sheet) with the option to delete a photo:
 
 ```tsx
 import {
@@ -111,7 +111,7 @@ const deletePhoto = async (photo: UserPhoto) => {
   photos.value = photos.value.filter((p) => p.filepath !== photo.filepath);
 
   // delete photo file from filesystem
-  const filename = photo.filepath.substr(photo.filepath.lastIndexOf('/') + 1);
+  const filename = photo.filepath.substring(photo.filepath.lastIndexOf('/') + 1);
   await Filesystem.deleteFile({
     path: filename,
     directory: Directory.Data,
diff --git a/versioned_docs/version-v6/angular/your-first-app/7-live-reload.md b/versioned_docs/version-v6/angular/your-first-app/7-live-reload.md
index 26fe3b4fbf0..e6d0afe17f9 100644
--- a/versioned_docs/version-v6/angular/your-first-app/7-live-reload.md
+++ b/versioned_docs/version-v6/angular/your-first-app/7-live-reload.md
@@ -32,7 +32,7 @@ The Live Reload server will start up, and the native IDE of choice will open if
 
 ## Deleting Photos
 
-With Live Reload running and the app open on your device, let’s implement photo deletion functionality. Open `tab2.page.html` and add a new click handler to each `<ion-img>` element. When the app user taps on a photo in our gallery, we’ll display an [Action Sheet](https://ionicframework.com/docs/api/action-sheet) dialog with the option to either delete the selected photo or cancel (close) the dialog.
+With Live Reload running and the app open on your device, let’s implement photo deletion functionality. In your code editor (not Android Studio or Xcode), open `tab2.page.html` and add a new click handler to each `<ion-img>` element. When the app user taps on a photo in our gallery, we’ll display an [Action Sheet](https://ionicframework.com/docs/api/action-sheet) dialog with the option to either delete the selected photo or cancel (close) the dialog.
 
 ```html
 <ion-col size="6" *ngFor="let photo of photoService.photos; index as position">
@@ -98,7 +98,7 @@ public async deletePicture(photo: UserPhoto, position: number) {
 
   // delete photo file from filesystem
   const filename = photo.filepath
-                      .substr(photo.filepath.lastIndexOf('/') + 1);
+                      .substring(photo.filepath.lastIndexOf('/') + 1);
 
   await Filesystem.deleteFile({
     path: filename,
diff --git a/versioned_docs/version-v6/react/your-first-app/7-live-reload.md b/versioned_docs/version-v6/react/your-first-app/7-live-reload.md
index 2d37c4efdba..992b4ce0eaa 100644
--- a/versioned_docs/version-v6/react/your-first-app/7-live-reload.md
+++ b/versioned_docs/version-v6/react/your-first-app/7-live-reload.md
@@ -26,7 +26,7 @@ The Live Reload server will start up, and the native IDE of choice will open if
 
 ## 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:
+With Live Reload running and the app open on your device, let’s implement photo deletion functionality. In your code editor (not Android Studio or Xcode), open `Tab2.tsx` then import `useState` from React and `UserPhoto` from the `usePhotoGallery` hook:
 
 ```tsx
 import React, { useState } from 'react';
@@ -94,7 +94,7 @@ const deletePhoto = async (photo: UserPhoto) => {
   Preferences.set({ key: PHOTO_STORAGE, value: JSON.stringify(newPhotos) });
 
   // delete photo file from filesystem
-  const filename = photo.filepath.substr(photo.filepath.lastIndexOf('/') + 1);
+  const filename = photo.filepath.substring(photo.filepath.lastIndexOf('/') + 1);
   await Filesystem.deleteFile({
     path: filename,
     directory: Directory.Data,
diff --git a/versioned_docs/version-v6/vue/your-first-app/7-live-reload.md b/versioned_docs/version-v6/vue/your-first-app/7-live-reload.md
index a76c6e6622e..c33610800f9 100644
--- a/versioned_docs/version-v6/vue/your-first-app/7-live-reload.md
+++ b/versioned_docs/version-v6/vue/your-first-app/7-live-reload.md
@@ -26,7 +26,7 @@ The Live Reload server will start up, and the native IDE of choice will open if
 
 ## Deleting Photos
 
-With Live Reload running and the app is open on your device, let’s implement photo deletion functionality. Open `Tab2.vue` then import the `actionSheetController`. We'll display an [IonActionSheet](https://ionicframework.com/docs/api/action-sheet) with the option to delete a photo:
+With Live Reload running and the app open on your device, let’s implement photo deletion functionality. In your code editor (not Android Studio or Xcode), open `Tab2.vue` then import the `actionSheetController`. We'll display an [IonActionSheet](https://ionicframework.com/docs/api/action-sheet) with the option to delete a photo:
 
 ```tsx
 import {
@@ -111,7 +111,7 @@ const deletePhoto = async (photo: UserPhoto) => {
   photos.value = photos.value.filter((p) => p.filepath !== photo.filepath);
 
   // delete photo file from filesystem
-  const filename = photo.filepath.substr(photo.filepath.lastIndexOf('/') + 1);
+  const filename = photo.filepath.substring(photo.filepath.lastIndexOf('/') + 1);
   await Filesystem.deleteFile({
     path: filename,
     directory: Directory.Data,
diff --git a/versioned_docs/version-v7/angular/your-first-app/7-live-reload.md b/versioned_docs/version-v7/angular/your-first-app/7-live-reload.md
index 26fe3b4fbf0..e6d0afe17f9 100644
--- a/versioned_docs/version-v7/angular/your-first-app/7-live-reload.md
+++ b/versioned_docs/version-v7/angular/your-first-app/7-live-reload.md
@@ -32,7 +32,7 @@ The Live Reload server will start up, and the native IDE of choice will open if
 
 ## Deleting Photos
 
-With Live Reload running and the app open on your device, let’s implement photo deletion functionality. Open `tab2.page.html` and add a new click handler to each `<ion-img>` element. When the app user taps on a photo in our gallery, we’ll display an [Action Sheet](https://ionicframework.com/docs/api/action-sheet) dialog with the option to either delete the selected photo or cancel (close) the dialog.
+With Live Reload running and the app open on your device, let’s implement photo deletion functionality. In your code editor (not Android Studio or Xcode), open `tab2.page.html` and add a new click handler to each `<ion-img>` element. When the app user taps on a photo in our gallery, we’ll display an [Action Sheet](https://ionicframework.com/docs/api/action-sheet) dialog with the option to either delete the selected photo or cancel (close) the dialog.
 
 ```html
 <ion-col size="6" *ngFor="let photo of photoService.photos; index as position">
@@ -98,7 +98,7 @@ public async deletePicture(photo: UserPhoto, position: number) {
 
   // delete photo file from filesystem
   const filename = photo.filepath
-                      .substr(photo.filepath.lastIndexOf('/') + 1);
+                      .substring(photo.filepath.lastIndexOf('/') + 1);
 
   await Filesystem.deleteFile({
     path: filename,
diff --git a/versioned_docs/version-v7/react/your-first-app/7-live-reload.md b/versioned_docs/version-v7/react/your-first-app/7-live-reload.md
index 023da7a8844..15d4f643f2f 100644
--- a/versioned_docs/version-v7/react/your-first-app/7-live-reload.md
+++ b/versioned_docs/version-v7/react/your-first-app/7-live-reload.md
@@ -26,7 +26,7 @@ The Live Reload server will start up, and the native IDE of choice will open if
 
 ## 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:
+With Live Reload running and the app open on your device, let’s implement photo deletion functionality. In your code editor (not Android Studio or Xcode), open `Tab2.tsx` then import `useState` from React and `UserPhoto` from the `usePhotoGallery` hook:
 
 ```tsx
 import React, { useState } from 'react';
@@ -94,7 +94,7 @@ const deletePhoto = async (photo: UserPhoto) => {
   Preferences.set({ key: PHOTO_STORAGE, value: JSON.stringify(newPhotos) });
 
   // delete photo file from filesystem
-  const filename = photo.filepath.substr(photo.filepath.lastIndexOf('/') + 1);
+  const filename = photo.filepath.substring(photo.filepath.lastIndexOf('/') + 1);
   await Filesystem.deleteFile({
     path: filename,
     directory: Directory.Data,
diff --git a/versioned_docs/version-v7/vue/your-first-app/7-live-reload.md b/versioned_docs/version-v7/vue/your-first-app/7-live-reload.md
index 9c0cb476b80..ea436f94832 100644
--- a/versioned_docs/version-v7/vue/your-first-app/7-live-reload.md
+++ b/versioned_docs/version-v7/vue/your-first-app/7-live-reload.md
@@ -26,7 +26,7 @@ The Live Reload server will start up, and the native IDE of choice will open if
 
 ## Deleting Photos
 
-With Live Reload running and the app is open on your device, let’s implement photo deletion functionality. Open `Tab2Page.vue` then import the `actionSheetController`. We'll display an [IonActionSheet](https://ionicframework.com/docs/api/action-sheet) with the option to delete a photo:
+With Live Reload running and the app open on your device, let’s implement photo deletion functionality. In your code editor (not Android Studio or Xcode), open `Tab2Page.vue` then import the `actionSheetController`. We'll display an [IonActionSheet](https://ionicframework.com/docs/api/action-sheet) with the option to delete a photo:
 
 ```tsx
 import {
@@ -96,7 +96,7 @@ const deletePhoto = async (photo: UserPhoto) => {
   photos.value = photos.value.filter((p) => p.filepath !== photo.filepath);
 
   // delete photo file from filesystem
-  const filename = photo.filepath.substr(photo.filepath.lastIndexOf('/') + 1);
+  const filename = photo.filepath.substring(photo.filepath.lastIndexOf('/') + 1);
   await Filesystem.deleteFile({
     path: filename,
     directory: Directory.Data,