eddyverbruggen / cordova-plugin-native-keyboard Goto Github PK
View Code? Open in Web Editor NEW:musical_keyboard: Add a Slack / WhatsApp - style chat keyboard to your Cordova app!
:musical_keyboard: Add a Slack / WhatsApp - style chat keyboard to your Cordova app!
My question is if with this plugin I can send multimedia with text, in the same message. Similar to Whatsapp, that when I choose the image or video can write a message.
And if it's impossible any idea or plugin that how implement with cordova
Thanks
Hey @EddyVerbruggen I wanted to say thanks to the awesome plugin you wrote!
It works great with WKWebView on my app. The only thing I noticed since I started to use WKWebView is that when I open the native-keyboard and close it (by clicking the view) the header is pulled up by the space the inputfield down under needs. To demonstrate you that I added two buttons in the View
Arrow-Down-Button to hide the native-keyboard only using
hideNativeKeyboard(){
let options:NativeKeyboardOptions= <NativeKeyboardOptions>{};
options.animated = false;
this.nativeKeyboard.hideMessenger(options);
}
Arrow-Up-Button to show the keyboard again using
let options:NativeKeyboardOptions = {
onSubmit: this.sendMessage,
showKeyboard: false,
type: "twitter",
appearance: "light",
secure: false,
scrollToBottomAfterMessengerShows: true,
autoscrollElement: this.content.getScrollElement(),
keepOpenAfterSubmit: true,
animated: true,
text: "",
placeholder: 'Schreib eine Nachricht',
placeholderColor: "#DDDDDD",
textViewBackgroundColor: "#FFFFFF",
backgroundColor: "#F6F6F6",
textViewBorderColor: "#F6F6F6",
maxChars: 0,
counterStyle: 'none',
textColor: '#555555',
leftButton: {
...
},
rightButton: {
...
}
};
this.nativeKeyboard.showMessenger(options);
In action, it looks like this:
In the video you see that when I open up the keyboard to type something and it than closes, the header is cutted. And when I hide the keyboard, the header is totally normal again. this is only happening since I installed the Cordova-Plugin-WKWebView-Engine from the Ionic-Team
I don't really know what is going wrong here but for me it seems like the native input-field is pushing up the whole "screen" or Webview.
Any suggestions?
Hi Eddy,
I thought I should report this error/warning message which I've been getting ever since I started using the plugin. It never caused any issues that I am aware of so I never reported it. I thought I should report it now just in case it is related to another issue.
I get the following error from NativeKeyboard.js when I tap on the input text bar to open the keyboard:
JS Unexpected plugin result: {"contentHeight":31,"contentHeightDiff":0}
I also get the same exact error when I close the keyboard using the Android back button. I have definitely seen the error in both Android and iOS, but right now it only seems to be happening in Android.
Thanks
I am using the onKeyboardDidHide function to trigger the resizing of a list which appears on the same page as the native keyboard control. My app appears somewhat “choppy” because too much time elapses between the time the keyboard is minimized and the time the onKeyboardDidHide function is invoked. It would appear much smoother if there was an onKeyboardWillHide function that is invoked prior to the keyboard minimizing so I can start resizing the list sooner.
BTW - The cordova-plugin-keyboard plugin has both an onKeyboardWillHide and an onKeyboardWillShow callback.
Thanks
I have an Ionic 3 application and I am trying to show the nativeKeyboard on a page (ChatPage).
At the first time I do this it works just fine but if i hide the messenger and setup the messenger again with different options, It doesn't override the older ones. I don't know if this is because I haven't paid it yet but It seems very strange to me and in the README it says that only the usage is restricted to 5 minutes, not that you can just show the messenger once.
setupMessenger(){
this.platform.ready().then(()=>{
let options = {
onSubmit: this.sendMessage,
onKeyboardDidHide:this.onKeyboardHide,
onKeyboardDidShow:null,
onKeyboardWillHide:this.onKeyboardHide,
onTextChanged:null,
onKeyboardWillShow: this.onKeyboardShow,
showKeyboard: false,
type: "twitter",
appearance: "light",
secure: false,
//autocorrectionEnabled: true,
scrollToBottomAfterMessengerShows: true,
autoscrollElement: this.content.getScrollElement(),
keepOpenAfterSubmit: true,
animated: true,
text: "",
placeholder: 'Schreib eine Nachricht',
placeholderColor: "#DDDDDD",
textViewBackgroundColor: "#FFFFFF",
backgroundColor: "#F6F6F6",
textViewBorderColor: "#F6F6F6",
maxChars: 0,
counterStyle: 'none',
textColor: '#555555',
leftButton: {
type: 'ionicon',
value: '\uf474',
textStyle: 'normal',
disabledWhenTextEntered: false,
onPress: function () {
}
},
rightButton: {
type: 'ionicon',
value: '\uf474',
textStyle: 'normal',
onPress: function () {
}
}
};
NativeKeyboard.showMessenger(options);
});
}
And this is my hide Method:
hideNativeKeyboard(){
let options = {
animated: false
};
NativeKeyboard.hideMessenger(options);
}
Both get called once:
ionViewWillEnter(){
this.platform.ready().then(()=>{
this.setupMessenger();
});
}
ionViewWillLeave(){
this.hideNativeKeyboard();
}
And when I do it like this It works on the first chat page. for every other page it does not work.
Any idea what's going on ?
Currently I am using the version "version": "1.4.1"
of the nativeKeyboard
Environment information (if needed):
cli packages: (/Users/herberthart/Project/node_modules)
@ionic/cli-plugin-cordova : 1.6.1
@ionic/cli-plugin-ionic-angular : 1.4.1
@ionic/cli-utils : 1.7.0
ionic (Ionic CLI) : 3.7.0
global packages:
Cordova CLI : 7.0.1
local packages:
@ionic/app-scripts : 2.0.1
Cordova Platforms : ios 4.4.0
Ionic Framework : ionic-angular 3.5.3
System:
Node : v8.2.1
OS : macOS Sierra
Xcode : Xcode 8.3.3 Build version 8E3004b
ios-deploy : 1.9.1
npm : 5.2.0
It's currently the Twitter keyboard, but the default one makes more sense.
I try it a second time. I open this issue some weeks ago, but the issue was closed without fixing the bug (#40).
The problem still exist on Android devices when creating the app with phonegap.
If you initialize the admob ads and open the keyboard, the other part above the keyboard is black, only the Banner-Ad from AdMob will be shown after calling NativeKeyboard.showMessenger.
It is reproducable with all free AdMob Plugins for Cordova.
Looks like NativeKeyboard shrinks the WebView of my App to 0px.
Currently I have the cordova-plugin-admob-simple version 3.3.4 andcordova-plugin-native-keyboard version 1.3.2. But all of the newer version of native keyboard plugin don`t work either.
Additional:
The AdMob Plugin creates new WebViews to display the Ads.
Hi Eddy,
I am currently testing the cordova native keyboard plugin using an iPhone 5s (iOS 10.2.1) and an HTC One Mini (Android 4.2.2).
I am trying to figure out how to get the correct keyboard height when the keyboard is visible in portrait orientation and the device is changed to landscape orientation.
When the keyboard is visible and the orientation of the device is changed from portrait to landscape, the onKeyboardWillShow and onKeyboardDidShow callbacks are both called and each receives the current keyboard height. I need an accurate keyboard height so I can change the height of a scrollable list which appears above the keyboard. The list expands or contracts when the keyboard becomes visible or hidden.
The first time the orientation is changed from portrait to landscape, the onKeyboardWillShow and onKeyboardDidShow callbacks are called, but they both return the old portrait keyboard height instead of the new landscape keyboard height. The height I need in order to resize the list is the new landscape keyboard height.
When the orientation is changed back to portrait, both the onKeyboardWillShow and onKeyboardDidShow callbacks are called, but they return the landscape keyboard height instead of the new portrait keyboard height.
I am able to get the portrait keyboard height if the app is initially opened in portrait orientation, but I cannot get the correct landscape keyboard height when I need it. Is there any way to get the landscape keyboard height when the keyboard is visible and the device is initially changed to device orientation?
Thanks
Hey Eddy,
I added the keyboard plugin to my project today. You can see in this video that after I go to my chat page, then hit the back button, the keyboard input is showing up on the previous page somehow.
Thanks
P.S. There are some issues with the scrolling I referenced in the #28 post. I can work on a simple repo to see if we can get to the bottom of these issues!
I am planning to use this plugin in my app and I am wondering if it is still maintained? If yes I would buy it else I wouldn't.
Once showMessengerKeyboard
is used you won't get submit events etc that you previously passed in with showMessenger
(Android).
hai, it is really very useful. Thanks for this plugin.
We have some doubt please help me
In demo/index_all_features.html file we are added the configureNativeKeyboard how we add the "keepOpenAfterSubmit" and will / did keyboard show / hide function. i try to add but it is not working please advice.......
I would like to request that you add an onKeyboardWillShow function to compliment the onKeyboardWillHide function. It will allow me to resize my list sooner thereby increasing the response time of my app.
After implementing the new onKeyboardWillHide callback function and getting much better results when resizing my list at the time the keyboard is closed, it has now become apparent that there is too much lag time after opening the keyboard and waiting for the onKeyboardDidShow function to be called before resizing my list.
Thank you
Steps to reproduce:
Result:
Expected result:
Hi,
I'm using ionic 2 and unfortunately it is not working pretty well with this framework but this plugin is really great 👍 . Vertical scrollbar goes out of scrollable context. it does not matter if keyboard is hidden or open. It is visible on video here The issue remains also on real device.
Thanks for any help how to fix it
Michal
Came in as a feature request per email.
The hideKeyboard method does not work on Android devices.
Is it possible to bring up emojis after clicking the left button? Any options to the left button that might open up the emoji keyboard?
In plain html this brings up emoji keyboard
<input type="textShortMessage" />
The placeholder property does not work in iOS (10.x). It works fine in Android.
Nothing appears in the text input field when you add the following property:
placeholder: 'Type your message..'
https://ionicframework.com/docs/native/keyboard/
the plugin keyboard of members onKeyboardShow is support androis ,but it not work,can you tell me how to use it, I will thanks you very much.
hi @EddyVerbruggen
according to this
https://github.com/EddyVerbruggen/cordova-plugin-native-keyboard#i-heard-about-a-trial
I saw and encounter this situation
so just want to ask,is there any reason why it have such kind of restriction ?
or maybe one day have a "paid or license version" or ... thanks anyway
Hi Eddy,
When an Android device is rotated to landscape orientation, the text input bar becomes too large, the left button disappears and the Send button changes to a generic button. The device in the video is a Nexus 6P. It also occurs on an HTC One Mini.
Below is a link to a video demonstrating the issue:
Hi Eddy,
The text input bar is rendering a different height depending on what type of Android device it is running on. For example, the height might be 64 pixels on one device and 84 pixels on another. The text input bar is always the same height on every iOS device I have tested.
The only place the plugin returns a height is when the onKeyboardWillShow and onKeyboardDidShow events are called, but this height includes the height of the keyboard.
Can you return the height of the text input bar without the keyboard height in a new event that is fired when the showMessenger method is called? Or maybe add a new method which just returns the text input bar height? Does this make sense?
Thanks
Hi,
I 'm building message page with ionic 2. Unfortunately if keyboard pops up scrolling content will not scrolled to the last message.
I tried something like this
<ion-content id="content">
<div id="messages" class="messages">
<div [class]="'message message-'+ message.ownership" *ngFor="let message of messages">
<div class="message-content">
{{message.content}}
</div>
</div>
</div>
</ion-content>
autoscrollElement: document.getElementById('messages');
Thanks
Hey Eddy,
I really want to make love with you right now! What an awesome plugin. One of the biggest showstopper ever on Cordova. I hacked around so many days to get a "native like" feeling in my chatapp, and it's still buggy sometimes (timing problems) and annoying with the push-out webview and all sorts of css and js hacks to get "it back and scroll to that position without letting the keyboard overlay my chatmessages"
So I am really happy to see this. I will do a trial first, but tell me, do I have to buy that plugin for every single app? (because they have different app-ids). Or is this a one-time-fee for any app I will make?
hi @EddyVerbruggen
awesome new plugin
Android 6.0.1
[default behavior]
when I call "showMessenger" and use these option
var options = { text: "", placeholder: 'some word...', };
the keyboard show up
at the moment,the "rightButton" will not show up until I type some words in the message column (>0 word)
[suggestion behavior]
when I call "showMessenger" and use these option
var options = { text: "there have some default words", placeholder: 'some word...', };
the keyboard show up
at the moment,the message column have some default words already,but it still must type some words and the "rightButton" will show up,I suggest if the text have some default words already,just Direct display the "rightButton"
On Android this may happen if the left button of the accessory bar calls hideMessenger
.
The message toolbar is shifted down by 20px
In previous version the message toolbar was positioned ok, but the content of the webview was shifted up by 20px under the status bar
Hi,
Do you have an example of how I can invoke NativeKeyboard.showMessenger from TypeScript?
Essentially, can we import NativeKeyboard and use the functions in TypeScript?
I have an ionic3 app and only want the keyboard on one of my pages so I do not want to show the Keyboard on index.html like the demo does. Trying to figure how I can do this with ionic. Any ionic3 sample repos you know of?
Tryng to start basic with :
NativeKeyboard.showMessenger({
onSubmit: function(text) {
console.log("The user typed: " + text);
}
Thanks
When I want to monetize my App with AdMob and use this Plugin, only the Banner-Ad from AdMob will be shown after calling NativeKeyboard.showMessenger.
It is reproducable with all free AdMob Plugins for Cordova.
Looks like NativeKeyboard shrinks the WebView of my App to 0px.
Additional:
The AdMob Plugin creates new WebViews to display the Ads.
I've been experiencing issues on ionic2 on iOS (Works great on Android).
When trying to hide the keyboard during a view change. The next view doesn't properly render in the space where the keyboard used to be (White bar at the bottom) and all the actual links are no longer inline with their UI elements (See screenshot). So to click on an element you need to click just below or just above it.
I've tried playing around with running the hide keyboard in different life cycle hooks (ionViewWillLeave, ionViewDidLeave etc...) and the behaviour gets slightly better or worse but nothing solves the issue.
Great plugin though! Already worlds better than anything we have tried!
When using this Plugin together with cordova-plugin-googlemaps the chatbox will be behind the webview on the z-axis.
As discribed here:
The googlemaps plugin works by displaying the map behind the app and just adding css to each layer in the webview to make its background transparent - so it seems that it places all then native components behind the webview taking the chatbox with it.
Is there some fix to be done here? or will this be a bug with cordova-plugin-googlemaps
This only happens on Android - IOS works fine
My app is themed very dark, with black everywhere: Screenshot
The one color I can't customize with the currently available options is the outline around the native text input (as seen in the screenshot, it's still set to a light grey).
Can an option be added to allow this outline color to be changed?
Thanks for the fantastic library, by the way. I've purchased a license and will probably purchase more for future apps I create.
Add this feature with all optional properties:
NativeKeyboard.updateMessenger(
{
text: "Text updated! ",
caretIndex: 5,
showKeyboard: true
},
function() { console.log('updated ok') },
function(err) { console.log(err)}
);
Send (right button) does not perform any action any more, neither does the plus-button (left button).
There probably shouldn't be a "Format" option in the menu to start with.
After you've shown the messenger (and optionally automatically popped up the keyboard), the user may dismiss the keyboard (but the messenger bar will remain on screen unless you've called hideMessenger
).
You may now want to programmatically pop up the keyboard again, so I've just added showMessengerKeyboard
to version 1.2.0 of this plugin.
The input box is not being shown on Android 4.4. The same code works perfectly on IOS.
I get the below message in the console:
Error in showMessenger: Already showing
And it also crashes on android. Here is the log:
D/STATUSBAR-IconMerger( 1031): checkOverflow(240), More:false, Req:false Child:3
D/AndroidRuntime(24451): Shutting down VM
W/dalvikvm(24451): threadid=1: thread exiting with uncaught exception (group=0x41803da0)
E/AndroidRuntime(24451): FATAL EXCEPTION: main
E/AndroidRuntime(24451): Process: com.app.android, PID: 24451
E/AndroidRuntime(24451): java.lang.NullPointerException
E/AndroidRuntime(24451): at nl.xservices.plugins.nativekeyboard.lib.NativeKeyboardImpl.cleanup(NativeKeyboardImpl.java:432)
E/AndroidRuntime(24451): at nl.xservices.plugins.nativekeyboard.lib.NativeKeyboardImpl.access$1400(NativeKeyboardImpl.java:47)
E/AndroidRuntime(24451): at nl.xservices.plugins.nativekeyboard.lib.NativeKeyboardImpl$8$1.onAnimationEnd(NativeKeyboardImpl.java:411)
E/AndroidRuntime(24451): at android.view.animation.Animation$3.run(Animation.java:374)
E/AndroidRuntime(24451): at android.os.Handler.handleCallback(Handler.java:733)
E/AndroidRuntime(24451): at android.os.Handler.dispatchMessage(Handler.java:95)
E/AndroidRuntime(24451): at android.os.Looper.loop(Looper.java:146)
E/AndroidRuntime(24451): at android.app.ActivityThread.main(ActivityThread.java:5653)
E/AndroidRuntime(24451): at java.lang.reflect.Method.invokeNative(Native Method)
E/AndroidRuntime(24451): at java.lang.reflect.Method.invoke(Method.java:515)
E/AndroidRuntime(24451): at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:1291)
E/AndroidRuntime(24451): at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1107)
E/AndroidRuntime(24451): at dalvik.system.NativeStart.main(Native Method)
W/ActivityManager( 831): Force finishing activity com.app.android/.MainActivity
D/SensorManager( 1201): unregisterListener ::
I/dumpstate(24738): begin
I/SpenGestureManager( 831): setFocusWindow0
D/PointerIcon( 831): setMouseIconStyle1 pointerType: 1001iconType:101 flag:0
D/PointerIcon( 831): setMouseCustomIcon IconType is same.101
D/STATUSBAR-StatusBarManagerService( 831): manageDisableList what=0x0 pkg=WindowManager.LayoutParams
D/CrashAnrDetector( 831): processName: com.app.android
D/CrashAnrDetector( 831): broadcastEvent : com.app.android data_app_crash
I/ThermalCoreControl( 831): ******* gpu temp[0] : 41
I/ThermalCoreControl( 831): ******* gpu temp[1] : 46
I/ThermalCoreControl( 831):
I/ThermalCoreControl( 831): >>> ++++***
W/ContextImpl( 831): Calling a method in the system process without a qualified user: android.app.ContextImpl.sendBroadcast:1515 com.android.server.analytics.data.collection.application.CrashAnrDetector.broadcastEvent:296 com.android.server.analytics.data.collection.application.CrashAnrDetector.processDropBoxEntry:254 com.android.server.analytics.data.collection.application.CrashAnrDetector.access$100:60 com.android.server.analytics.data.collection.application.CrashAnrDetector$1.onReceive:102
I/SurfaceFlinger( 229): id=198 createSurf (1x1),1 flag=4, jos
D/KeyguardUpdateMonitor( 1031): sendKeyguardVisibilityChanged(true)
D/KeyguardUpdateMonitor( 1031): handleKeyguardVisibilityChanged(1)
D/KeyguardUpdateMonitor( 1031): sendKeyguardVisibilityChanged(true)
D/KeyguardUpdateMonitor( 1031): handleKeyguardVisibilityChanged(1)
D/ThermalMonitor( 831): Foreground Application Changed: com.google.android.googlequicksearchbox
D/KeyguardUpdateMonitor( 1031): sendKeyguardVisibilityChanged(true)
D/KeyguardUpdateMonitor( 1031): handleKeyguardVisibilityChanged(1)
D/KeyguardUpdateMonitor( 1031): sendKeyguardVisibilityChanged(true)
D/KeyguardUpdateMonitor( 1031): handleKeyguardVisibilityChanged(1)
E/android.os.Debug( 831): !@Dumpstate > sdumpstate -k -t -z -d -o /data/log/dumpstate_app_error
D/KeyguardUpdateMonitor( 1031): sendKeyguardVisibilityChanged(true)
D/KeyguardUpdateMonitor( 1031): handleKeyguardVisibilityChanged(1)
E/SMD ( 223): DCD ON
W/ActivityManager( 831): mDVFSHelper.acquire()
V/WindowManager( 831): rotationForOrientationLw(orient=5, last=0); user=0 USER_ROTATION_LOCKED sensorRotation=-1 mLidState=-1 mDockMode=0 mHdmiPlugged=false mAccelerometerDefault=false gripRotationLock=false
D/KeyguardUpdateMonitor( 1031): sendKeyguardVisibilityChanged(true)
D/KeyguardUpdateMonitor( 1031): handleKeyguardVisibilityChanged(1)
D/KeyguardUpdateMonitor( 1031): sendKeyguardVisibilityChanged(true)
D/KeyguardUpdateMonitor( 1031): handleKeyguardVisibilityChanged(1)
D/PhoneStatusBar( 1031): setSemiTransparentMode=false, mTransparentMode=false, mSemiTransparentMode=false, mMultiWindowMode=false
D/PhoneStatusBar( 1031): checkBarMode(0)
D/StatusBarManagerService( 831): semi p:1233,o:f
I/SurfaceFlinger( 229): id=199 createSurf (720x1280),1 flag=4, HEL
D/KeyguardUpdateMonitor( 1031): sendKeyguardVisibilityChanged(true)
D/KeyguardUpdateMonitor( 1031): handleKeyguardVisibilityChanged(1)
D/KeyguardUpdateMonitor( 1031): sendKeyguardVisibilityChanged(true)
D/KeyguardUpdateMonitor( 1031): handleKeyguardVisibilityChanged(1)
D/KeyguardUpdateMonitor( 1031): sendKeyguardVisibilityChanged(true)
D/KeyguardUpdateMonitor( 1031): handleKeyguardVisibilityChanged(1)
D/PhoneStatusBar( 1031): checkBarMode(2)
D/STATUSBAR-StatusBarManagerService( 831): manageDisableList what=0x0 pkg=WindowManager.LayoutParams
D/KeyguardUpdateMonitor( 1031): sendKeyguardVisibilityChanged(true)
D/KeyguardUpdateMonitor( 1031): handleKeyguardVisibilityChanged(1)
D/KeyguardUpdateMonitor( 1031): sendKeyguardVisibilityChanged(true)
D/KeyguardUpdateMonitor( 1031): sendKeyguardVisibilityChanged(true)
D/KeyguardUpdateMonitor( 1031): handleKeyguardVisibilityChanged(1)
D/KeyguardUpdateMonitor( 1031): handleKeyguardVisibilityChanged(1)
E/wpa_supplicant( 1021): IAPP SNAP_HDR Mismatch
W/ActivityManager( 831): mDVFSHelper.release()
D/KeyguardUpdateMonitor( 1031): sendKeyguardVisibilityChanged(true)
D/KeyguardUpdateMonitor( 1031): handleKeyguardVisibilityChanged(1)
D/KeyguardUpdateMonitor( 1031): sendKeyguardVisibilityChanged(true)
D/KeyguardUpdateMonitor( 1031): handleKeyguardVisibilityChanged(1)
D/KeyguardUpdateMonitor( 1031): sendKeyguardVisibilityChanged(true)
D/KeyguardUpdateMonitor( 1031): handleKeyguardVisibilityChanged(1)
D/SSRMv2:SIOP( 831): SIOP:: AP = 380, Delta = 10
I/ThermalCoreControl( 831): ******* gpu temp[0] : 41
I/ThermalCoreControl( 831): ******* gpu temp[1] : 45
I/ThermalCoreControl( 831):
I/ThermalCoreControl( 831): >>> ++++***
IOS: https://s12.postimg.org/xcz6jlail/Screen_Shot_2016_11_27_at_1_22_46_PM.png
Android: https://s22.postimg.org/4kzn0dtfl/Screenshot_2016_11_27_13_20_31.png
Hi!
The plugin causes the webview crash when any other plugin is used.
Wrote email, tried to call.
Any advise on where to look to fix this?
Here are the build error logs.
PS: I have no idea about objective-c or xcode.
2016-11-18 20:43:51.228 xcodebuild[31889:7318115] CFPropertyListCreateFromXMLData(): Old-style plist parser: missing semicolon in dictionary on line 115. Parsing will be abandoned. Break on _CFPropertyListMissingSemicolon to debug.
2016-11-18 20:43:51.230 xcodebuild[31889:7318115] CFPropertyListCreateFromXMLData(): Old-style plist parser: missing semicolon in dictionary on line 115. Parsing will be abandoned. Break on _CFPropertyListMissingSemicolon to debug.
2016-11-18 20:43:51.230 xcodebuild[31889:7318115] Error Domain=NSCocoaErrorDomain Code=3840 "Unexpected character / at line 1" UserInfo={NSDebugDescription=Unexpected character / at line 1, kCFPropertyListOldStyleParsingError=Error Domain=NSCocoaErrorDomain Code=3840 "Missing ';' on line 115" UserInfo={NSDebugDescription=Missing ';' on line 115}}
Hi folks,
(Pinging @enricodeleo, @pbudner, @crissi, @AlexDisler, @jcesarmobile because you fine folks starred the repo previously)
If you are interested in BETA testing this plugin, please download it, unzip it and install it from a local folder: cordova plugin add ../../path-to-unzipped-plugin
Then take a look at demo/index.html
to see what's possible.
This plugin will give you full access to the native keyboard properties like keyboard color, keyboard type, the accessory bar, etc. As a bonus I've added an iMessage/WhatsApp/Slack - style messenger component which you can play with.
This is all available for iOS, I may add the messenger component for Android later. Not sure yet. I'm also not sure yet if there will be a FREE/PRO version of this plugin, but during the BETA it's all available of course.
If you have any feedback about the features or find issues please just dump 'em in this issue as a comment.
Thanks in advance,
Eddy
Hi Eddy,
I'm trying to use your plugin for a my personal project.
To improve the performances I've switched from UIWebView to WKWebView.
In this operation I've seen that while I'm using your plugin (even just using the function showMessenger) and try to use another plugin by the keyboard's left button (or with a custom button in the view), the view seems "freezed".
In fact, if I try to tap the screen, trying to click again the same button clicked one moment ago, the app seems blocked.
but if I try to put the app in background and immediately in foreground, the view it's updated, and I can saw what I've done.
I've try different plugins and the bug happen with all of them.
Can you help me please?
Best Regards
Hi,
This is what I get when I add it to a project with the latest Ionic bits.
I copied over the demo code to my project. See video:
TypeScript file looks like this:
import { Component, OnInit, ElementRef } from '@angular/core';
import { Observable } from 'rxjs';
import { User } from '../../models/user.model';
import { UsersService } from '../../services/users.service';
import { Thread } from '../../models/thread.model';
import { ThreadsService } from '../../services/threads.service';
import { Message } from '../../models/message.model';
import { MessagesService } from '../../services/messages.service';
//import { Keyboard } from '@ionic-native/keyboard';
import { NativeKeyboard, NativeKeyboardOptions } from '@ionic-native/native-keyboard';
@Component({
selector: 'chat-window',
templateUrl: './chat-window.component.html',
providers: [NativeKeyboard]
})
export class ChatWindowComponent implements OnInit {
messages: Observable<any>;
currentThread: Thread;
draftMessage: Message;
currentUser: User;
//nativeKeyboardOptions: NativeKeyboardOptions
constructor(public messagesService: MessagesService,
public threadsService: ThreadsService,
public UsersService: UsersService,
public el: ElementRef,
private nativeKeyboard: NativeKeyboard) {
}
ngOnInit() {
let options = {
onSubmit: (text:any) =>
{
console.log('this.sendMessage(text); ' + text);
this.sendMessage(text);
},
onKeyboardWillShow: function (height) {
console.log("keyboard will show, height is: " + height);
//appendMessage("keyboard will show, height is: " + height);
},
onKeyboardDidShow: function (height) {
console.log("keyboard shows, height is: " + height);
//appendMessage("keyboard shows, height is: " + height);
},
onKeyboardWillHide: function () {
console.log("keyboard will hide");
},
onKeyboardDidHide: function () {
console.log("keyboard did hide");
},
onTextChanged: function(newText) {
console.log("text changed to: " + newText);
//appendMessage(newText);
},
showKeyboard: true,
type: "twitter", // iOS only, default (default) | decimalpad | phonepad | numberpad | namephonepad | number | email | twitter | url | alphabet | search | ascii
appearance: "light", // iOS only, light (default) | dark
secure: false, // iOS only, default false, disables things like Emoji and Predicive text entry
autocorrectionEnabled: false, // on iOS this hides the 'predictive text' bar
scrollToBottomAfterMessengerShows: true,
autoscrollElement: document.getElementById("messages"), // default unset
keepOpenAfterSubmit: true, // default false
animated: true,
text: "This has been prefilled",
placeholder: 'Type your message..',
placeholderColor: "#DDDDDD",
textViewBackgroundColor: "#F6F6F6",
backgroundColor: "#F6F6F6",
textViewBorderColor: "#777777", // iOS only
maxChars: 140, // setting this > 0 will make the counter show up on iOS (and ignore input on Android, for now)
counterStyle: 'countdownreversed', // iOS only currently, note that 'none' still shows a counter in case maxChars is set
textColor: '#555555',
// this button is best suited for picking media (camera / cameraroll / last image) from an actionsheet
leftButton: {
type: 'ionicon', // or 'text' (Android only currently) or 'fontawesome'
value: '\uf48a', // http://ionicons.com/ - right-click and inspect the :before value (don't forget the \uf !)
//color: '#ff0000', // default blue on iOS, grey on Android
textStyle: 'normal', // if type is 'text', you can set this to 'normal' (default), 'bold', 'italic'
disabledWhenTextEntered: false, // default false
onPress: function () {
// if (window.plugins && window.plugins.actionsheet) {
// window.plugins.actionsheet.show({
// androidTheme: window.plugins.actionsheet.ANDROID_THEMES.THEME_DEVICE_DEFAULT_LIGHT,
// buttonLabels: ['Take Photo or Video', 'Use Last Photo Taken', 'Choose From Library'],
// addCancelButtonWithLabel: 'Cancel'
// }, function(index) {
// if (index != 4) { // which is 'cancel'
// console.log("Picked index " + index + ".. you'll need to implement the rest yourself ;)");
// }
// });
// } else {
// alert("Left button pressed - if you install cordova-plugin-actionsheet you'll see a nice ActionSheet in this demo.");
// }
}
},
rightButton: {
type: 'text', // or 'fontawesome' or 'ionicon', default 'text'
value: 'Send', // 'fa-battery-quarter', // '\uf2c3', // 'Send', // default 'Send'
textStyle: 'bold', // 'normal' (default), 'bold', 'italic'
//color: '#FF0000', // default iOS blue
onPress: function () {
console.log("Right button was pressed - text was passed to 'onSubmit' if provided.");
}
}
};
var onSuccess = function () {
console.log("Show Messenger succeeded!");
};
var onError = function (message) {
console.log("Got error message: " + message);
};
this.nativeKeyboard.showMessenger(options);
Interested in purchasing this if it works well in a POC.
Thanks
On Android devices, the keyboard does not obey the global device setting for capitalizing first letters of sentences (as can also be seen from the awesome GIFs in the README :))
Hi Eddy,
It would be very powerful if you offered an additional row of user-defined buttons (up to 5) that appeared in the input bar below the textbox. The input bar should only expand to accommodate the row of buttons if at least 1 button is defined. The buttons can be used for additional actions or to indicate attachments such as photos. They would not replace the current left and right buttons and would require the same type of functionality.
Thank you.
Is it possible to initialize the text input field with text (any number of characters) that I specify? If the user types in text and then closes the keyboard without pressing the Send button, I need to restore that text when the user opens the keyboard again in certain cases. I need to make the decision as to what text gets initialized. The text that was last entered should not always be restored the next time the keyboard is opened.
Thanks
Nice plugin btw! I need to programmatically hide the keyboard and return to the initial state. NativeKeyboard.hideMessenger won't work because it hides everything.
Hi Eddy,
The following events fire when the input bar and keyboard are visible and the device orientation changes to landscape or portrait:
onKeyboardWillHide, onKeyboardDidHide, onKeyboardWillShow and onKeyboardDidShow
The keyboard remains visible when the orientation is changed. These events do not fire when you change the orientation while the input bar is visible and the keyboard is hidden. Was this intentional?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.