feat(fab): modernize FloatingActionButton to MD3

Author: adrcotfas

docs/docusaurus.config.js

@@ -120,9 +120,9 @@ const config = {
             DrawerSection: 'Drawer/DrawerSection',
           },
           FAB: {
-            FAB: 'FAB/FAB',
-            AnimatedFAB: 'FAB/AnimatedFAB',
-            FABGroup: 'FAB/FABGroup',
+            FloatingActionButton: 'FAB/FloatingActionButton',
+            ExtendedFloatingActionButton: 'FAB/ExtendedFloatingActionButton',
+            FloatingActionButtonMenu: 'FAB/FloatingActionButtonMenu',
           },
           HelperText: { HelperText: 'HelperText/HelperText' },
           IconButton: {

docs/src/components/BannerExample.tsx

@@ -8,7 +8,7 @@ import { useColorMode } from '@docusaurus/theme-common';
 import {
   Avatar,
   Button,
-  FAB,
+  FloatingActionButton,
   DarkTheme,
   LightTheme,
   ProgressBar,
@@ -83,9 +83,9 @@ const BannerExample = () => {
           <Button icon="camera" mode="contained" onPress={() => {}}>
             Press me
           </Button>
-          <FAB icon="plus" size="small" onPress={() => {}} />
-          <FAB icon="plus" size="medium" onPress={() => {}} />
-          <FAB icon="plus" size="large" onPress={() => {}} />
+          <FloatingActionButton icon="plus" size="default" onPress={() => {}} />
+          <FloatingActionButton icon="plus" size="medium" onPress={() => {}} />
+          <FloatingActionButton icon="plus" size="large" onPress={() => {}} />
           <Avatar.Text label="MD" />
           <Avatar.Icon icon="folder" />
         </Stack>

example/src/ExampleList.tsx

@@ -6,7 +6,6 @@ import { Divider, List, useTheme } from 'react-native-paper';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import ActivityIndicatorExample from './Examples/ActivityIndicatorExample';
-import AnimatedFABExample from './Examples/AnimatedFABExample';
 import AppbarExample from './Examples/AppbarExample';
 import AvatarExample from './Examples/AvatarExample';
 import BadgeExample from './Examples/BadgeExample';
@@ -51,7 +50,6 @@ import TooltipExample from './Examples/TooltipExample';
 import TouchableRippleExample from './Examples/TouchableRippleExample';
 
 export const mainExamples = {
-  AnimatedFAB: AnimatedFABExample,
   ActivityIndicator: ActivityIndicatorExample,
   Appbar: AppbarExample,
   Avatar: AvatarExample,

example/src/Examples/ActivityIndicatorExample.tsx

@@ -1,7 +1,12 @@
 import * as React from 'react';
 import { StyleSheet, View } from 'react-native';
 
-import { ActivityIndicator, FAB, List, Palette } from 'react-native-paper';
+import {
+  ActivityIndicator,
+  FloatingActionButton,
+  List,
+  Palette,
+} from 'react-native-paper';
 
 import ScreenWrapper from '../ScreenWrapper';
 
@@ -11,8 +16,7 @@ const ActivityIndicatorExample = () => {
   return (
     <ScreenWrapper style={styles.container}>
       <View style={styles.row}>
-        <FAB
-          size="small"
+        <FloatingActionButton
           icon={animating ? 'pause' : 'play'}
           onPress={() => setAnimating(!animating)}
         />