KeyboardAvoidingView
@shopify/shop-minis-platform-sdk / components/KeyboardAvoidingView
KeyboardAvoidingView()
KeyboardAvoidingView(
__namedParameters):Element
A <KeyboardAvoidingView /> component that is aware of the Shop app and the Minis Platform.
Offsets are calculated correctly to take in to account the extra space required by the mini app frame and optional navigation headers.
iOS and Android are handled differently. On Android the focused input may still render slightly
overlapped by the software keyboard depending on it's styles. We aim to fix this in future by using
useAndroidKeyboardAdjustResize to change the keyboard resize mode to better match iOS
Parameters
| Parameter | Type |
|---|---|
__namedParameters | KeyboardAvoidingViewProps |
Returns
Element
Component
Example
<KeyboardAvoidingView>
<CoolList />
<SomeInput />
</KeyboardAvoidingView>
useAndroidKeyboardAdjustResize()
useAndroidKeyboardAdjustResize():
void
Switch Android keyboard modes. See: https://developer.android.com/develop/ui/views/touch-and-input/keyboard-input/visibility
Shop uses adjustPan by default but adjustResize can sometimes
work better although neither are perfect.
TODO: It might be better to be able to pass in a string for which option you want to switch to as other options might work even better (for example the chat ui use-case might be better served by the "do nothing" approach that iOS takes)
Returns
void