webView keyboard without arrows and "Done" button?

[burnsting]

I know this is more React Native specific, but I figured a lot of people using the bridge would like to have this option.. Is there any way to disable the Arrows and 'Done' button above the keyboard in the webView?

I have a webView that loads a text editor that uses contentEditable text fields. But I have my own editor bar above the keyboard, and the safari bar above the keyboard makes it seem non-native.

Now it's like this: http://i.stack.imgur.com/Uz2Ly.png
But I want my own like this: http://www.geeky-gadgets.com/wp-content/uploads/2015/03/medium.jpg

I have found some solutions on how to do this, but I'm not able to implement it into the native code myself.

This code should work with iOS 9: http://stackoverflow.com/questions/19033292/ios-7-uiwebview-keyboard-issue/19042279#19042279

Here's a Cordova plugin that does the same (hideKeyboardAccessoryBar): https://github.com/driftyco/ionic-plugin-keyboard

[alinz]

It might be possible but, why would you load website inside webview?
what I mean is, let's say you are have already a website that is responsive. also you have wrote that one in either react or angular. now when you load that into webview, client needs to load css, all javascript to start showing to you the content and then you have to use some sort of bridge to tell the native side that ohh I'm done. Instead make the whole screen in native side. That is the whole concept of react-native. You can easily build your scene.

I will try to see if I can make it happen but I will encourage you to rethink about this approach.

[burnsting]

I know what you mean. As I said, it's just a text editor. My whole app is build in React Native. It's just the text editor, because the TextInput is extremely limited. I need to edit inline links, italic, paragraphs, enter to split, backspace to combine while keeping the cursor in place, fonts, colors, photos, videos and custom elements, etc, etc. And I can align it with the text editor build into my site.

If there was some sort of Rich Text in RN, it might be doable. But disabling the 300ms delay on click makes the text editor feel native (except for the Arrows/Done bar I described). I see the advantage of React Native for the rest of my app, but in this case I think loading a webView makes more sense..

I don't think it's bad to leverage the real web in React Native. And like I said, I think other people using this plugin would like the keyboard to feel 'native' too.

[alinz]

@burnsting give me couple of days and I will get back to you! Your argument is also valid.

[burnsting]

Thanks!

[remstos]

👍 @burnsting I'm actually trying to achieve exactly the same thing, a rich text editor using a js library. Almost everything works fine, but this toolbar is really annoying 😞

[burnsting]

Thanks for implementing this @kemcake !

[alinz]

It's been merged. Thank you @kemcake.