KeyboardTrackingView - addBottomView - can't set color

[hirbod]

Description

I am using KeyboardTrackingView. I added addBottomView since I have to use useSafeArea prop. Working extremely well, but the added bottomView is always white and I can't change the backgroundColor.

I've inspected the native code and its a fixed value https://github.com/wix/react-native-ui-lib/blob/6496cb2a5b18a42699bf4293eb31a80d131f2be8/lib/ios/reactnativeuilib/keyboardtrackingview/KeyboardTrackingViewTempManager.m#L452

Related to

• [x] Components
• [ ] Demo
• [ ] Docs
• [ ] Typings

Steps to reproduce

Add addBottomView to KeyboardTrackingVIew

Expected behavior

I should be able to set the color of addBottomView, either directly with backgroundColor via style, or as a separate prop bottomViewColor

Actual behavior

Can't set the color, it is always white

More Info

Code snippet

      <KeyboardTrackingView
        style={styles.trackingToolbarContainer}
        trackInteractive={true}
        addBottomView
        scrollToFocusedInput
        manageScrollView
        requiresSameParentToManageScrollView
        useSafeArea
      >

Screenshots/Video

Environment

• React Native: 0.64.3
• React Native UI Lib: 6.11

Affected platforms

• [ ] Android
• [x] iOS
• [ ] Web

[brod-ie]

I got around this with this hack:

<>
      <KeyboardAccessoryView
        ...
        addBottomView={false}
      />
      <View
        style={{
          backgroundColor: PlatformColor("systemBackground"),
          position: 'absolute',
          bottom: 0,
          right: 0,
          left: 0,
          height: useSafeAreaInsets().bottom,
        }}
      />
</>

[hirbod]

Thanks. I already made a PR working around this issue though.

[brod-ie]

Well if this PR never makes it in, above is an easy win!

[hirbod]

True. Tbh, I wish I had that hack handy while I was searching for a solution :D. It tooked way more time for me than I thought.

[Inbal-Tish]

@hirbod Hi. You can follow PR #2013 for this feature