diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock
index 8e557da1..aacaceef 100644
--- a/example/ios/Podfile.lock
+++ b/example/ios/Podfile.lock
@@ -636,7 +636,7 @@ EXTERNAL SOURCES:
:podspec: "../node_modules/react-native/third-party-podspecs/glog.podspec"
hermes-engine:
:podspec: "../node_modules/react-native/sdks/hermes-engine/hermes-engine.podspec"
- :tag: hermes-2023-03-07-RNv0.71.4-31fdcf738940875c9bacf251e149006cf515d763
+ :tag: hermes-2023-03-20-RNv0.72.0-49794cfc7c81fb8f69fd60c3bbf85a7480cc5a77
RCT-Folly:
:podspec: "../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec"
RCTRequired:
diff --git a/example/src/navigation/navigator.tsx b/example/src/navigation/navigator.tsx
index 2eb24b98..581148cd 100644
--- a/example/src/navigation/navigator.tsx
+++ b/example/src/navigation/navigator.tsx
@@ -33,6 +33,7 @@ import { TabNavigationScreen } from "../pages/TabNavigation";
import { TextInputs } from "../pages/TextInputs";
import { Toasts } from "../pages/Toasts";
import { Typography } from "../pages/Typography";
+import { Loaders } from "../pages/Loaders";
import { AppParamsList } from "./params";
import APP_ROUTES from "./routes";
@@ -155,6 +156,14 @@ const AppNavigator = () => (
headerBackTitleVisible: false
}}
/>
+
(
-
-
-
-
+export const Loaders = () => {
+ const [progress, setProgress] = React.useState(0);
+ React.useEffect(() => {
+ const interval = setInterval(() => {
+ // console.log("progress", progress, (progress + 10) % 100);
+ setProgress(prev => (prev + 10) % 100);
+ }, 500);
+ return () => clearInterval(interval);
+ }, []);
+
+ return (
+
+ LoadingSpinner
+
+
+
+
+
+
+
-
-
+ ProgressLoader
+
+
+
+
+
+
+
-
-
-);
+
+ );
+};
diff --git a/src/components/index.tsx b/src/components/index.tsx
index e560119b..ff47dbb4 100644
--- a/src/components/index.tsx
+++ b/src/components/index.tsx
@@ -20,6 +20,7 @@ export * from "./modules";
export * from "./numberpad";
export * from "./otpInput";
export * from "./pictograms";
+export * from "./progressLoader";
export * from "./radio";
export * from "./spacer";
export * from "./stepper";
diff --git a/src/components/progressLoader/ProgressLoader.tsx b/src/components/progressLoader/ProgressLoader.tsx
new file mode 100644
index 00000000..1ffeb4b3
--- /dev/null
+++ b/src/components/progressLoader/ProgressLoader.tsx
@@ -0,0 +1,60 @@
+import * as React from "react";
+import { StyleSheet, View } from "react-native";
+import Animated, {
+ useAnimatedStyle,
+ useSharedValue,
+ withSpring
+} from "react-native-reanimated";
+import { IOColors, IOSpringValues } from "../../core";
+
+const styles = StyleSheet.create({
+ container: {
+ width: "100%",
+ height: 4,
+ backgroundColor: IOColors.white
+ }
+});
+
+export type ProgressLoader = {
+ progress: number;
+ color?: IOColors;
+};
+
+/**
+ * ProgressLoader component
+ * @param progress - the progress percentage
+ * @param color - IOColors value or undefined to define the color of the progress bar
+ */
+export const ProgressLoader = ({
+ progress,
+ color = "blueIO-500"
+}: ProgressLoader) => {
+ const [width, setWidth] = React.useState(0);
+ const progressWidth = useSharedValue(0);
+
+ React.useEffect(() => {
+ // eslint-disable-next-line functional/immutable-data
+ progressWidth.value = withSpring(
+ (progress / 100) * width,
+ IOSpringValues.accordion
+ );
+ }, [progressWidth, progress, width]);
+
+ const animatedStyle = useAnimatedStyle(() => ({
+ width: progressWidth.value
+ }));
+
+ return (
+ setWidth(e.nativeEvent.layout.width)}
+ >
+
+
+ );
+};
diff --git a/src/components/progressLoader/index.tsx b/src/components/progressLoader/index.tsx
new file mode 100644
index 00000000..f3e3ba34
--- /dev/null
+++ b/src/components/progressLoader/index.tsx
@@ -0,0 +1 @@
+export * from "./ProgressLoader";
diff --git a/stories/foundation/progressLoader/ProgressLoader.stories.tsx b/stories/foundation/progressLoader/ProgressLoader.stories.tsx
new file mode 100644
index 00000000..d8ef49cc
--- /dev/null
+++ b/stories/foundation/progressLoader/ProgressLoader.stories.tsx
@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { ProgressLoader } from "../../../src/components";
+import { withMaxWitdth } from "../../utils";
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta = {
+ title: "Foundation/ProgressLoader/ProgressLoader",
+ component: ProgressLoader,
+ parameters: {
+ // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+ layout: "centered"
+ },
+ decorators: [withMaxWitdth],
+ // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+ tags: ["autodocs"]
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Primary: Story = {
+ args: {
+ progress: 15
+ }
+};