react native fab : round button

Quite hard to integrate a Floating action button into react native.
Especially when your app is fusion = has react-native-web but can also be displayed on a desktop.

You cannot react-native link on a webapp and you cannot render anything based on native implementation.

What can you do to easily have a FAB ready to go everywhere (and even on an iPhone) ?

I have made an implementation of the floating action button and I have called it “round button”.
The purpose is to be clickable, to be visible and to not depend of the external layout (to be displayable over the screen, on top of the current display)

I could give you screenshots but better thing is to get a gist and a storybook link

Here is a comprehensive usage of that button : a button which transforms into another when long pressed :

<RoundButton align='left top' longPressText='⚙' longPressColor='#0d5da6' longPressFontColor='#FFFFFF' text='↻'
color='#dfc81f' fontColor='#FFFFFF' onClick={() => console.log('You clicked on ↻')}
onLongClick={() => console.log('You clicked on ⚙')}/>

Leave a Reply

Your email address will not be published. Required fields are marked *


This site uses Akismet to reduce spam. Learn how your comment data is processed.