I can't add Text with Icons in Fab
See original GitHub issueI have gone through these following points
- Check latest documentation: https://docs.nativebase.io/
- Check for existing open/closed issues for a possible duplicate before creating a new issue: https://github.com/GeekyAnts/NativeBase/issues
- Use the latest NativeBase release: https://github.com/GeekyAnts/NativeBase/releases
- Check examples from NativeBase KitchenSink https://github.com/GeekyAnts/NativeBase-KitchenSink
- For discussion purpose make use of NativeBase Slack: http://slack.nativebase.io/
- For queries related to theme, check Theme Variables from Docs and live NativeBase Theme Editor http://nativebase.io/customizer/
Issue Description
I can’t add Text next to the Fab icons. Is there any way to do this? I used styled-components/native with NativeBase components.
This is my code:
<FloatingButton
active={isActive}
direction="up"
containerStyle={{ flex: 5 }}
position="bottomRight"
onPress={() => setActive(!isActive)}
>
<FabIcon name="md-add" />
<FabButtonIC>
<IconIC name="user-plus" size={22} color="#E8DDCB" />
</FabButtonIC>
<FabButtonEC>
<IconEC name="gear" size={22} color="#E8DDCB" />
</FabButtonEC>
<FabButtonAD>
<IconAD name="database-refresh" size={22} color="#E8DDCB" />
</FabButtonAD>
<FabButtonUser>
<IconUser name="door-open" size={22} color="#E8DDCB" />
</FabButtonUser>
<FabButtonExit>
<IconExit name="logout" size={22} color="#E8DDCB" />
</FabButtonExit>
</FloatingButton>
I need the text to appear side by side with the icons on each button.
Issue Analytics
- State:
- Created 4 years ago
- Comments:6
Top Results From Across the Web
How do i add text to my floatingActionButton? - Stack Overflow
You can use FloatingActionButton.extended to display Text and Icon in a FAB at once. FloatingActionButton.extended( onPressed: () { // when ...
Read more >How To Add Icons | Font Awesome Docs
We've updated many of our icon names in Version 6 to make them more universal and consistent. But we wanted to make sure...
Read more >How To Add Icons on HTML Website - YouTube
Learn How To Add Icons on HTML Website | Add Font Awesome Icons on website ❤️ SUBSCRIBE: https://goo.gl/tTFmPb Font Awesome Website: ...
Read more >Icon Usability - Nielsen Norman Group
To help overcome the ambiguity that almost all icons face, a text label must be present alongside an icon to clarify its meaning...
Read more >Buttons: floating action button - Material Design
A FAB performs the primary, or most common, action on a screen. It appears in front of all screen content, typically as a...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
I also need this. Is there a work around by chance?
I’m also facing the same issue.