How to build a floating action button on top of bottom sheet and it should move along the sheet as it move up and down?

Question

Actually I need to build a floating action button on top of bottom sheet in react native with gorhom react native bottomsheet library? I have attached an image of the problem ?

I am trying to get it similar to lyft ui but I couldn't do it.

Can anyone help me build this in react native with gorhom || https://ui.gorhom.dev/

Answer 1

There is a prop footerComponent just wrap your View with

1. Don't forget BottomSheetModalProvider at the root of your project

   import { BottomSheetFooter, } from '@gorhom/bottom-sheet';

    <BottomSheetFooter>
           ...your custom view
    </BottomSheetFooter>
   

You can refer to this https://ui.gorhom.dev/components/bottom-sheet/components/bottomsheetfooter