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> 

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,  

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