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.

FAB.Group Style Change Position with Style

See original GitHub issue

Current behaviour

I am trying to change the position of FAB.Group button by using style props. I want to place it next to my glass button.

Expected behaviour

The FAB’s position doesnt change at all.

Code sample

          <Portal>
            <FAB.Group 
              open={this.state.open}
              icon={'menu'}
              actions={[
                {icon: require('../assets/images/menu.png'), label:'Menu', onPress: () => console.log('Pressed add')}
              ]}
              onStateChange={({ open }) => this.setState({ open })}
              onPress={() => {this.setState({open: !this.state.open})}}
              style={{position: 'absolute', top: 50, left: 0}}
            />
          </Portal>

Screenshots (if applicable)

What have you tried

I tried style prop and change it.

Your Environment

software	version
ios or android	Android
react-native
react-native-paper
node
npm or yarn	npm
expo sdk

Issue Analytics

State:
Created 5 years ago
Comments:5

Top GitHub Comments

6reactions

gawrysiakcommented, Jan 30, 2019

hey, try using padding to reposition it

1reaction

kmuthukrcommented, Jun 26, 2022

is it possible to make the FAB expand/open downwards so that i could place the icon to the top of the screen

Top Results From Across the Web

How to change background color of FAB.Group from react ...

Show activity on this post. You almost had it, just change line below style={styles.fab}. for this other one fabStyle={styles.fab}.

Building a floating action button (FAB) component - web.dev

Start with a .fabs class for CSS to hook into for style, then add role="group" and aria-label so it's not just a generic...

FAB · React Native Paper

You can change the mode to adjust the the shadow: flat - button without a shadow. elevated - button with a shadow. style....

How to Create a Floating Action Button with Pure CSS ...

Learn how to use CSS positioning and flexbox. In this article, we are going to create the floating action button(FAB) by using Pure...

Buttons: floating action button - Material Design

Updated FABs have a boxier style with smaller corner radius, new color mappings, dynamic color compatibility, and a variation for large screens. open_in_new...