floating action button on react native

Check out this component, I think it does exactly what you're looking for: https://github.com/mastermoo/react-native-action-button


  <TouchableOpacity
    style={{
      borderWidth: 1,
      borderColor: 'rgba(0,0,0,0.2)',
      alignItems: 'center',
      justifyContent: 'center',
      width: 70,
      position: 'absolute',
      bottom: 10,
      right: 10,
      height: 70,
      backgroundColor: '#fff',
      borderRadius: 100,
    }}
  >
    <Icon name='plus' size={30} color='#01a699' />
  </TouchableOpacity>

Install Icon Packs: https://github.com/oblador/react-native-vector-icons

npm install react-native-vector-icons --save

react-native link


Adjust your button with bottom, Left, Right, Top and provide absolute position to button.

This is my code that used to made floating button

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