Q: floating action button on react native 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>


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

A: 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, 


A:   <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


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

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

A: 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.

A: 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

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