Floating Action Button FAB in React Native Paper Chapter – 3

Hello friends, Today we would continue from where we left. In today’s tutorial we would learn about FAB also known as Floating Action Button component of React Native Paper package. As we all know react native does not have it’s own FAB component, So we have to use external FAB component each time or we can also make our own. But this tutorial is all about learning react native paper components. So in this tutorial we would learn about Floating Action Button FAB in React Native Paper Chapter – 3.

Contents in this project Floating Action Button FAB in React Native Paper Chapter – 3 :-

1. First of all we have to install React Native Paper with React Native Vector icons in our current react native project. So read my this tutorial about complete installation guide of React Native Paper.

2. Open your project’s main App.js file and import FAB, Provider as PaperProvider form ‘react-native-paper’ and Alert, StyleSheet, SafeAreaView, Text from react native.

3. Creating our main App component.

4. Creating a function named as showAlert(). We would show this message on FAB onPress and onLongPress event.

5. Creating return() block, Here we would make our main FAB component with it’s props .

Props :-

  1. style – To apply custom styling on FAB.
  2. animated – Used when we change the ICON. If pass true the icon change will be animated.
  3. color – To set ICON color.
  4. disabled – To disable the FAB.
  5. visible – To show and hide the FAB.
  6. loading – To show loading indicator.
  7. onLongPress – To set long press event.
  8. small – To set FAB size. Support Boolean value.
  9. icon – To set ICON by name. All the Icons Coming from React Native Vector Icons package.
  10. onPress – To add on press event.
  11. label – To make Extended FAB with ICON, You have to also make changes in the FAB Style.

There are more props available in the FAB, You can read all of them Here on their official page.

6. Creating Style.

7. Complete Source Code for App.js file :-

Screenshots :-

Floating Action Button FAB in React Native Paper

Leave a Reply

Your email address will not be published.