How to add button above the bottomSheet

[ilies-space]

How can we add a button above the button sheet as mentioned in the attached screenshot, noting that the button will be always above the bottomSheet even on dragging, i've been looking for an event or dedicated method to achieve that using this library

[samwyness]

You can use the animatedPosition prop to provide your own shared value, then wire it up with your button component.

https://gorhom.dev/react-native-bottom-sheet/props#animatedposition

[mustafaabobakr]

Is there a solution ?

[kashaf12]

You can use animatedPosition with useAnimatedStyle so the button follows the sheet. Here's a working example:
The key is using animatedPosition from BottomSheet, it's a SharedValue that tracks the sheet's top edge position (in pixels from the screen top) and updates automatically during drag.

Complete Example

import React, { useMemo, useSharedValue } from 'react'; import { Dimensions, Pressable, StyleSheet, View } from 'react-native'; import BottomSheet from '@gorhom/bottom-sheet'; import Animated, { useAnimatedStyle } from 'react-native-reanimated'; const { height: SCREEN_HEIGHT } = Dimensions.get('window'); const BUTTON_SIZE = 56; const BUTTON_OFFSET = 16; // Space between button and sheet function ExampleScreen() { // Create a SharedValue for animatedPosition // Initialize to the starting position of your sheet const animatedPosition = useSharedValue(SCREEN_HEIGHT * 0.75); // Example: starts at 75% down const snapPoints = useMemo(() => ['25%', '75%'], []); return ( <View style={styles.container}> {/* Your main content */} {/* Button that follows the sheet */} <FloatingButton animatedPosition={animatedPosition} /> {/* Bottom Sheet */} <BottomSheet index={0} snapPoints={snapPoints} animatedPosition={animatedPosition} > <View style={styles.sheetContent}> {/* Your sheet content */} </View> </BottomSheet> </View> ); } // Button Component function FloatingButton({ animatedPosition }) { // Calculate the minimum Y position (when sheet is collapsed) // Adjust this based on your collapsed snap point const collapsedSheetHeight = SCREEN_HEIGHT * 0.25; // 25% from snapPoints const lockedYPosition = SCREEN_HEIGHT - collapsedSheetHeight; const animatedStyle = useAnimatedStyle(() => { const sheetTopY = animatedPosition.value; const buttonYFromTop = sheetTopY - BUTTON_SIZE - BUTTON_OFFSET; // Keep button above sheet, but don't go below the locked position const minimumY = lockedYPosition - BUTTON_SIZE - BUTTON_OFFSET; const targetY = Math.min(buttonYFromTop, minimumY); return { transform: [{ translateY: targetY }], }; }, [animatedPosition]); return ( <Animated.View style={[styles.buttonContainer, animatedStyle]}> <Pressable style={({ pressed }) => [ styles.button, pressed && styles.buttonPressed, ]} onPress={() => { // Handle button press }} > {/* Your button content */} </Pressable> </Animated.View> ); } const styles = StyleSheet.create({ container: { flex: 1, }, buttonContainer: { position: 'absolute', right: 16, top: 0, zIndex: 1000, }, button: { width: BUTTON_SIZE, height: BUTTON_SIZE, borderRadius: BUTTON_SIZE / 2, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.25, shadowRadius: 3.84, elevation: 5, }, buttonPressed: { opacity: 0.7, }, sheetContent: { padding: 16, }, });

How It Works

1. animatedPosition: Pass a SharedValue<number> to BottomSheet's animatedPosition prop. The library will update this value as the sheet moves.

2. useAnimatedStyle: Use this hook to create an animated style that reads animatedPosition.value and calculates the button's translateY transform.

3. Position Calculation:

   • animatedPosition.value = Y position of sheet's top edge from screen top
   • buttonYFromTop = sheetTopY - BUTTON_SIZE - BUTTON_OFFSET = Position button above the sheet
   • minimumY = Lock the button at a minimum position when sheet is fully collapsed

4. Performance: All calculations happen on the UI thread, ensuring smooth 60fps animations.

Notes

• animatedPosition represents the top edge of the sheet from the screen top (not bottom)
• Adjust lockedYPosition based on your collapsed snap point
• Use zIndex to ensure the button appears above other content
• The button will automatically follow the sheet during drag gestures