Cambios

.gitignore 2

+node_modules/
+public/
+ios/
+android/
+build/

capacitor.config 2.ts

+import { CapacitorConfig } from '@capacitor/cli';
+
+const config: CapacitorConfig = {
+  appId: 'io.ionic.starter',
+  appName: 'TPCApp',
+  webDir: 'build',
+  bundledWebRuntime: false
+};
+
+export default config;

ios/App/Podfile

   pod 'CapacitorHaptics', :path => '../../node_modules/@capacitor/haptics'
   pod 'CapacitorKeyboard', :path => '../../node_modules/@capacitor/keyboard'
   pod 'CapacitorStatusBar', :path => '../../node_modules/@capacitor/status-bar'
+  pod 'CordovaPlugins', :path => '../capacitor-cordova-ios-plugins'
 end
 
 target 'App' do

package.json

     "@capacitor/ios": "4.5.0",
     "@capacitor/keyboard": "4.1.0",
     "@capacitor/status-bar": "4.1.0",
+    "@ionic-native/geolocation": "^5.36.0",
     "@ionic/react": "^6.0.0",
     "@ionic/react-router": "^6.0.0",
     "@testing-library/jest-dom": "^5.11.9",
     "@types/react": "^18.0.17",
     "@types/react-router": "^5.1.11",
     "@types/react-router-dom": "^5.1.7",
+    "cordova-plugin-geolocation": "^4.1.0",
     "history": "^4.9.0",
     "ionicons": "^6.0.3",
     "react": "^18.2.0",
     "workbox-streams": "^5.1.4"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "react-scripts --openssl-legacy-provider start",
     "build": "react-scripts build",
     "test": "react-scripts test --transformIgnorePatterns 'node_modules/(?!(@ionic/react|@ionic/react-router|@ionic/core|@stencil/core|ionicons)/)'",
     "eject": "react-scripts eject"

src/pages/Home.tsx

-import { IonContent, IonHeader,IonImg, IonCard, IonCardHeader, IonCardTitle, IonPage, IonTitle, IonToolbar, IonButton, IonIcon } from '@ionic/react';
-import { arrowDownCircle } from 'ionicons/icons';
+import { IonContent, IonHeader,IonImg, IonCard, IonCardHeader, IonCardTitle, IonPage, IonTitle, IonToolbar, IonButton, IonIcon, IonText } from '@ionic/react';
+import { arrowDownCircle, heart } from 'ionicons/icons';
+import { isPlatform } from '@ionic/react';
+
 import './styles/styles.css';
 
 // This is the date that is going to appear on the
 const current = new Date();
 const date = `${current.toLocaleString('default', {month: 'long'}) } ${current.getDate()}`;
 
+// Determine which platform the app is running (ios or android)
+// Compose message that will be opened with the click of a button
+const separator = isPlatform('ios') === false ? '&' : '?'
+const phoneNumber = '7877101934'
+const message = 'Hola. Tengo una emergencia, mi ubicación es esta:'
+
+const finalMessage = "sms:" + phoneNumber + separator + "body=" + message;
+
 
 const Home: React.FC = () => {
 
     <IonPage>
       <IonHeader>
         <IonToolbar>
-          <IonTitle class="ion-text-center screen-titles">TPC ❤️</IonTitle>
+          <IonTitle class="ion-text-center screen-titles">
+            <IonText>TPC</IonText> 
+            <IonButton href={finalMessage}> <IonIcon slot="icon-only" icon={heart}class="moti-download"></IonIcon></IonButton> 
+          </IonTitle>
         </IonToolbar>
       </IonHeader>
       <IonContent fullscreen>
+        
 
         {/* Card 1 */}
         <IonCard class="moti-card">

src/pages/styles/styles.css

 .screen-titles{
     color: #ffffff;
     font-size: 30px;
+    display: flex;
+    align-items: center;
 }
 
 .screen-h2 {
     align-items: center;
 }
 
+
+

tsconfig.json

     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "preserve"
   },
   "include": [
     "src"