https://github.com/wrathchaos/react-native-floating-action-button
Fully customizable Floating Action Button for React Native
https://github.com/wrathchaos/react-native-floating-action-button
Last synced: 6 months ago
JSON representation
Fully customizable Floating Action Button for React Native
- Host: GitHub
- URL: https://github.com/wrathchaos/react-native-floating-action-button
- Owner: WrathChaos
- License: mit
- Created: 2018-11-16T09:15:06.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-12-22T06:15:16.000Z (almost 2 years ago)
- Last Synced: 2025-03-28T05:05:54.975Z (6 months ago)
- Language: JavaScript
- Homepage: https://www.freakycoder.com
- Size: 3.83 MB
- Stars: 54
- Watchers: 2
- Forks: 4
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 
[](https://github.com/WrathChaos/react-native-button)
[](https://github.com/WrathChaos/react-native-button)
[](https://www.npmjs.com/package/react-native-floating-action-button)
[](https://www.npmjs.org/package/react-native-floating-action-button)
[](https://opensource.org/licenses/MIT)
[](https://github.com/prettier/prettier)
## Installation
Add the dependency:
```ruby
npm i react-native-floating-action-button
```
## Peer Dependencies
##### IMPORTANT! You need install them.
```json
"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
```jsx
```
### Example Application
- I just shared the example project on Expo, simply run on your device to check what it is:
[via Expo](https://exp.host/@freakycoder/react-native-floating-action-button-example) OR
[check the code](examples/App.js), 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
- [x] ~~LICENSE~~
- [ ] New example with Screenshots!
- [ ] Write an article about the lib on Medium
|
### Credits
Special thanks to [n4kz, RN Material Ripple](https://github.com/n4kz/react-native-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.