react-native-social-fab

A fully customizable social media floating action button for react native

Usage no npm install needed!

<script type="module">
  import reactNativeSocialFab from 'https://cdn.skypack.dev/react-native-social-fab';
</script>

README

react-native-floating-social-button

[]

Installation

Add the dependency:

npm i react-native-social-fab

yarn add react-native-social-fab

Example

To execute the example using Snack open Expo Snack link

Peer Dependencies

IMPORTANT! You need install them.

"react": ">= 16.x",
"react-native": ">= 0.55.x",

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 Apptizer 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.