How to cover the content behind the iPhoneX safe area ?

[zcmgyu]

The input accessory view successfully avoids the home pill of iPhone X, but content behind the unsafe area is visible. Do you have any solution for this issue?

[artald]

There's a solution which is not optimal for all cases. You can add the addBottomView prop on the KeyboardAccessoryView component. It will add a view to fill the gap with a white background color. It's not optimal since there's no support for a custom view or even a custom color.

[zcmgyu]

Thanks for response. I've cheated by add View with position absolute with height: 34 to cover content. Please close this thread. (bow)

renderCoverSafeArea = () => {
    if (isIPhoneX) {
      return <View style={{
    backgroundColor: '#fff',
    height: 34,
    width,
    position: 'absolute',
    bottom: 0,
  }} />;
    }
    return null;
  };