How to add a floating action button on React Native

Sometimes, we want to add a floating action button on React Native.

In this article, we’ll look at how to add a floating action button on React Native.

How to add a floating action button on React Native

To add a floating action button on React Native, we can use the TouchableOpacity and Icon components.

For instance, we write:

import * as React from 'react';
import { TouchableOpacity, View } from 'react-native';
import Constants from 'expo-constants';
import { Card } from 'react-native-paper';
import { Icon } from 'react-native-elements';

export default function App() {
  return (
    <View style={{ justifyContent: 'center', alignItems: 'center', flex: 1 }}>
      <TouchableOpacity
        style={{
          borderWidth: 1,
          borderColor: 'rgba(0,0,0,0.2)',
          alignItems: 'center',
          justifyContent: 'center',
          width: 70,
          position: 'absolute',
          bottom: 10,
          right: 10,
          height: 70,
          backgroundColor: '#fff',
          borderRadius: 100,
        }}>
        <Icon name="plus" size={30} color="#01a699" />
      </TouchableOpacity>
    </View>
  );
}

to position that TouchableOpacity component with position, bottom, and right properties.

We set borderRadius to 100 to make it round.

And we set justifyContent and alignItems to 'center' to center the contents.

Next, we add an Icon in it to show an icon inside the button.

Conclusion

To add a floating action button on React Native, we can use the TouchableOpacity and Icon components.