feat: modernize progress indicators to latest Material Design specs

docs/docusaurus.config.js

@@ -63,7 +63,6 @@ const config = {
         docsRootDir: path.join(__dirname, 'docs', 'components'),
         libsRootDir: path.join(__dirname, '..', 'src', 'components'),
         pages: {
-          ActivityIndicator: 'ActivityIndicator',
           Appbar: {
             Appbar: 'Appbar/Appbar',
             AppbarAction: 'Appbar/AppbarAction',
@@ -147,7 +146,14 @@ const config = {
             Portal: 'Portal/Portal',
             PortalHost: 'Portal/PortalHost',
           },
-          ProgressBar: 'ProgressBar',
+          CircularProgressIndicator:
+            'ProgressIndicator/CircularProgressIndicator/CircularProgressIndicator',
+          CircularWavyProgressIndicator:
+            'ProgressIndicator/CircularWavyProgressIndicator/CircularWavyProgressIndicator',
+          LinearProgressIndicator:
+            'ProgressIndicator/LinearProgressIndicator/LinearProgressIndicator',
+          LinearWavyProgressIndicator:
+            'ProgressIndicator/LinearWavyProgressIndicator/LinearWavyProgressIndicator',
           RadioButton: {
             RadioButton: 'RadioButton/RadioButton',
             RadioButtonAndroid: 'RadioButton/RadioButtonAndroid',
@@ -249,7 +255,7 @@ const config = {
           },
           {
             type: 'doc',
-            docId: 'components/ActivityIndicator',
+            docId: 'components/Appbar/Appbar',
             position: 'left',
             label: 'Components',
           },

docs/src/components/BannerExample.tsx

@@ -11,7 +11,7 @@ import {
   FAB,
   DarkTheme,
   LightTheme,
-  ProgressBar,
+  LinearProgressIndicator,
   PaperProvider,
   RadioButton,
   Switch,
@@ -89,7 +89,7 @@ const BannerExample = () => {
           <Avatar.Text label="MD" />
           <Avatar.Icon icon="folder" />
         </Stack>
-        <ProgressBar indeterminate />
+        <LinearProgressIndicator indeterminate />
         <Stack spacing={8}>
           <Text variant="displayLarge">Display Large</Text>
           <Text variant="displayMedium">Display Medium</Text>

docs/src/data/screenshots.js

@@ -1,5 +1,4 @@
 const screenshots = {
-  ActivityIndicator: 'screenshots/activity-indicator.gif',
   Appbar: 'screenshots/appbar.png',
   'Appbar.Action': 'screenshots/appbar-action-android.png',
   'Appbar.BackAction': 'screenshots/appbar-backaction-android.png',
@@ -105,7 +104,7 @@ const screenshots = {
   },
   'Menu.Item': 'screenshots/menu-item.png',
   Modal: 'screenshots/modal.gif',
-  ProgressBar: 'screenshots/progress-bar.png',
+  LinearProgressIndicator: 'screenshots/progress-bar.png',
   RadioButton: {
     'Android (enabled)': 'screenshots/radio-enabled.android.png',
     'Android (disabled)': 'screenshots/radio-disabled.android.png',

docs/src/data/themeColors.js

@@ -1,9 +1,4 @@
 const themeColors = {
-  ActivityIndicator: {
-    '-': {
-      borderColor: 'theme.colors.primary',
-    },
-  },
   Appbar: {
     default: {
       backgroundColor: 'theme.colors.surface',
@@ -264,10 +259,10 @@ const themeColors = {
       backgroundColor: 'theme.colors.backdrop',
     },
   },
-  ProgressBar: {
+  LinearProgressIndicator: {
     '-': {
-      tintColor: 'theme.colors.primary',
-      trackTintColor: 'theme.colors.surfaceVariant',
+      color: 'theme.colors.primary',
+      trackColor: 'theme.colors.secondaryContainer',
     },
   },
   Searchbar: {

example/package.json

@@ -32,6 +32,7 @@
     "react-native-reanimated": "4.3.1",
     "react-native-safe-area-context": "~5.7.0",
     "react-native-screens": "4.25.1",
+    "react-native-svg": "15.15.4",
     "react-native-web": "^0.21.0",
     "react-native-worklets": "0.8.3"
   },

example/src/ExampleList.tsx

@@ -5,7 +5,6 @@ import { useNavigation } from '@react-navigation/native';
 import { Divider, List, useTheme } from 'react-native-paper';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
-import ActivityIndicatorExample from './Examples/ActivityIndicatorExample';
 import AppbarExample from './Examples/AppbarExample';
 import AvatarExample from './Examples/AvatarExample';
 import BadgeExample from './Examples/BadgeExample';
@@ -28,7 +27,7 @@ import ListAccordionExampleGroup from './Examples/ListAccordionGroupExample';
 import ListItemExample from './Examples/ListItemExample';
 import ListSectionExample from './Examples/ListSectionExample';
 import MenuExample from './Examples/MenuExample';
-import ProgressBarExample from './Examples/ProgressBarExample';
+import ProgressIndicatorExample from './Examples/ProgressIndicatorExample';
 import RadioButtonExample from './Examples/RadioButtonExample';
 import RadioButtonGroupExample from './Examples/RadioButtonGroupExample';
 import RadioButtonItemExample from './Examples/RadioButtonItemExample';
@@ -50,7 +49,6 @@ import TooltipExample from './Examples/TooltipExample';
 import TouchableRippleExample from './Examples/TouchableRippleExample';
 
 export const mainExamples = {
-  ActivityIndicator: ActivityIndicatorExample,
   Appbar: AppbarExample,
   Avatar: AvatarExample,
   Badge: BadgeExample,
@@ -73,7 +71,7 @@ export const mainExamples = {
   ListSection: ListSectionExample,
   ListItem: ListItemExample,
   Menu: MenuExample,
-  Progressbar: ProgressBarExample,
+  ProgressIndicator: ProgressIndicatorExample,
   Radio: RadioButtonExample,
   RadioGroup: RadioButtonGroupExample,
   RadioItem: RadioButtonItemExample,

example/src/Examples/Dialogs/DialogWithLoadingIndicator.tsx

@@ -1,12 +1,15 @@
 import * as React from 'react';
-import { ActivityIndicator, Platform, StyleSheet, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 
-import { Dialog, Palette, Portal } from 'react-native-paper';
+import {
+  CircularProgressIndicator,
+  Dialog,
+  Palette,
+  Portal,
+} from 'react-native-paper';
 
 import { TextComponent } from './DialogTextComponent';
 
-const isIOS = Platform.OS === 'ios';
-
 const DialogWithLoadingIndicator = ({
   visible,
   close,
@@ -20,9 +23,9 @@ const DialogWithLoadingIndicator = ({
         <Dialog.Title>Progress Dialog</Dialog.Title>
         <Dialog.Content>
           <View style={styles.flexing}>
-            <ActivityIndicator
+            <CircularProgressIndicator
+              indeterminate
               color={Palette.tertiary30}
-              size={isIOS ? 'large' : 48}
               style={styles.marginRight}
             />
             <TextComponent>Loading.....</TextComponent>