36

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.

enter image description here

<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>
1
  • I have set the position as center. It does not show the text.
    – sejn
    Mar 10, 2020 at 9:19

8 Answers 8

61

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, 
2
  • 1
    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 Oct 8, 2016 at 11:39
  • 2
    doesn't work, position absolute does not work in Android.
    – Ezos
    Jun 8, 2020 at 20:33
50
  <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

3
  • you can use <Text style={{fontSize: 48}}>+</Text> inside touchable opacity if you dont want to use react native vector icons Jan 17, 2020 at 15:45
  • why such a large borderRadius?
    – MNG MAN
    Jun 21, 2020 at 20:21
  • To make circle. Jun 22, 2020 at 5:00
9

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

1
  • 3
    project is not maintained
    – chenop
    Dec 3, 2019 at 5:57
3

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

2
  • 6
    By all means add another inherently fragile third party dependency to save 15 lines of code!
    – Tony Adams
    Apr 11, 2019 at 16:27
  • 7
    @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. Apr 27, 2019 at 10:26
0

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

0

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.

0

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

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.