Skip to content

Fully customizable social media floating action button for react native

License

Notifications You must be signed in to change notification settings

kpose/react-native-social-fab

Repository files navigation

react-native-floating-social-button

Fully customizable material designed floating action button component for React Native.

Battle Tested ✅ [Platform - Expo] License: MIT

React Native Floating Social Button

This package is currently only maintained for Expo managed React Native projects, support for bare React Native projects is coming soon

Installation

Add the dependency:

npm i react-native-social-fab

or

yarn add react-native-social-fab

Example Usage

To execute the example using Snack open Expo Snack link

Peer Dependencies

IMPORTANT! You need install them.
 "react": "^16.0.0-beta.5",
 "react-native": "^0.49.1"

Basic Usage

First step: import the component:

import FloatingButton from "react-native-social-fab";

Second step: Use the button

<FloatingButton
  onPressFacebook={() => alert("facebook icon pressed")}
  onPressTwitter={() => alert("Twitter icon pressed")}
  onPressInstagram={() => alert("instagram icon pressed")}
  position={{ bottom: 100, right: 60 }}
/>

Example Application

  • I just shared the example project on Expo, simply run on Snack to check what it is: via Expo

Configuration - Props

FloatingButton

Property Type Default Description
onPressFacebook function - function to be called when facebook icon is pressed
onPressTwitter function - function to be called when twitter icon is pressed
onPressInstagram function - function to be called when instagram icon is pressed
position function {bottom: 100, right: 60} Style to update button position

ToDos

  • LICENSE
  • example
  • add colors configurations
  • add more positions like left, center and right
  • use components as icon
  • hide background
  • open on mounting
  • support hide or show the component with an animation
  • change plus icon to be customizable
  • Write an article about the lib on Dev
  • migrate to TypeScript
  • allow user defined animations
  • use crazy animations |

Author

Jude Ganihu, ganihujude@gmail.com

License

React Native Floating Action Button Library is available under the MIT license. See the LICENSE file for more info.