CODEWITHSUNDEEP
reactjsreact-nativereact-native-paper
Jerry Seigle
Jerry Seigle

Reputation: 253

How to get round button using React Native Paper Fab

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,
  },
})

Upvotes: 0

Views: 3354

Answers (1)

Nooruddin Lakhani
Nooruddin Lakhani

Reputation: 6967

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,

Upvotes: 3

Related Questions