JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 32
  • Score
    100M100P100Q51885F
  • License MIT

Fully customizable Floating Action Button for React Native.

Package Exports

  • react-native-floating-action-button

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-floating-action-button) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Native Bottom Bar

Battle Tested ✅

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

npm version npm Platform - Android and iOS License: MIT styled with prettier

React Native Floating Action Button

Installation

Add the dependency:

npm i react-native-floating-action-button

Peer Dependencies

IMPORTANT! You need install them.
"react": ">= 16.x",
"react-native": ">= 0.55.x",
"react-native-vector-icons": ">= 6,x,x",
"react-native-material-ripple": ">= 0.8.x",
"react-native-dynamic-vector-icons": ">= x.x.x"

Basic Usage

<FloatingActionButton
    text="Share"
    iconName="md-share"
    iconType="Ionicons"
    iconColor="purple"
    textColor="purple"
    shadowColor="purple"
    rippleColor="purple"
/>

Example Application

  • I just shared the example project on Expo, simply run on your device to check what it is: via Expo OR check the code, and yes! :) all of the images, screenshots are directly taken from the this example. Of course, you can simply clone the project and run the example on your own environment.

Configuration - Props

BottomBar:
Property Type Default Description
style style container use this to change the main FAB's style
containerStyle style containerStyle use this to change the main container style (Do not recommended!)
shadowStyle style shadowStyle changes the FAB's current shadow style, you can implement your own shadow
materialShadow boolean false makes the special material shadow style like shown as example
size number 50 use this to change FAB's whole size
backgroundColor color #FBFBFD use this to change the main FAB's color
shadowColor color #B2B2B2 use this to change FAB's shadow color
rippleColor color rgba(110, 157, 251, 1.0) use this to change FAB's ripple color
rippleContainerBorderRadius number 35 use this to change FAB's ripple container border radius if you have a custom container style with different radius, you need to use this
disabled boolean false disabled the ripple effect
iconName string null(will be fixed) changes the icon itself with using react-native-vectors
iconType string null(will be fixed) changes the icon itself with using react-native-vectors
iconSize number 30 changes the inside of the icon's size
iconComponent component Icon it uses the react-native-dynamic-vector-icons' Icon component, you can implement your own component rather than Icon
textDisable boolean false use this to change disable bottom text, if you just need to use button itself
text string null use this to change below text
textColor colors rgba(110, 157, 251, 1.0) use this to change below text color
textStyle style textStyle use this to change below text style itself

ToDos

  • LICENSE
  • New example with Screenshots!
  • Write an article about the lib on Medium |

Credits

Special thanks to n4kz, RN Material Ripple for bringing to life Floating Action Button :) Material Ripple should be on built-in feature in React Native.

Author

FreakyCoder, kurayogun@gmail.com

License

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