Photo by Emile Perron on Unsplash

Create Fab Speed dial in React Native

Build fab and speed dial component without using any third party library

I am currently working on an app where I have to create a floating action button, normally referred to as FAB, with some options that must popouts on tapping on the button. As usual, I googled it first to check if I could find something easier to implement without using a heavy library-like material UI just for simple stuff. After a few minutes, I stopped searching and started building my own component so I have better control over the UI. Here is how I did that

So to achieve the target, we need to follow the below steps:

1. Create a button
2. Make it float
3. Handle the click event and save the clicked state
4. Display Speed Dial options based on clicked state

Create a button

Creating a button is easy. You just need to use the Touchability component and put some style around to make it stands out.

const FabButton = ({ onPress }) => {
  return (
    <TouchableOpacity
      onPress={onPress}
      style={[styles.fabButton, styles.shadow]}>
      <Text style={styles.text}>+</Text>
    </TouchableOpacity>
  );
};
const styles = StyleSheet.create({
  fabButton: {
    width: 42,
    height: 42,
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 100,
    backgroundColor: '#FFFF00',
  },
  shadow: {
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
  },
  text: {
    fontSize: 23,
    textAlign: 'center',
  },
});

This will create a simple circle button whose width and height are 42px and have a yellow background color. We also added some shadow so it doesn't mix up with the page content.

I used https://ethercreative.github.io/react-native-shadow-generator/ to generate a shadow class. It’s a cool tool.

Make it float

Next, we need to make it float. That means we can just put it anywhere on the screen. To do that, we should add it in a View which is on absolute position. Here is the modified code

const SpeedFabView = () => {
  return (
    <View style={styles.container}>
      <FabButton />
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    right: 20,
    bottom: 8,
    alignItems: 'flex-end'
  },
})

As you can see we have created another component that will hold our FabButton and make it absolute at any position. We also added alignItems: ‘flex-end’ that will make all the items inside the view align right. It will be useful when we add our speed dial content to it.

Handle the click event

Now we should add some interactivity which will help us to display our speed dial options on top of it. All we need to add the onPress event listener to the FAB button and then update the state.

const SpeedFabView = () => {
  const [showSpeedDial, setSpeedDial] = React.useState(null)
  const openSpeedDial = () => setSpeedDial(!showSpeedDial)
  return (
    <View style={styles.container}>
      <FabButton onPress={openSpeedDial} />
    </View>
  );
};

Basically, we used state hook to manage our state variable showSpeedDial and provide us a getter/setter setSpeedDial. Next, we added onPress event to our FabButton which will toggle the showSpeedDial. We will use this toggle state to show/hide our speed dial options.

You can read more about state hook at https://reactjs.org/docs/hooks-state.html

Let’s move on to the next and final part, the display speed options.

Display Speed Dial Options

In the last step, we populated a toggled state, setSpeedDial. Now we will use it to show/hide our display options. Here is our updated code

const SpeedFabView = () => {
  const [showSpeedDial, setSpeedDial] = React.useState(null);
  const openSpeedDial = () => setSpeedDial(!showSpeedDial);
  return (
    <View style={styles.container}>
      {showSpeedDial ? (
        <View style={styles.speedView}>
          <Button title="Option 1"></Button>
          <View style={{ height: 8 }}></View>
          <Button title="Option 2"></Button>
        </View>
      ) : null}
      <FabButton onPress={openSpeedDial} />
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    right: 20,
    bottom: 8,
    alignItems: 'flex-end'
  },
  speedView: {
    paddingVertical: 8,
  },
});

Basically, we have added 2 simple buttons in our SpeedFabView as an option and they will be visible based on the value of showSpeedDial. Now you have all the control over the UI and other stuff. Here is the final code

Hope you found this useful. Thanks for sharing.