How import cordova custom plugin in ionic project? - ios

I add my custom plugin in my project ionic 3 in this mode:
ionic cordova plugin add /path/to/custom/plugin
home.ts
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
declare var className: any;
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController) {
className.plugins.ClassName.methodName("======> WORK");
}
}
plugin.xml
<js-module src="www/ClassName.js" name="ClassName">
<clobbers target="className" />
</js-module>
<platform name="ios">
<config-file target="config.xml" parent="/*">
<feature name="ClassName">
<param name="ios-package" value="ClassName"/>
</feature>
</config-file>
<header-file src="src/ios/ClassName.h" />
<source-file src="src/ios/ClassName.m" />
</platform>
ClassName.js
function ClassName() {
}
ClassName.prototype.methodName = function(echo, successCallback, errorCallback) {
cordova.exec(successCallback, errorCallback, "ClassName", "methodName", [echo]);
};
module.exports = new ClassName();
ClassName.m
#import "ClassName.h"
#implementation ClassName
-(void)methodName:(CDVInvokedUrlCommand *)command {
NSString* echo = [command.arguments objectAtIndex:0];
NSLog(#"%#", echo);
}
#end
ClassName.h
#import <Cordova/CDVPlugin.h>
#interface ClassName : CDVPlugin
-(void)methodName:(CDVInvokedUrlCommand *)command;
#end
I build project and go in xcode to try, but simulator show only black screen and no see log by NSLog...
How i can resolve? What is the correct method to import custom plugins? Thanks

You need to ensure the platform is loaded before calling your plugin.
Use platform.ready()
constructor(public navCtrl: NavController,public platform:Platform) {
this.platform.ready().then(()=>{
className.plugins.ClassName.methodName("======> WORK");
});
}

Related

Problem with implementation of RTCMultiConnection (stream Audio) in Ionic 3.9.2 IOS version

I have a problem with the implementation of RTCMultiConnection (stream Audio) in Ionic 3.9.2. Unlike the Android version, where everything works fine, the IOS application works only one way - when user connects to an existing stream app receives audio sounds from it. If user starts new stream, nothing is working, even popup asking for permissions to the microphone is missing. The terminal does not display any errors. Has anyone of you faced such a problem?
I've also implemented this plugin
https://github.com/BasqueVoIPMafia/cordova-plugin-iosrtc/blob/master/docs/Building.md
[index.html]
<body>
<script src="https://rtcmulticonnection.herokuapp.com/dist/RTCMultiConnection.min.js"></script>
<script src="https://rtcmulticonnection.herokuapp.com/socket.io/socket.io.js"></script>
<script>
document.addEventListener("deviceready", function() {
if ((typeof device !== "undefined") && device.platform == 'iOS'){
cordova.plugins.iosrtc.registerGlobals();
}
}, false);
</script>
</body>
[home.ts]
constructor(public navCtrl: NavController, private platform: Platform) {
}
clickBtn(){
this.requestPermissions().then(() => {
this.createConnection();
});
}
createConnection() {
const RTCMultiConnection = window['RTCMultiConnection'];
const connection = new RTCMultiConnection();
connection.socketURL = 'https://apilink:9001/';
connection.socketMessageEvent = 'RTC-audio';
connection.session = {audio: true, video: false, oneway: true};
connection.bandwidth = {audio: 64};
connection.sdpConstraints.mandatory = {OfferToReceiveAudio: true,OfferToReceiveVideo: false};
connection.iceServers.push({
urls: 'turn:217.182.77.219:3478',
credential: 'credential_password',
username: 'rtc_username'
});
connection.onPeerStateChanged = this.onPeerStateChanged;
connection.onleave = this.onleave;
connection.onstream = this.onstream;
connection.onstreamended = this.onstreamended;
connection.onRoomFull = this.onRoomFull;
connection.onMediaError = this.onMediaError;
connection.openOrJoin('Channel12345');
}
onPeerStateChanged = event => {
console.log('onPeerStateChanged', event);
}
onleave = event => {
console.log('onleave', event);
}
onstream = event => {
console.log('onstream', event);
}
onstreamended = event => {
console.log('onstreamended', event);
}
onRoomFull = event => {
console.log('onRoomFull', event);
}
onMediaError = event => {
console.log('onMediaError', event);
}
requestPermissions() {
if(!this.platform.is('cordova'))
return Promise.reject('not cordova');
if (this.platform.is('android')) {
return this.requestAndroidPermissions();
}
else if (this.platform.is('ios')) {
console.log("PLATFORM IOS")
return Promise.resolve(true)
}
}
requestAndroidPermissions() {
return new Promise((resolve, reject) => {
const {permissions} = window['cordova'].plugins;
permissions.requestPermissions([
permissions.CAMERA,
permissions.MICROPHONE,
permissions.MODIFY_AUDIO_SETTINGS,
permissions.RECORD_AUDIO,
permissions.ACCESS_NETWORK_STATE,
permissions.ACCESS_WIFI_STATE
],
ok => resolve(ok),
error => reject(error)
);
})
}
}
config.xml
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="*" />
<allow-intent href="itms-apps:*" />
<hook src="hooks/iosrtc-swift-support.js" type="after_platform_add" />
<preference name="ios-XCBuildConfiguration-ENABLE_BITCODE" value="NO" />
<config-file parent="NSMicrophoneUsageDescription" target="*-Info.plist">
<string>App uses your microphone to make calls.</string>
</config-file>
<config-file parent="NSCameraUsageDescription" target="*-Info.plist">
<string>App uses your camera to make video calls.</string>
</config-file>
...
</platform>
I want to add ability to start new stream on IOS, because now it's not working.

Ionic 4 splash screen not hiding in production mode

I have build an app everything is working perfectly. When i run the app through
ionic cordova run android
But which i run the app in production mode splash screen is not hiding. Alert is also not showing up on platform.ready()
ionic cordova run android --prod --release
here is config.xml
<preference name="SplashMaintainAspectRatio" value="true" />
<preference name="FadeSplashScreenDuration" value="300" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="SplashScreen" value="screen" />
<preference name="AutoHideSplashScreen" value="false" />
<preference name="SplashScreenDelay" value="3000" />
app.component.ts
export class AppComponent {
constructor(
private platform: Platform,
private splashScreen: SplashScreen,
private statusBar: StatusBar
) {
this.initializeApp();
}
initializeApp() {
this.platform.ready().then(() => {
alert('YES'); //this also not showing in production mode
this.statusBar.styleDefault();
this.splashScreen.hide();
});
}
}
Sorry! I had installed a native plugin cordova-plugin-x-socialsharing and I did not added it to the provider array in app.module.ts.
After adding it the native plugin to app.module.ts everything was perfect.
import { SocialSharing } from '#ionic-native/social-sharing/ngx';
#NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [
BrowserModule,
IonicModule.forRoot(),
AppRoutingModule
],
providers: [ // Add Native plugins in this array
StatusBar,
SplashScreen,
SocialSharing,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}

React Native tabbar flickering

I have used React native native base library for Tabbar with 4 screens but it is flickering while switch tabs.
import React, { Component } from 'react';
import { Container, Header, Content, Tab, Tabs } from 'native-base';
import Tab1 from './tabOne';
import Tab2 from './tabTwo';
​export default class TabsExample extends Component {
render() {
return (
<Container>
<Header hasTabs />
<Tabs initialPage={1}>
<Tab heading="Tab1">
<Tab1 />
</Tab>
<Tab heading="Tab2">
<Tab2 />
</Tab>
<Tab heading="Tab3">
<Tab3 />
</Tab>
</Tabs>
</Container>
);
}
}
I had a similar problem when I developed an app as well in react-native. The problem for me was that I had used componentsWillUpdate for animations. Instead I did a helper function for the animations.
Don't know how the rest of your code looks like but this solved my problem.
You can be here that you want to
1, Install: switch-react-native
npm i switch-react-native
2, Using lib:
import React, { Component } from 'react';
import { View } from 'react-native';
import { Switch } from 'switch-react-native';
class SwitchExample extends Component {
render() {
return (
<View>
<Switch
height={40}
width={300}
activeText={`Active Text`}
inActiveText={`InActive Text`}
onValueChange={(value: any) => console.log(value)}
/>
</View>
);
}
}

Custom ionic/cordva plugin for iOS. Method not defined in plugin error

I am writing my custom plugin in ionic for iOS in swift but I get the following error:
ERROR: Method 'initialize:' not defined in Plugin 'RabbitMqPlugin'
I have searched in order to find solution but I could not figure out what is the problem.
Below is my code.
plugin.xml file:
<?xml version="1.0" encoding="UTF-8"?>
<plugin xmlns="http://apache.org/cordova/ns/plugins/1.0"
id="cordova-plugin-rabbitmq"
version="0.0.1">
<name>RabbitMqPlugin</name>
<js-module src="www/plugin.js" name="RabbitMqPlugin">
<clobbers target="RabbitMqPlugin" />
</js-module>
<!-- ios -->
<dependency id="cordova-plugin-cocoapod-support" />
<dependency id="cordova-plugin-add-swift-support" />
<platform name="ios">
<pods-config ios-min-version="9.0" use-frameworks="true">
</pods-config>
<pod name="RMQClient" />
<config-file target="config.xml" parent="/*">
<feature name="RabbitMqPlugin">
<param name="ios-package" value="CDVDevice"/>
</feature>
</config-file>
<source-file src="src/ios/CDVHttpRequest.swift" />
<source-file src="src/ios/CDVRabbitMq.swift" />
<source-file src="src/ios/CDVRabbitMqPlugin.swift" />
</platform>
</plugin>
plugin.js file in www folder:
var exec = require('cordova/exec');
var PLUGIN_NAME = 'RabbitMqPlugin';
var RabbitMqPlugin = {
initialize: function(phrase, cb) {
exec(cb, null, PLUGIN_NAME, 'initialize', [phrase]);
}
};
module.exports = RabbitMqPlugin;
CDVRabbitMqPlugin.swift file in src/ios folder:
import Foundation
#objc(RabbitMqPlugin) class RabbitMqPlugin : CDVPlugin {
var mRabbit:rabbitMQ!;
#objc(initialize:)
func initialize(_ command: CDVInvokedUrlCommand){
var pluginResult = CDVPluginResult(
status: CDVCommandStatus_ERROR
);
let token = command.arguments[0] as! String;
if (token.characters.count > 0) {
mRabbit = rabbitMQ(mToken: token);
pluginResult = CDVPluginResult(
status: CDVCommandStatus_ERROR
);
}
self.commandDelegate!.send(
pluginResult,
callbackId: command.callbackId
)
}
}
I have installed the cordova-plugin-add-swift-support module in order to support swift.
I have added custom plugin ionic plugin for Android and I implemented to my ionic project successfully.
Hope you can help me. Thank you
Your feature in the plugin.xml is wrong, it should be
<feature name="RabbitMqPlugin">
<param name="ios-package" value="RabbitMqPlugin"/>
</feature>
Also, if you are not naming the classes with CDVClassname, don't name the files that contain those classes starting with CDV, not sure if that will fail in Swift, but better name the Swift files with the same name the class they contain

Location permission alert on iPhone with PhoneGap and ionic

This is a follow up from:
Location permission alert on iPhone with PhoneGap
image: http://imgur.com/c2KBqbm
None of the answers there worked and I am still getting the
"/private/var ... would like to use your location" message.
I have $cordovaGeolocation in a factory
.factory('$cordovaGeolocation', ['$q', 'geo', function ($q) {
return {
getCurrentPosition: function (options) {
var q = $q.defer();
navigator.geolocation.getCurrentPosition(function (result) {
q.resolve(result);
console.log(JSON.stringify(q.resolve(result)));
}, function (err) {
q.reject(err);
}, options);
return q.promise;
},
watchPosition: function (options) {
var q = $q.defer();
var watchID = navigator.geolocation.watchPosition(function (result) {
q.notify(result);
}, function (err) {
q.reject(err);
}, options);
q.promise.cancel = function () {
navigator.geolocation.clearWatch(watchID);
};
q.promise.clearWatch = function (id) {
navigator.geolocation.clearWatch(id || watchID);
};
q.promise.watchID = watchID;
return q.promise;
},
clearWatch: function (watchID) {
return navigator.geolocation.clearWatch(watchID);
}
};
}])
and call it in a resolve in my .state
resolve : {
initialGeo: function ($cordovaGeolocation) {
var posOptions = {timeout: 1000, enableHighAccuracy: true};
return $cordovaGeolocation.getCurrentPosition(posOptions);
}
}
I cannot get rid of this awful message. I'm using the latest ionic and cordova versions with the plain 'ol phonegap geolocation plugin.
What I've tried:
- Changes to the config.xml
<feature name="Geolocation">
<param name="ios-package" value="CDVLocation" />
</feature>
<plugins>
<plugin name="Device" value="CDVDevice" />
<plugin name="Logger" value="CDVLogger" />
<plugin name="Compass" value="CDVLocation" />
<plugin name="NetworkStatus" value="CDVConnection" />
<plugin name="Debug Console" value="CDVDebugConsole" />
<plugin name="Geolocation" value="CDVLocation" />
<plugin name="SplashScreen" value="CDVSplashScreen" />
<plugin name="Battery" value="CDVBattery" />
<plugin name="Globalization" value="CDVGlobalization" />
</plugins>
Ripping out the factory and just doing
document.addEventListener("deviceready", function(){
navigator.geolocation.getCurrentPosition(onsuccess, onerror, params);
}, false);
Moving cordova.js to the first script to be loaded.
Move all js files to root.
The normal permission alert shows once. The ugly one shows 2-3 times and then doesn't show again.
Any help would be greatly appreciated.
I figured it out. If you're asking for geolocation immediately, adding a delay to the route fixed it for me.
resolve : {
waitOnMe: function ( $timeout) {
return $timeout(function () { }, 100);
}
}

Resources