question-mark
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.

I can't add Text with Icons in Fab

See original GitHub issue

I have gone through these following points

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:closed
  • Created 4 years ago
  • Comments:6

github_iconTop GitHub Comments

1reaction
ShavaShavcommented, Jan 28, 2020

I also need this. Is there a work around by chance?

1reaction
chill-patelcommented, Jan 26, 2020

I’m also facing the same issue.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found