React Native

React Native – Button Component

Floating Action Button with Multiple Option

In this section we are going to create a floating button with multiple option. To make an Action Button in React Native we are going to use ActionButton component provided by react-native-action-button.

To make an Action Button we will use ActionButton component and for that, we have to install react-native-action-button dependency

npm install react-native-action-button --save
  1. For the icons, we will install react-native-vector-icons
npm install react-native-vector-icons --save

After that we have to link this dependency.

react-native link react-native-vector-icons


import React, { Component } from 'react';
import { StyleSheet, View, Text } from 'react-native';
import ActionButton from 'react-native-action-button';
import Icon from 'react-native-vector-icons/Ionicons';

export default class App extends Component {
  render() {
    return (
          flex: 1,
          backgroundColor: '#f3f3f3',
          justifyContent: 'center',
          alignContent: 'center',
        <Text style={{ textAlign: 'center', marginTop: 20, fontSize: 25 }}>
          Floating Action Buttons
        <ActionButton buttonColor="rgba(231,76,60,1)">
            title="Add to Watch Later"
            onPress={() => alert('Added to watch later')}>
            <Icon name="md-eye" style={styles.actionButtonIcon} />
            title="Add to Favourite"
            onPress={() => alert('Added to favourite')}>
            <Icon name="md-star" style={styles.actionButtonIcon} />
            onPress={() => alert('Share Post')}>
            <Icon name="md-share-alt" style={styles.actionButtonIcon} />

const styles = StyleSheet.create({
  actionButtonIcon: {
    fontSize: 20,
    height: 22,
    color: 'white',

Swipe Button

In this section we see how we implement swipe button in react native application. we are using SwipeButton component provided by rn-swipe-button library.

In this example, we will make a swipeable button that has success threshold =70 and has a custom title with custom properties like background color, border color, thumb icon background color, thumb icon border-color. After swiping the button it will trigger onSwipeSuccess where you can add your to-do (We are showing alert only). So let’s get started with the example. For this install the dependency

npm install rn-swipe-button --save

Component properties

containerStyles: PropTypes.object,

disabled: PropTypes.bool,

disabledRailBackgroundColor: PropTypes.string,

disabledThumbIconBackgroundColor: PropTypes.string,

disabledThumbIconBorderColor: PropTypes.string,

enableRightToLeftSwipe: PropTypes.bool,

height: PropTypes.number,

onSwipeFail: PropTypes.func,

onSwipeStart: PropTypes.func,

onSwipeSuccess: PropTypes.func,

railBackgroundColor: PropTypes.string,

railBorderColor: PropTypes.string,

railFillBackgroundColor: PropTypes.string,

railFillBorderColor: PropTypes.string,

railStyles: PropTypes.object,

resetAfterSuccessAnimDuration: PropTypes.number,

screenReaderEnabled: PropTypes.bool,

swipeSuccessThreshold: PropTypes.number, // Ex: 70. Swipping 70% will be considered as successful swipe

shouldResetAfterSuccess: PropTypes.bool,

thumbIconBackgroundColor: PropTypes.string,

thumbIconBorderColor: PropTypes.string,

thumbIconComponent: PropTypes.node,

thumbIconImageSource: PropTypes.oneOfType([

thumbIconStyles: PropTypes.object,

title: PropTypes.string,

titleColor: PropTypes.string,

titleFontSize: PropTypes.number,

titleStyles: PropTypes.object,

width: PropTypes.number,


import React, {Component} from 'react';
import { SafeAreaView, View, Text, ToastAndroid } from 'react-native';
import SwipeButton from 'rn-swipe-button';

export default class App extends Component {
  render() {
    return (
        <View style={{ padding: 15 }}>
              fontSize: 30,
              marginVertical: 40,
              textAlign: 'center'
            Example of React Native Swipe Button
            title="Swipe to Submit"
            onSwipeSuccess={() => {
              alert('Submitted Successfully!');
            railFillBackgroundColor="#e688a1" //(Optional)
            railFillBorderColor="#e688ff" //(Optional)
            thumbIconBackgroundColor="#ed9a73" //(Optional)
            thumbIconBorderColor="#ed9aff" //(Optional)
            railBackgroundColor="#bbeaa6" //(Optional)
            railBorderColor="#bbeaff" //(Optional)

Shaiv Roy

Hy Myself shaiv roy, I am a passionate blogger and love to share ideas among people, I am having good experience with laravel, vue js, react, flutter and doing website and app development work from last 7 years.

Related Articles

Leave a Reply

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

Back to top button