Get BottomSheet height

[Bartosz-L]

Is there a way to actually get the height of the bottom sheet? I can't find any examples nor solutions. It seems like it's impossible but maybe I'm missing something.

Why am I asking... Beneath my bottom sheet there are few buttons I need to be always visible. The Idea is to dynamically animate their position based on BS height. But no luck so far.

In the docs there is a small animated gif with the cloud icon above the bottom sheet. I wanted to have something similar. Buttons stay on map, but when BS is open they swipe up along with BS.

[thianphat]

Also looking for an answer to this. Thanks!

[jaakola-aleksanteri]

Same

[balloman]

See my answer here: #1350 (comment)

[songpola]

Still looking for ways

[balloman]

See my answer here: #1350 (comment)

[Bartosz-L]

I ended up using react-native-modalize and pass the button as a HeaderComponent

[balloman]

If anyone is curious on how to do this, I was able to use the animatedPostition prop on the bottom sheet! Just create an animated view and a shared value to store it, then you can connect the position of the bottom sheet to the position of your view.

const bottomSheetPosition = useSharedValue<number>(0);

<Animated.View style={{ top: bottomSheetPosition }} />

<BottomSheet animatedPosition={bottomSheetPosition} />

[HenrikZabel]

I just gave up and used an older implementation with useBottomSheetDynamicSnapPoints. I hope there will be a feature like this directly soon

[AhmetEnesKCC]

you can use runOnJs to fix this

const heightVal = useSharedValue(0);

  const handleHeight = (val: boolean) => {
    setShowButton(val);
  };

  useDerivedValue(() => {
    runOnJS(handleHeight)(heightVal.value < height * 0.8);
  }, [heightVal]);

[spagrhetti]

So helpful, thank you!

[szymonqqaz]

PERFECT, thanks!

[duyrk]

Thank you, you're a life saver