0

As mentioned in the documentation, on Android overflow is set to hidden and cannot be changed. Hence this raises this kind of problems. My question is how can we make floating action buttons with react native. I want to have a button like this itinerary button of Google Maps. It should be somehow linked to the Empire state building view as it will move synchronously with it if the latter is dragged.

I see different ways to make it work but none of them feels good as they either create invisible views or need to propagate many props. Is there a common trick people are used to?

screenshot

Community
  • 1
  • 1
user2015762
  • 488
  • 3
  • 12

1 Answers1

0

The easiest way to create a floating button would be to utilize these in your styles for the button:

position: 'absolute',
bottom: 20,
right: 20

Or however you want it positioned. That will keep it on the lower right hand corner of the screen.

Also I'd recommend checking out a library like this one: https://github.com/mastermoo/react-native-action-button

Jason Gaare
  • 1,511
  • 10
  • 19
  • _https://github.com/mastermoo/react-native-action-button_ Yes this is a nice library to easily design my buttons. Thanks. _Or however you want it positioned. That will keep it on the lower right hand corner of the screen_ What is complicated in my use case is that I want it to be positioned relatively to "Empire State Building" view. The latter has a pan responder to handle up and down drag (just like with Google Maps native app) and I want my action button to remain at the top of this "Empire State Building" view. Hence it cannot simply be 'absolute' positioned imo. – user2015762 Sep 15 '16 at 08:28