React Native Material FAB Group Example

React Native

Nicesnippets

97

17-11-2020


Hi Guys,

In this blog, I will explain you how to create material ui fab group in react native. You can easily create material ui fab group in react native. First i will import FAB namespace from react-native-paper, after I will make material ui fab group using in react native.

Here, I will give you full example for simply display material ui fab group using react native as bellow.

Step 1 - Create project


In the first step Run the following command for create project.

expo init MaterialUiFABGroup

Step 2 - Install Package

In the step,I will install npm i react-native-paper package .

npm i react-native-paper

Step 3 - App.js

In this step, You will open App.js file and put the code.

import * as React from 'react';

import { FAB, Portal, Provider } from 'react-native-paper';

const FabGroup = () => {

const [state, setState] = React.useState({ open: false });

const onStateChange = ({ open }) => setState({ open });

const { open } = state;

return (

open={open}

icon={open ? 'calendar-today' : 'plus'}

actions={[

{ icon: 'plus', onPress: () => console.log('Pressed add') },

{

icon: 'cellphone',

label: 'Call',

color: 'green',

onPress: () => alert('Pressed call'),

},

{

icon: 'email',

label: 'Email',

color: 'firebrick',

onPress: () => alert('Pressed email'),

},

{

icon: 'bell',

label: 'Remind',

color: 'cadetblue',

onPress: () => alert('Pressed notifications'),

},

]}

onStateChange={onStateChange}

/>

);

};

export default FabGroup;

Step 4 - Run project

In the last step run your project using bellow command.

npm start

Output

It will help you...