wix-incubator / react-native-keyboard-input

Use your own custom input component instead of the system keyboard
MIT License
819 stars 150 forks source link

Use native iOS keyboard color #55

Open radex opened 6 years ago

radex commented 6 years ago

RCTRootView always sets white as the backgroundcolor, which is a problem if we want to make a keyboard that looks and feels like the native iOS keyboard, like so:

simulator screen shot - iphone x - 2018-06-18 at 12 02 50

What we need for that is to have UIInputView as the background. Note that we can't just use a <View> with a solid background color, because UIInputView has a slight blur effect. We also can't pretend that a solid color is "close enough", because on iPhone X there's a little chin that has the native effect. Adding UIInputView inside the RCTRootView hierarchy also doesn't work AFAICT.

So the only solution I found is to simply remove RCTRootView's color when inserting it into RCTCustomKeyboardViewController hierarchy and it works fine.

artald commented 6 years ago

While I totally get your point, I am worried that with this change there might be an unwanted effect in case the rendered keyboard component does have a background color (you would probably see it flickering).

What do you think about supporting a background color for the root view as a param? you can set it to transparent explicitly, or to any color that you wish; if you don't pass a color it will stay as it was (backwards compatible).