React Native Floating Action Button

React Native

About Lesson

In this React Native lesson we are going to learn about React Native Floating Action Button, for this we are going to use third part library that is called react native paper, so paper is a collection of customizable and production-ready components for React Native, following Google’s Material Design guidelines, also floating action button represents the primary action in an application.

First you need to install react native paper.

npm install react-native-paper

1	npm install react-native-paper

This is our FloatingButton.js file, we have added our floating button in this component, you can use FAB for creating of floating button, you can give style, icon and also an event for the button.

import React from 'react'
import { StyleSheet, View, Text } from 'react-native';
import { FAB } from 'react-native-paper';

function FloatingButton() {
    return (
       
        <FAB
            style={styles.fab}
            small = {false}
            icon="plus"
            onPress={() => console.log('Pressed')}
        />
       
        
       

    )
}


const styles = StyleSheet.create({
    fab: {
      
        position: 'absolute',
        margin: 16,
        right: 0,
        bottom:0,
        flex:1,
        
       
      },
})

export default FloatingButton

import React from 'react'

import { StyleSheet, View, Text } from 'react-native';

import { FAB } from 'react-native-paper';

function FloatingButton() {

return (

<FAB

style={styles.fab}

small = {false}

icon="plus"

onPress={() => console.log('Pressed')}

)

}

const styles = StyleSheet.create({

fab: {

position: 'absolute',

margin: 16,

right: 0,

bottom:0,

flex:1,

})

export default FloatingButton

This is our App.js file and we have added our newly component in here.

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

import FloatingButton from './components/FloatingButton';



export default function App() {
  return (
 
    <FloatingButton/>
  
  );
}


const styles = StyleSheet.create({
  fab: {
    
      position: 'absolute',
      margin: 16,
      right: 0,
      flex:1,
      
     
    },
})

import React from 'react';

import { StyleSheet, Text, View } from 'react-native';

import FloatingButton from './components/FloatingButton';

export default function App() {