Developing an Ionic application involves establishing seamless communication between the Swift and Typescript layers

I'm facing an issue with my Ionic project (v6) using Capacitor (v4.4.0). I am trying to establish communication between the Swift layer in AppDelegate.swift and a Typescript class, but have been unsuccessful so far.

Whenever something happens in AppDelegate.swift, I need to notify my Typescript class to perform certain actions. I have tried using NotificationCenter for this purpose. In my Swift file, I have added the following code:

NotificationCenter.default.post(name: NSNotification.Name("somethingHappened"), object: nil, userInfo: userInfo)

On the Typescript side, I have implemented a NotificationService class that listens for the 'somethingHappened' event using Capacitor's App plugin. However, despite my efforts, the listener does not seem to be triggered when running the app on iPhone.

I have considered using a bridge between Swift and Typescript, but it seems that the bridge is not compatible with Capacitor 4.4.0. Therefore, I am stuck and seeking guidance on how to effectively communicate between these two layers in my Ionic project.

If anyone has any insights or suggestions on how to resolve this issue, I would greatly appreciate it!

swifttypescriptionic-frameworkbridge

Answer №1

In order to establish communication with the native layer, it is essential that you develop a capacitor plugin.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Troubleshooting the malfunction of the Angular 2 Tour of Heroes project following the separation of the app

Recently, I encountered a challenge while following a tutorial on learning Angular 2. Everything was going smoothly until I reached the point where I had to divide appcomponent into heroescomponent & appcomponent. Is there anyone else who has faced th ...

typescriptangular

The error message "Element is not defined (Object.<anonymous>)" is occurring in the context of Intro.js-react, React, Next.js, and Tailwind

Here is a code snippet: import { useState } from 'react'; import { Steps } from 'intro.js-react'; export default function Dashboard() { const [stepEnabled, setStepEnabled] = useState(true); const steps = [ { intro: &apos ...

javascriptreactjstypescriptnext.jsintro.js

Having trouble modifying the value of a textBox with ngModel and a directive

Having trouble trimming a text input and ending up with duplicate values https://i.sstatic.net/PkrxB.png New to Angular, seeking help in finding a solution View Code on StackBlitz ...

.netangulartypescript.net-coreangularjs-directive

Encountering an Issue with Stripe Payment Processing

I recently attempted to incorporate Stripe into my application by following a tutorial that appears to be outdated. Here is how my current code is structured: import Foundation import UIKit import Stripe import AFNetworking class PaymentViewController: U ...

iosswiftxcodeafnetworkingstripe-payments

Steps to filter types by a singular property assessment

export type HalfSpin = { halfspin: string } export type FullSpin = { fullspin: string } export type SpinType = | HalfSpin | FullSpin export function isHalfSpin(_: SpinType) ...

typescript

Navigating with Angular 4's router and popping up modals

I have an Angular 4 SPA application that utilizes the Angular router. I am looking to create a hyperlink that will open a component in a new dialog using Bootstrap 4. I am able to open modal dialogs from a function already. My question is, how can I achi ...

angulartypescriptangular4-router

Creating a carousel with material design aesthetics

I'm working on implementing a carousel in my setup using Angular CLI: 6.0.5, Node: 10.1.0, OS: win32 x64, and Angular: 6.0.3. However, I haven't been able to locate documentation for creating the carousel in Angular's Material Design framewo ...

angulartypescriptmaterial-designcarouselangular6

Ways to refresh the information displayed on the view when the observable data is updated

I am using an observable called getContentfulEntry to retrieve data, while also passing data from another observable known as stateService. this.langSubscription = this.stateService.getLanguage() .subscribe(val => { this.lang = val; ...

javascriptangulartypescriptrxjsangular-changedetection

What is the best way to incorporate a module from an external 'include' folder in your code?

Within my project's tsconfig.json, I have specified the following: "include": [ "src/**/*", "generated**/*" ] In the directory, there exist two files named src/main.ts and generated/data.json. The task at hand is to be able to successfully ...

typescriptwebpack

Using getter functions and Visual Studio for TypeScript

In my TypeScript classes in Visual Studio, I have been implementing getter functions. I find that using getter functions helps to clean up my code, although there is one issue that I would like to address. class Foo { doWork(){ console.log(this.bar ...

visual-studiotypescript

While attempting to utilize npm install, I encounter an error on a discord bot stating "msvsVersion is not defined."

Struggling with self-hosting a TypeScript discord bot, the setup process has been a puzzle. It's supposed to generate a build directory with an index.js file, but it's unclear. Installed Visual Studio Build Tools 2017 as required, yet running npm ...

node.jstypescriptdiscord.jssodium

Angular 2 date validation rule for dd/mm/yyyy format in forms with reactive functionality

this.seedFundForm = this.fb.group({ multipleSource: this.fb.array([]), amount:[data.amount, Validators.compose([Validators.required, Validators.pattern('[0-9]*'), Validators.maxLength(10)])], date:[data.date, Validators.compose([Valid ...

angulartypescript

Issue arises when attempting to use the useEffect hook in React with Typescript to reset states upon the component unmounting

I'm facing an issue with my useEffect cleanup when the component unmounts and setting states simultaneously. My code involves selecting a client by clicking on them and setting their ID to send in an API request: const setClient = () => { setC ...

reactjstypescriptreact-hooks

Tips for preventing duplication of the interface in Typescript React

Embarking on my first Typescript app, I am determined to maintain a structured approach by keeping styles and components in separate files. With an ambitious project scope of numerous components, I intend to utilize props for calling classes, ensuring each ...

reactjstypescriptmaterial-uitypescript-typings

Assigning an argument of type `any` to a parameter of type `Observable<IComboboxItem[]>` can be considered risky

I have a piece of code that retrieves data from the backend server. Here is the code snippet: @Injectable() export class DictionariesDatasourceFacadeService { public invoiceTemplate: IDataSource<IComboboxItem>; public replacedLegalEntity: IData ...

javascriptangulartypescript

Unable to bring in a TypeScript library that was downloaded from a GitHub fork repository

Currently, I am working on developing a GitHub app using the probot library. However, I have encountered an obstacle as outlined in this particular issue. It seems that probot does not offer support for ESM modules, which are crucial for my app to function ...

javascriptnode.jstypescriptnpm

Transforming Excel data into JSON format using ReactJS

Currently, I am in the process of converting an imported Excel file to JSON within ReactJS. While attempting to achieve this task, I have encountered some challenges using the npm XLSX package to convert the Excel data into the required JSON format. Any as ...

javascriptreactjsjsontypescriptxlsx

Press the text in a React Native TypeScript component to trigger a render

I am a newcomer to React Native and TypeScript, and I am struggling to figure out how to display something on the page of my app after a button is pressed. Below is the function I'm using: const getRandomNumber = () ={ const number = Math.fl ...

typescriptreact-nativebuttononpress

Incorporating Sass into a TypeScript-enabled Create React App

Having recently transferred a create-react-app to typescript, I've encountered an issue where my scss files are not being recognized in the .tsx components. The way I'm importing them is as follows: import './styles/scss/style.scss'; ...

reactjstypescriptsasscreate-react-app

What could be causing ESLint to run on its own configuration file while working with Typescript?

I have files named .eslintignore and eslintrc.js in close proximity. The contents of my ignore file are as follows: .eslintrc.js dist/* node_modules/* out-tsc/* However, when I access the eslintrc.js file, an error is triggered: Parsing error: ESLint was ...

typescripteslinttypescript-eslint