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.

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

expo init MaterialUiFABGroup 

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

npm i react-native-paper

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

import * as React from 'react';
import { Text, StyleSheet } from 'react-native';
import { FAB, Portal, Provider ,Appbar } from 'react-native-paper';

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

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

  const { open } = state;

  const _goBack = () => console.log('Went back');

  const _handleSearch = () => console.log('Searching');

  const _handleMore = () => console.log('Shown more');

  return (
    <Provider>
    <Appbar.Header>
      <Appbar.BackAction onPress={_goBack} />
      <Appbar.Content title="Mywebtuts" subtitle="Subtitle" />
      <Appbar.Action icon="magnify" onPress={_handleSearch} />
      <Appbar.Action icon="dots-vertical" onPress={_handleMore} />
    </Appbar.Header>
    <Text style={{ textAlign:'center',fontSize: 30 }}>
      React Native Material FAB Group Tutorial
    </Text>
      <Portal>
        <FAB.Group
          open={open}
          icon={open ? 'calendar-today' : 'plus'}
          actions={[
            { icon: 'plus', onPress: () => console.log('Pressed add') },
            {
              icon: 'star',
              label: 'Star',
              onPress: () => console.log('Pressed star'),
            },
            {
              icon: 'email',
              label: 'Email',
              onPress: () => console.log('Pressed email'),
            },
            {
              icon: 'bell',
              label: 'Remind',
              onPress: () => console.log('Pressed notifications'),
              small: false,
            },
          ]}
          onStateChange={onStateChange}
          onPress={() => {
            if (open) {
              // do something if the speed dial is open
            }
          }}
        />
      </Portal>
    </Provider>
  );
};

export default MyComponent;

In the last step run your project using bellow command.

npm start

It will help you...