floating action button on react native

Question

I want to use a floating action button in react native android in bottom right corner of the screen. But I am not able to do so.

The CreateButton component contains floating button code. I called the CreateButton component after the list View and I want to show this button on the ListView android component with transparent overlay and fixed position in bottom right.

<DrawerLayoutAndroid
     drawerWidth={300}
     drawerPosition={DrawerLayoutAndroid.positions.Left}
     renderNavigationView={() => navigationView}>
     <View style={styles.navBar}>
       <TouchableOpacity style={styles.menuIconButton}>
         <Image style={styles.menuIcon} source={{uri : 'https://cdn1.iconfinder.com/data/icons/basic-ui-elements-plain/422/                 06_menu_stack-128.png'}}/>
       </TouchableOpacity>
       <Text style={styles.appName}>LifeMaker</Text>
       <TouchableOpacity style={styles.smokeIconButton}>
         <Image style={styles.smokeIcon} source={{uri : 'http://avtech.com/images/home/icons/Icon_Smoke_&_Fire.png'}}/>
       </TouchableOpacity>
     </View> 
     <ToolbarAndroid                                            
         title="AwesomeApp"                                     
         onActionSelected={this.onActionSelected}/>
    <ListView
      dataSource={this.state.dataSource}                       
      renderRow={this._renderSmokeSignals}/>      
    <CreateButton/> //this is floating button component call
</DrawerLayoutAndroid> 
    //this is floating button component (<CreateButton>)
    <View style={styles.createButton}>
      <AccentColoredFab>                                       
        <Icon                              
          name='ion|plus'
          size={25}      
          color='#000000'                                      
          style={styles.icon}
        />                                                     
      </AccentColoredFab>                  
     </View>

Alfi

I have set the position as center. It does not show the text. – Cystocarp

Answer 1

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, 

Alfi

Tried with zIndex first, but position: absolute made a trick to display it where needed. Just reorder code so FAB would be after all other elements if it's still covered by something else – Madalinemadalyn

doesn't work, position absolute does not work in Android. – Isolecithal

It nice to add an elevation to make the button stands out of it background with a shadow – Willywilly

Answer 2

  <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

Byelaw

you can use <Text style={{fontSize: 48}}>+</Text> inside touchable opacity if you dont want to use react native vector icons – Single

why such a large borderRadius? – Butene

To make circle. – Byelaw

Answer 3

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

Poppycock

project is not maintained – Nikaniki

Answer 4

No need to create yours you can just use React Native Action Button it's easy to integrate into your project.

Maladroit

By all means add another inherently fragile third party dependency to save 15 lines of code! – Oud

@TonyAdams being mean doesn't add value here, I get your point but that's not how to put it, this is a two-year-old answer plus the library had no issues, it was something I used and had more features that a 15 line implementation. – Maladroit

Answer 5

Couple of things you can try 1.borderWidth=0px 2. Set min api level to 21.

Debutante

Answer 6

I had the same problem, I have tried Pankaj Thakur solution, but it didn't solve it for me (the FAB still relative to scrollList). So I using Top property solved it for me.

Greggs

Answer 7

Here are more repos that are still maintained till now (Dec 2019):

https://github.com/santomegonzalo/react-native-floating-action
https://github.com/WrathChaos/react-native-floating-action-button

Nikaniki

Answer 8

I used this package which works well. Even though this question has the answer I thought this answer would help others.

Occasionalism