I’m trying to build a Instagram clone in ionic vue my question is how do I make a state that has multiple components like with a post it has a image and a description. In my code when I try to fetch the data from firebase I get one image and all the descriptions show up on one post. Please help I just started developing and I’ve been stuck on the same problem for a week now source code
5 posts - 3 participants
Hi, I read the ion-select-options via ngFor from an array. I would like to replace the options on the fly when I click on one of the inital options. In the onchange event I empty the corresponding array and replace it with the other options and that works. But when I click one of the options the ion-select closes as well. I want it to stay open. I tried all 3 interface options for that. That didn’t change anything.
I assume I have to override an animation function or something like that?
Has anyone ever done something like that?
Kind regards
4 posts - 2 participants
Pardon my ignorance, I’m new to React, but how can I use slots in Ionic React since React has no directives? I mean, lets say I’m wanting to add some FontAwesome Icons but since they don’t have the slot attribute, how can I slot them in “start” slot?
Should I create a custom component for slotting? If so, how is that possible in Ionic?
1 post - 1 participant
Hi,
I would like to register to the Ionic Slack but it’s always offline: https://ionicworldwide.herokuapp.com/
How can I join your slack workspace?
1 post - 1 participant
I try to follow the step on Hardware Back Button.
But apply in mobile to run not working.
1 post - 1 participant
Hi everyone,
I’m new to ionic and am trying to build the photo-gallery sample app for Angular aka Build Your First App. When I copy the instructed piece of code into the tab2.page.ts file, the app shows this following error.
Failed to compile.
src/app/services/photo.service.ts:1:1 - error TS1128: Declaration or statement expected.
1 public async addNewToGallery() {
My tab2.page.ts file looks as following :
import { Component } from '@angular/core';
@Component({
selector: 'app-tab2',
templateUrl: 'tab2.page.html',
styleUrls: ['tab2.page.scss']
})
export class Tab2Page {
constructor() {}
}
import { PhotoService } from '../services/photo.service';
constructor(public photoService: PhotoService) { }
addPhotoToGallery() {
this.photoService.addNewToGallery();
}
Any help would be appreciated, Thank you.1 post - 1 participant
Hi to all
I’m searching a solution to play an RTMP or RTSP source in an Ionic App (Android and iOS). We have
a streaming server from which we would to deliver video streaming to a cellular network
I’ve already tested without Success Streaming media plugin
I need the rtsp player to be embdeed inside the mobile app and not redirect me to the native player,
thus having the player inside my User Interface (more like a video player playing rtsp inside the app)
When i use this plugin to play streaming source I collect an error of this type
Error streaming MediaPlayer Error: Unknown (1) -1004
or even of this type
Error streaming MediaPlayer Error: Unknown (1) -2147483648
Furthermore I wonder if is necessary take in consideration HLS (HTTP Live Streaming) to make
compatible streaming in iOS
I tried even this solution How to stream YouTube videos in Ionic
that is an hybrid solution between Youtube Video Player (That is not a playable solution for me)
and the use of the streaming media plugin
I hope that someone could help me giving a working suggestion
Thanks in advance.
1 post - 1 participant
I’m using this plugin inside a ionic + stencil app
I’m send a write command to a characteristic that support WRITE.
If I call ble.write on Android, the callback returns me OK
If I call ble.write on iOS, the callback returns me NULL.
in both cases, I can see on my peripheral device that the command has been sent correctly.
I connect to the device like this:
connectToDevice(device){
var toast = new utils();
let tclass;
let tmessage;
console.log('----connectToDevice----');
BLE.connect(device.id).subscribe(
peripheralData => {
this.device = peripheralData;
let connectBtn = document.querySelector('#connectBtn') as any;
console.log('device connected: ', this.device);
},
error => {
console.log('connect error: ', error);
}
);
}
And then, send the command with this code:
async sendCommandNew(id){
let noteOk;
let noteError;
let data;
data = this.stringToBytes(this.commandToSend);
let timerId = setInterval(() => {
BLE.write(id, "49535343-fe7d-4ae5-8fa9-9fafd205e455", "49535343-1e4d-4bd9-ba61-23c647249616", data).then((res) => {
console.log('res: ', res);
}).catch(() => {
console.log('res no');
}
)
}, 1000);
setTimeout(() => { clearInterval(timerId); console.log('stopped'); }, 5000);
}
This is the characteristic
Inside the plugin issue many people had this problem but no solution provided.
1 post - 1 participant
I’ve suddenly come across an issue building my app on IOS with XCode and I can’t figure out what has changed to cause the issue.
I was previously able to build the App with no issues however now when I try and build it fails with this error:
error: fopen(/Users/#{user}/Library/Developer/Xcode/DerivedData/App-exhubkdpgkxayrdhquijdacqgwye/Build/Intermediates.noindex/ArchiveIntermediates/App/InstallationBuildProductsLocation/Applications/App.app/Frameworks/Cordova.framework/Cordova, rb): Permission denied (13) (in target 'App' from project 'App')
I’ve tried to chmod the permissions in the Cordova.framework directory but that hasn’t done anything.
Does anyone know what this error means or where I should be looking to try and fix it?
1 post - 1 participant
Hi, does anyone know why this plugin GitHub - coloz/cordova-plugin-esptouch: Cordova esptouch/smartconfig plugin for esp8266 and ESP32 or this one GitHub - IOCare/cordova-plugin-smartconfig: A cordova plugin for Smart Configure ESP8266 & ESP32 with Espressif Esptouch protocol. its not working in ionic react capacitor?
1 post - 1 participant
My old Macbook is really starting to chew through disk space with some of my Ionic projects. A few of my smaller projects are going over 1GB in file size. Is there a way to optimize the code and disk spaced used within each project?
Most of my projects are Cordova based, but a few are Capacitor. Not sure if one is more economical than the other.
1 post - 1 participant
I want to build into an Ionic app using VueJS. And have problems with the “swipe function”.
When I swipe right or left, I want to call a function.
For testing I used the demo code from this page: Gestures - Ionic Documentation
The Chrome Dev Tools show me the following error message:
Uncaught (in promise) TypeError: Cannot read property ‘__zone_symbol__addEventListener’ of undefined at addEventListener
<script>
import { createGesture } from '@ionic/vue';
import { ref } from 'vue';
mounted() {
const pRef = ref();
const rectangleRef = ref();
const gesture = createGesture({
el: rectangleRef.value,
onMove: (detail) => { onMove(detail); }
})
gesture.enable();
const onMove = (detail) => {
const type = detail.type;
const currentX = detail.currentX;
const deltaX = detail.deltaX;
const velocityX = detail.velocityX;
pRef.value.innerHTML = "
<div>Type: ${type}</div>
<div>Current X: ${currentX}</div>
<div>Delta X: ${deltaX}</div>
<div>Velocity X: ${velocityX}</div>
"
}
}
Can someone tell me what I am doing wrong? Or is there a tutorial somewhere?
I use:
Ionic CLI : 6.13.1 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/vue 5.6.5
@ionic/vue: ^5.4.0 => 5.6.5
7 posts - 2 participants
Hello, i started using the framework recently and i would like to know how to emit and receive events. The same as in the vue we use $ emit to send and @name to receive.
1 post - 1 participant
this is my project code
const classes = useStyles();
const [projectName, setProjectName] = useState("--------");
const [projectDescription, setProjectDescription] = useState("-------");
let { id } = useParams();
const [isSubmitting, setSubmitting] = useState(false);
const [loading, setLoading] = useState(true);
when trying to update the useState in testcase like this:
const setState = jest.fn();
const useStateSpy = jest.spyOn(React, 'useState');
useStateSpy.mockImplementationOnce( (projectName) => [projectName= "Test Project" , setState]);
useStateSpy.mockImplementationOnce((projectDescription) => [projectDescription = "Test Data" , setState]);
these values of projectname and project description not changing,.
1 post - 1 participant
this is my project code
const classes = useStyles();
const location = useLocation();
const [items, setItems] = useState()
const [user, setUser] = useState({})
just want to pass the values to " items. and user " in testcase,like this:
const user = {“name”:“Testing”,“city”:“karachi”,“country”:“pakistan”};
const items = [{“id”:1,“title”:“Dashboard”,“href”:"/app/dashboard",“icon”:“far fa-chart-bar”,“isparent”:2,“STATUS”:1}];
const setState = jest.fn();
const useStateSpy = jest.spyOn(React, 'useState');
useStateSpy.mockImplementationOnce((items) => [items= {items} , setState]);
useStateSpy.mockImplementationOnce((user) => [user= {user} , setState]);
but its now working, any solution??
1 post - 1 participant
this is my project code:
const [ipData, setIpData] = React.useState();
const [operationsLoader, setOperationsLoader] = React.useState(true);
const [operations, setOperations] = React.useState();
const [toRender, setToRender] = useState(false);
const [modalOpen, setModalOpen] = useState(false);
const [loaded, setLoaded] = React.useState(false);
const [allowed, setAllowed] = React.useState(false);
const tableRef = React.createRef();
and the component returing the html ,when loaded and allowed are set to true, by doing this and changing these states in my testcase, i am getting error:
Should have a queue. This is likely a bug in React. Please file an issue.
84 | const [operations, setOperations] = React.useState([]);
85 |
> 86 | const [toRender, setToRender] = useState(false);
| ^
87 | const [modalOpen, setModalOpen] = useState(false);
this is the code:
const useStateSpy = jest.spyOn(React, ‘useState’);
const setLoadingMock = jest.fn();
useStateSpy.mockImplementationOnce((loaded) => [loaded=“true”, setLoadingMock]);
useStateSpy.mockImplementationOnce((allowed) => [allowed=“true”, setLoadingMock]);
1 post - 1 participant
Hello, I started using ionic vue to build the tabs default by the first time I created the app.
Then I am tab1 to modify the page being look like an ionic form model (of course will have ion-input, etc,… involved with form)
But the problem is when I using the form on my phone, clicked to input, then the phone keyboard show up.
The point is when the keyboard shows up, the ion-tool-bar disappeared not showing up anymore even though I turn off the keyboard. Instead of using the bootstrap form, that no problem after the input and clicked input type something, the toolbar won’t be missing.
2 posts - 2 participants
i had the problem with NGCC compiler in ionic angular project and did many way to fix it but could not help to me.
this is my problem
2 posts - 1 participant
I am not sure why my Ionic5 / Capacitor project is misconfigured, but for most native plugins I try to install I end up with
[INFO] Looks like @angular/cli isn't installed in this project.
This package is required for this command to work properly.
? Install @angular/cli? (Y/n)
and a cascade of errors
> ng run app:build
An unhandled exception occurred: Cannot find module '@angular-devkit/build-angular/package.json'
See "/private/var/folders/1y/lt75p6d14lnfzw4gs645wtfw0000gn/T/ng-e8ZOkV/angular-errors.log" for further details.
I tried installing all missing packages manually with --save-dev but errors keep coming
npm install --save-dev @angular-devkit/build-angular@latest
...
> ng run app:build
An unhandled exception occurred: Cannot find module '@angular/compiler-cli'
and eventually I end up at
You seem to not be depending on "@angular/core" and/or "rxjs". This is an error.
How can I resolve the configuration and end up at a point where all works? Is there a magic ionic / capacitor command to update all to a consistent version or reset the project to a base configuration?
Here is my current package.json without any modifications.
{
"name": "HelloWorld",
"version": "1.2.3",
"author": "ME",
"homepage": "https://HelloWorld.com/",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"compodoc": "npx compodoc -p ./tsconfig.app.json"
},
"private": true,
"dependencies": {
"@angular/common": "^9.1.11",
"@angular/core": "^9.1.11",
"@angular/forms": "^9.1.11",
"@angular/platform-browser": "^9.1.11",
"@angular/platform-browser-dynamic": "^9.1.11",
"@angular/router": "^9.1.11",
"@capacitor/android": "^2.2.0",
"@capacitor/core": "^2.4.6",
"@capacitor/ios": "^2.2.0",
"@ionic-native/admob-free": "^5.31.1",
"@ionic-native/core": "^5.31.1",
"@ionic-native/firebase-analytics": "^5.31.1",
"@ionic-native/firebase-messaging": "^5.30.0",
"@ionic-native/geolocation": "^5.31.1",
"@ionic-native/social-sharing": "^5.31.1",
"@ionic-native/splash-screen": "^5.31.1",
"@ionic-native/status-bar": "^5.31.1",
"@ionic-native/youtube-video-player": "^5.31.1",
"@ionic/angular": "^5.5.4",
"@ionic/storage": "^2.2.0",
"@types/hammerjs": "^2.0.38",
"@types/moment-timezone": "^0.5.13",
"capacitor-plugin-app-tracking-transparency": "^2.0.0",
"cordova-admob-sdk": "^0.24.1",
"cordova-plugin-admob-free": "^0.27.0",
"cordova-plugin-androidx": "^3.0.0",
"cordova-plugin-firebase-analytics": "^5.0.0",
"cordova-plugin-firebase-messaging": "^5.0.0",
"cordova-plugin-geolocation": "^4.1.0",
"cordova-plugin-x-socialsharing": "^6.0.3",
"cordova-plugin-youtube-video-player": "^2.4.0",
"cordova-promise-polyfill": "0.0.2",
"cordova-support-android-plugin": "^1.0.2",
"cordova-support-google-services": "^1.4.1",
"d3": "^6.5.0",
"es6-promise-plugin": "^4.2.2",
"hammerjs": "^2.0.8",
"ion-bottom-drawer": "^2.0.0",
"ion2-calendar": "^3.5.0",
"moment": "^2.27.0",
"moment-timezone": "^0.5.31",
"rxjs": "^6.6.3",
"tslib": "^1.14.1",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.901.14",
"@angular/cli": "9.1.9",
"@angular/compiler": "^9.1.11",
"@angular/compiler-cli": "^9.1.11",
"@angular/language-service": "^9.1.11",
"@capacitor/cli": "^2.4.6",
"@ionic/angular-toolkit": "^2.3.3",
"@ionic/lab": "3.1.6",
"@types/d3": "5.16.3",
"@types/jasmine": "^3.6.3",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^12.19.16",
"codelyzer": "^5.1.2",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "^5.0.9",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~2.1.0",
"karma-jasmine": "~3.0.1",
"karma-jasmine-html-reporter": "^1.4.2",
"protractor": "~5.4.3",
"ts-node": "~8.3.0",
"tslint": "^6.1.3",
"typescript": "~3.8.3"
},
"description": "An Ionic project"
}
1 post - 1 participant
Hello,
My team is having an issue with our app which we created after this iOS SDK 14 update, it has content inside an iframe, and the iframe has some session data that need to use across pages, however, the data is not passing between the pages anymore inside the iframe, which used to work on iOS 13.2. We also updated to the latest cordova-ios version, but still the framed web content can’t carry the session data to next page with the new build.
1 post - 1 participant