Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

dark keyboard #20

Open
markshust opened this issue Mar 15, 2016 · 27 comments
Open

dark keyboard #20

markshust opened this issue Mar 15, 2016 · 27 comments

Comments

@markshust
Copy link

Any chance we can add dark keyboard functionality to this plugin? This was in the original ionic plugin, but it's been commented out/not working for some time. https://github.com/driftyco/ionic-plugin-keyboard/blob/47518309fb18fd388527df495ddf9aea35a9fd77/src/ios/UIWebViewExtension.m#L65

This way we can have choice of keyboard color.

2fxcu

8ot3h

@cjpearson
Copy link
Owner

I'm not opposed to including this, but I wonder why ionic removed it. Was it buggy or difficult to maintain? It would also be nice if there was support for android as well.

@markshust
Copy link
Author

Afaik the implementation changed in iOS 8, and it was just never updated :(

@cjpearson
Copy link
Owner

I did a bit of research into this. It looks like keyboardAppearance is not supported with UIWebView. Ionic's solution and this one both involve swizzling methods of the webview's internal classes with limited success.

I'm a bit hesitant to mess around too much with private API's given reports of Apple rejecting apps (#21), but if someone finds a reliable solution to this, I'd be happy to bring in a PR.

@markshust
Copy link
Author

I would avoid private API's. Apple has indeed started rejecting these http://blog.ionic.io/pluginz-be-buggin/

I'm not a native iOS developer at all; I can barely read Objective-C code. However, I submitted a fix for this accessary bar bug that doesn't use private API markshust/ionic-plugin-keyboard@9b0ff0c

This seems to be the appropriate fix for iOS 9 and dark keyboards, however it uses private API's
http://stackoverflow.com/a/33702029/832719

Is there any way the same method of my accessory bar fix can be utilized/modifying in a similar fashion for this dark keyboard? It's just a few lines, I find it a bit hard to believe that we can't have dark keyboards in cordova apps -- I was under the impression anything native can be adapted to cordova. Is this not the case?

Please excuse my complete ignorance. Web dev here ;)

@cjpearson
Copy link
Owner

It's not the method that's private, but UIWebBrowserView is an undocumented class that Apple uses within the UIWebView. It appears that Apple was running the strings tool on the binary and flagging any binary that contains the string "UIWebBrowserView". Try running strings HelloCordova.app/HelloCordova | grep UIWebBrowserView on your app to see this. Creating the string at runtime gets around this check, but there may be other tests Apple runs.

The dark keyboard isn't a limitation of Cordova, but rather UIWebView. Keyboard appearance is defined for each control. Some controls, like UITextField allow you to set it, but UIWebView does not.

@cjpearson
Copy link
Owner

I was able to get this to work based off of the iOS 9 solution. It's necessary to swizzle keyboardAppearance on both UIWebBrowserView and UITextInputTraits. You can try it by adding this code at the end of pluginInitialize.

IMP darkImp = imp_implementationWithBlock(^(id _s) {
    return UIKeyboardAppearanceDark;
});

for (NSString* classString in @[@"UIWebBrowserView", @"UITextInputTraits"]) {
    Class c = NSClassFromString(classString);
    Method m = class_getInstanceMethod(c, @selector(keyboardAppearance));

    if (m != NULL) {
        method_setImplementation(m, darkImp);
    } else {
        class_addMethod(c, @selector(keyboardAppearance), darkImp, "l@:");
    }
}

@cjpearson
Copy link
Owner

I've added support in a test branch. It seems to work for me on an iOS 8 device and iOS 9 sim.

Keyboard.keyboardStyle("light")
Keyboard.keyboardStyle("dark")

or

<preference name="KeyboardStyle" value="light" />
<preference name="KeyboardStyle" value="dark" />

@markshust
Copy link
Author

Awesome!! Thanks so much for popping it out so fast. I'll be testing it out later today.

@markshust
Copy link
Author

Sorry got behind on the holiday. Will test this out later today.

@markshust
Copy link
Author

@cjpearson this isn't working for me, on device or sim (9.3).

I tried calling keyboardStyle with both methods.

@cjpearson
Copy link
Owner

Sorry for the late reply. I'll update Xcode and see if I can reproduce this. Can you get it to work on older simulator versions?

@markshust
Copy link
Author

Sorry, no go. I'm only working with iOS 9+ right now.

@cjpearson
Copy link
Owner

I'm still unable to reproduce this. Could you give more details? Here are the steps I followed:

cordova create HelloWorld
cd HelloWorld
cordova platform add ios
cordova plugin add https://github.com/cjpearson/cordova-plugin-keyboard#dark

Add <preference name="KeyboardStyle" value="dark" /> to config.xml

cordova prepare ios

I then run it in XCode and it works fine on iPad and iPhone Sims on iOS 9.3

@markshust
Copy link
Author

Hmmm. Your example is indeed working for me.

I wonder if this is an issue with Meteor somehow (what I'm using it in), or perhaps they are running a different version of Cordova. I believe this is ok for you to merge in, as even though it wasn't working in my Meteor + Cordova app, it didn't cause any ill-advised side effects.

@maytione
Copy link

What about android ? How to force dark keyboard style

@jmordica
Copy link

I'm using your plugin in ionic 2 app and setting the preference like <preference name="KeyboardStyle" value="dark" /> doesn't seem to work. Also, neither does Keyboard.keyboardStyle("dark"). Building for 9.3

@cjpearson
Copy link
Owner

The dark feature still only exists in an experimental branch. Are you using that branch?

@jmordica
Copy link

Yes using the dark branch.

@Risingson
Copy link

Risingson commented Dec 8, 2016

How do i use the dark branch? Do i have to put
<plugin spec="https://github.com/cjpearson/cordova-plugin-keyboard/tree/dark" source="git" />
in config.xml ?

@cjpearson
Copy link
Owner

<plugin spec="https://github.com/cjpearson/cordova-plugin-keyboard.git#dark" /> should work

@maikelsgit
Copy link

@cjpearson what is the status of this. I would love to see dark keyboard support in this plugin

@cjpearson
Copy link
Owner

It should work if you install the dark branch. I haven't pulled it into the main branch yet. It does some things that Apple may not approve of, so it would have to be behind some sort of opt-in compiler flag at least. I was also considering support for other text input traits if there was the need.

@ccorcos
Copy link
Contributor

ccorcos commented Jul 24, 2018

I'd love to see a package that extends this class with the fix for those who want to use it. Something like this package: https://github.com/onderceylan/cordova-plugin-wkwebview-inputfocusfix
Not sure how to do it myself though :/

ccorcos pushed a commit to ccorcos/cordova-plugin-keyboard that referenced this issue Jul 24, 2018
ccorcos pushed a commit to ccorcos/cordova-plugin-keyboard that referenced this issue Jul 24, 2018
@miguelyoobic95
Copy link

Hey guys, any updates on this, we have a hybrid app wrapped in cordova and we have a dark mode where we want to display a dark themed keyboard. what is the best way to do this at the moment ?

@markshust
Copy link
Author

@miguelyoobic95 i haven't seen any push on this, i believe cordova is sort of in maintenance mode at the moment. i'd recommend checking out https://capacitor.ionicframework.com/docs/apis/keyboard and possibly filing a ticket with them - it's like cordova, but all the code has been updated with swift and it is being actively developed.

@gabrielribeiro
Copy link

gabrielribeiro commented Mar 27, 2019

Hey guys (@ccorcos), I've made a package with this marvellous lines of code: http://github.com/gabrielribeiro/cordova-plugin-keyboard-appearance
Thanks @cjpearson!
(Please advice me if I did something wrong)

@Aarbel
Copy link

Aarbel commented Mar 27, 2019

@gabrielribeiro thanks for your work !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

10 participants