feat: add linear and circular progress bars

src/components/menu-grid-list.component.tsx

@@ -16,12 +16,14 @@ export const MenuGridList = (props: MenuGridListProps): ListElement => {
     <Card
       style={styles.item}
       onPress={() => props.onItemPress(info.index)}>
-      {info.item.icon({ width: 64, height: 64, alignSelf: 'center' })}
-      <Text
-        style={styles.itemTitle}
-        category='s2'>
-        {info.item.title}
-      </Text>
+      <>
+        {info.item.icon({ width: 64, height: 64, alignSelf: 'center' })}
+        <Text
+          style={styles.itemTitle}
+          category='s2'>
+          {info.item.title}
+        </Text>
+      </>
     </Card>
   );
 
@@ -55,5 +57,6 @@ const styles = StyleSheet.create({
   itemTitle: {
     alignSelf: 'center',
     marginTop: 8,
+    textAlign: 'center',
   },
 });

src/navigation/components.navigator.tsx

@@ -30,6 +30,8 @@ import { TextScreen } from '../scenes/components/text/text.component';
 import { ToggleScreen } from '../scenes/components/toggle/toggle.component';
 import { TooltipScreen } from '../scenes/components/tooltip/tooltip.component';
 import { TopNavigationScreen } from '../scenes/components/top-navigation/top-navigation.component';
+import { ProgressBarScreen } from '../scenes/components/progress-bar/progressBar.component';
+import { CircularProgressBarScreen } from '../scenes/components/circular-progress-bar/circularProgressBar.component';
 
 const Stack = createStackNavigator();
 
@@ -44,6 +46,7 @@ export const ComponentsNavigator = (): React.ReactElement => (
     <Stack.Screen name='Calendar' component={CalendarScreen}/>
     <Stack.Screen name='Card' component={CardScreen}/>
     <Stack.Screen name='CheckBox' component={CheckBoxScreen}/>
+    <Stack.Screen name='CircularProgressBar' component={CircularProgressBarScreen}/>
     <Stack.Screen name='Datepicker' component={DatepickerScreen}/>
     <Stack.Screen name='Drawer' component={DrawerScreen}/>
     <Stack.Screen name='Icon' component={IconScreen}/>
@@ -54,6 +57,7 @@ export const ComponentsNavigator = (): React.ReactElement => (
     <Stack.Screen name='Modal' component={ModalScreen}/>
     <Stack.Screen name='OverflowMenu' component={OverflowMenuScreen}/>
     <Stack.Screen name='Popover' component={PopoverScreen}/>
+    <Stack.Screen name='ProgressBar' component={ProgressBarScreen}/>
     <Stack.Screen name='Radio' component={RadioScreen}/>
     <Stack.Screen name='RadioGroup' component={RadioGroupScreen}/>
     <Stack.Screen name='RangeCalendar' component={RangeCalendarScreen}/>

src/scenes/components/circular-progress-bar/circularProgressBar-showcase.component.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { CircularProgressBar, ProgressBarElement, ProgressBarProps } from '@ui-kitten/components';
+import { useProgress } from '../progress-bar/progress.hook';
+
+export const CircularProgressBarShowcase = (props?: ProgressBarProps): ProgressBarElement => {
+  return (
+    <CircularProgressBar {...props} progress={useProgress(props.status)} />
+  );
+};

src/scenes/components/circular-progress-bar/circularProgressBar.component.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ShowcaseContainer } from '../../../components/showcase-container.component';
+import { circularProgressBarSettings, circularProgressBarShowcase } from './type';
+import { CircularProgressBarShowcase } from './circularProgressBar-showcase.component';
+
+export const CircularProgressBarScreen = ({ navigation }): React.ReactElement => (
+  <ShowcaseContainer
+    showcase={circularProgressBarShowcase}
+    settings={circularProgressBarSettings}
+    renderItem={CircularProgressBarShowcase}
+    onBackPress={navigation.goBack}>
+  </ShowcaseContainer>
+);
+

src/scenes/components/circular-progress-bar/type.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import { StarIcon } from '../../../components/icons';
+
+import {
+  ComponentShowcase,
+  ComponentShowcaseItem,
+  ComponentShowcaseSection,
+  ComponentShowcaseSetting,
+} from '../../../model/showcase.model';
+
+const giant: ComponentShowcaseItem = {
+  title: 'Giant',
+  props: {
+    accessoryLeft: StarIcon,
+    size: 'giant',
+  },
+};
+
+const large: ComponentShowcaseItem = {
+  title: 'Large',
+  props: {
+    accessoryLeft: StarIcon,
+    size: 'large',
+  },
+};
+
+const medium: ComponentShowcaseItem = {
+  title: 'Medium',
+  props: {
+    size: 'medium',
+  },
+};
+
+const small: ComponentShowcaseItem = {
+  title: 'Small',
+  props: {
+    size: 'small',
+  },
+};
+
+const tiny: ComponentShowcaseItem = {
+  title: 'Tiny',
+  props: {
+    size: 'tiny',
+  },
+};
+
+const sizeSection: ComponentShowcaseSection = {
+  title: 'Size',
+  items: [
+    giant,
+    large,
+    medium,
+    small,
+    tiny,
+  ],
+};
+
+export const circularProgressBarSettings: ComponentShowcaseSetting[] = [
+  {
+    propertyName: 'status',
+    value: 'primary',
+  },
+  {
+    propertyName: 'status',
+    value: 'success',
+  },
+  {
+    propertyName: 'status',
+    value: 'info',
+  },
+  {
+    propertyName: 'status',
+    value: 'warning',
+  },
+  {
+    propertyName: 'status',
+    value: 'danger',
+  },
+  {
+    propertyName: 'status',
+    value: 'control',
+  },
+  {
+    propertyName: 'status',
+    value: 'basic',
+  },
+];
+
+export const circularProgressBarShowcase: ComponentShowcase = {
+  title: 'ProgressBar',
+  sections: [
+    sizeSection,
+  ],
+};
+

src/scenes/components/data.ts

@@ -140,6 +140,16 @@ export const data: ComponentData[] = [
       );
     },
   },
+  {
+    title: 'Circular Progress Bar',
+    route: 'CircularProgressBar',
+    icon: (style: ImageStyle) => {
+      return React.createElement(
+        ThemedIcon,
+        { ...style, light: AssetCheckBoxIcon, dark: AssetCheckBoxDarkIcon },
+      );
+    },
+  },
   {
     title: 'Datepicker',
     route: 'Datepicker',
@@ -240,6 +250,16 @@ export const data: ComponentData[] = [
       );
     },
   },
+  {
+    title: 'Progress Bar',
+    route: 'ProgressBar',
+    icon: (style: ImageStyle) => {
+      return React.createElement(
+        ThemedIcon,
+        { ...style, light: AssetPopoverIcon, dark: AssetPopoverDarkIcon },
+      );
+    },
+  },
   {
     title: 'Radio',
     route: 'Radio',

src/scenes/components/progress-bar/progress.hook.ts

@@ -0,0 +1,14 @@
+import { useEffect, useState } from 'react';
+
+export const useProgress = (clearValue: any, initialProgress: number = 0,
+  intervalMs: number = 250, step: number = 0.1) => {
+  const [progress, setProgress] = useState(initialProgress);
+  useEffect(() => {
+    const interval = setInterval(() => setProgress(progress + step > 1 ? 1 : progress + step), intervalMs);
+    return () => clearInterval(interval);
+  }, [progress, setProgress]);
+  useEffect(() => {
+    setProgress(initialProgress);
+  }, [clearValue]);
+  return progress;
+};

src/scenes/components/progress-bar/progressBar-showcase.component.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ProgressBar, ProgressBarElement, ProgressBarProps } from '@ui-kitten/components';
+import { useProgress } from './progress.hook';
+
+export const ProgressBarShowcase = (props?: ProgressBarProps): ProgressBarElement => {
+  return (
+    <ProgressBar {...props} style={{ flex: 1 }} progress={useProgress(props.status)} />
+  );
+};

src/scenes/components/progress-bar/progressBar.component.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { progressBarSettings, progressBarShowcase } from './type';
+import { ShowcaseContainer } from '../../../components/showcase-container.component';
+import { ProgressBarShowcase } from './progressBar-showcase.component';
+
+export const ProgressBarScreen = ({ navigation }): React.ReactElement => (
+  <ShowcaseContainer
+    showcase={progressBarShowcase}
+    settings={progressBarSettings}
+    renderItem={ProgressBarShowcase}
+    onBackPress={navigation.goBack}>
+  </ShowcaseContainer>
+);
+

src/scenes/components/progress-bar/type.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import { StarIcon } from '../../../components/icons';
+import {
+  ComponentShowcase,
+  ComponentShowcaseItem,
+  ComponentShowcaseSection,
+  ComponentShowcaseSetting,
+} from '../../../model/showcase.model';
+
+const giant: ComponentShowcaseItem = {
+  title: 'Giant',
+  props: {
+    accessoryLeft: StarIcon,
+    size: 'giant',
+  },
+};
+
+const large: ComponentShowcaseItem = {
+  title: 'Large',
+  props: {
+    accessoryLeft: StarIcon,
+    size: 'large',
+  },
+};
+
+const medium: ComponentShowcaseItem = {
+  title: 'Medium',
+  props: {
+    size: 'medium',
+  },
+};
+
+const small: ComponentShowcaseItem = {
+  title: 'Small',
+  props: {
+    size: 'small',
+  },
+};
+
+const tiny: ComponentShowcaseItem = {
+  title: 'Tiny',
+  props: {
+    size: 'tiny',
+  },
+};
+
+const sizeSection: ComponentShowcaseSection = {
+  title: 'Size',
+  items: [
+    giant,
+    large,
+    medium,
+    small,
+    tiny,
+  ],
+};
+
+export const progressBarSettings: ComponentShowcaseSetting[] = [
+  {
+    propertyName: 'status',
+    value: 'primary',
+  },
+  {
+    propertyName: 'status',
+    value: 'success',
+  },
+  {
+    propertyName: 'status',
+    value: 'info',
+  },
+  {
+    propertyName: 'status',
+    value: 'warning',
+  },
+  {
+    propertyName: 'status',
+    value: 'danger',
+  },
+  {
+    propertyName: 'status',
+    value: 'control',
+  },
+  {
+    propertyName: 'status',
+    value: 'basic',
+  },
+];
+
+export const progressBarShowcase: ComponentShowcase = {
+  title: 'ProgressBar',
+  sections: [
+    sizeSection,
+  ],
+};
+