How to get round button using React Native Paper Fab

Question

How can we get a round button. Currently the button stretches from left to right. I don't want to use position absolute as I have other items that go under this fab button

import { FAB } from 'react-native-paper';

const MyComponent = () => (
  <FAB
    style={styles.fab}
    small
    icon="plus"
    onPress={() => console.log('Pressed')}
  />
);

const styles = StyleSheet.create({
  fab: {
    position: 'relative',
    margin: 16,
    right: 0,
    bottom: 0,
  },
})

score 2 · Answer 1 · answered Oct 02 '21 at 03:56

Adjust your button with bottom, left, right, top, and provide absolute position to the button.

Place the button view at the end of your main container so it won't be go under the any other views.

width: 60,  
height: 60,   
borderRadius: 30,            
backgroundColor: '#ee6e73',                                    
position: 'absolute',                                          
bottom: 10,                                                    
right: 10,

How to get round button using React Native Paper Fab

1 Answers1