Example of React Native Action Button | Floating Action Button

Hello developers, It’s been few days since we have posted any tutorial. So I was trying to find some NPM packages which has use for developer and I found a NPM package known as react-native-action-button. The react native action button package is used to create animated floating action button with Vector Icons in react native. The package works in both android and iOS platforms and does comes with many customization options. You can read about the package here. No we’re covering most common options in our today’s tutorial which is creating floating action button with animation and vector icons with onPress event. So in this tutorial we would learn about Example of React Native Action Button | Floating Action Button in React Native iOS Android App.

Contents in this project Example of React Native Action Button | Floating Action Button :-

1. First of all we have to install the react-native-action-button NPM package in our project. So open your project’s main Root directory in Command Prompt or Terminal and execute below command.

2. Now we have to install React Native Vector Icons npm package in our project. So again open your project’s main Root directory and execute below command. Now the main thing you have to setup Vector Icons in our react native project. I have already made a tutorial regarding to this topic. So before going further please read it from Here. You can find list of all available ICONS here.

3. After configuring complete project, It’s time to start coding for the App. So open your project’s main App.js file and import View, StyleSheet, Text and Alert component.

4. Import ActionButton from ‘react-native-action-button‘ .

5. Import Icon from ‘react-native-vector-icons/Ionicons‘ .

6. Now we have to put console.disableYellowBox = true; before string the component code. Because the react-native-action-button package display us some yellow box warning message like component will receive props has been renamed and use native drive errors. So to hide these errors we have to use the below line of code.

7. Creating ActionButton component with ActionButton.Item component to show animated floating action button.

8. Creating Style.

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

Screenshots:-

Example of React Native Action Button | Floating Action Button

Leave a Reply

Your email address will not be published.