React Native Material FAB Group Tutorial

Apr 23, 2021 . Admin

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 { 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;
Step 4 - Run project

In the last step run your project using bellow command.

npm start
Output

It will help you...

#React Native