feat: `KeyboardToolbar` blur

kirillzyusko commented 5 months ago

📜 Description

Added blur and opacity props for KeyboardToolbar component to better match HIG guidelines.

💡 Motivation and Context

To have a better alignment with iOS guidelines - KeyboardToolbar should look like a continuation of the keyboard. iOS keyboard is opaque and has a blur effect. So in this PR I added an ability to have a blur effect.

I didn't want to expose an additional component from this library so I decided to give users an ability to specify their own blur component - if they are using expo they can use expo-blur library, if they use bare RN project they can use @react-native-community/blur.

However I discovered that providing a blur effect doesn't give a desired effect, because the view is not transparent by default. Unfortunatelly we can not provide opacity and put it to the style - in this case opacity will be applied to the blur and effect also will not be visible. So we need to use RGBA format for backgroundColor - we already have colors defined in theme but the opacity can be different based on project preferences, so I added opacity prop which I concatenate with existing value, so RGB+A give RGBA color and blur effect is visible.