Blur on KeyboardTrackingView like FB Messenger

[timothyerwin]

Hey guys,

Awesome library first of all. I just have one issue that is very hard to solve. I tried using various attempts with expo-blur but I can't get a smooth look across the bottom view and the KeyboardTrackingView

For reference I'm currently using it like this

<KeyboardTrackingView
      style={{
        bottom: 0,
        width: '100%',
        position: 'absolute',
      }}
      addBottomView
      bottomViewColor={theme.dark ? '#000' : '#fafafa'}
      trackInteractive
      revealKeyboardInteractive
      useSafeArea={true}
      scrollBehavior={KeyboardTrackingView.scrollBehaviors.FIXED_OFFSET}
      allowHitsOutsideBounds>
      {children}
    </KeyboardTrackingView>

What I really want is to replicate the experience of FB Messenger where there is a blur that goes all the way to the bottom and then when you focus shrinks to just the text input.

I'm not 100% but I think this needs to be something like another option like useBlur where the native component can handle making a single smooth blur view for the entire component.

[timothyerwin]

For reference what I'm trying to get.

The closest I can manage with expo-blur is 2 separate blurs that look disjointed due to the addBottomView