Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Add size prop to FAB

See original GitHub issue

Description. It is much difficult and an overwork to add custom styles to FAB especially when it comes to size of the FAB which doesn’t work as expected.

Solution Solution which i recommend: There should be a prop size where we can change the overall size of the fab as the default size is too big for some cases and small doesn’t work with label.

The size prop should change everything inside the FAB including padding, fontSize of label etc.

Alternatives We can achieve a similar thing by building our own component using TouchableOpacity etc and setting styles manually.

Link to snack

"react-native": "0.64.3", "react-native-paper": "4.11.1", "react-native-vector-icons": "^9.0.0",

Issue Analytics

State:
Created 2 years ago
Comments:5 (1 by maintainers)

Top GitHub Comments

2reactions

Irfanwanicommented, Feb 1, 2022

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

react-native (found: 0.64.3, latest: 0.67.2)

react-native-paper (found: 4.11.1, latest: 4.11.2)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

Already verified. This issue still exists after updating to latest versions.

1reaction

joaoGabriel55commented, Apr 18, 2022

I can take this task

Top Results From Across the Web

Fab API - Material UI - MUI

API reference docs for the React Fab component. Learn about the props, CSS, and other APIs of this exported module.

Floating Action Button: Is there a straightforward way to make ...

The proper way to change the size of a FAB button is using the size prop. size = {'small' | 'medium' | 'large'}....

Sizing Icons | Font Awesome Docs

Set up with Font Awesome in your project. Familiar with the basics of adding Font Awesome icons. By default, icons inherit the font-size...

FAB · React Native Paper

FAB. A floating action button represents the primary action in an application. ... Deprecated in v.3x - use prop size="small". Type: boolean. Whether...

React Icons with Bootstrap - examples & tutorial

To increase icon sizes relative to their container, use size prop with xs , sm , lg (33% increase), or use literal sizes...