From 39aaacdae285055c3a286fa3421889c8caee8855 Mon Sep 17 00:00:00 2001
From: Developer <info@procivis.ch>
Date: Tue, 8 Oct 2024 13:52:51 +0200
Subject: [PATCH] Added ActivityIndicator

---
 package.json                                  |  2 +-
 .../activity-indicator.stories.tsx            | 21 ++++++++++++++++
 src/activity-indicator/activity-indicator.tsx | 25 +++++++++++++++++++
 src/activity-indicator/index.ts               |  3 +++
 src/index.ts                                  |  1 +
 5 files changed, 51 insertions(+), 1 deletion(-)
 create mode 100644 src/activity-indicator/activity-indicator.stories.tsx
 create mode 100644 src/activity-indicator/activity-indicator.tsx
 create mode 100644 src/activity-indicator/index.ts

diff --git a/package.json b/package.json
index bbfda50..80a1131 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@procivis/one-react-native-components",
-  "version": "0.1.57",
+  "version": "0.1.58",
   "author": "Procivis AG (https://procivis.ch)",
   "license": "Apache-2.0",
   "description": "Common Procivis ONE UI components for react-native",
diff --git a/src/activity-indicator/activity-indicator.stories.tsx b/src/activity-indicator/activity-indicator.stories.tsx
new file mode 100644
index 0000000..a826bf4
--- /dev/null
+++ b/src/activity-indicator/activity-indicator.stories.tsx
@@ -0,0 +1,21 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import React from 'react';
+
+import ActivityIndicator from './activity-indicator';
+
+const Basic: ComponentStory<typeof ActivityIndicator> = (args) => <ActivityIndicator {...args} />;
+
+Basic.args = {};
+
+export { Basic as ActivityIndicator };
+
+export default {
+  title: 'base/activity/Activity Indicator',
+  component: ActivityIndicator,
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/52qDYWUMjXAGre1dcnz5bz/Procivis-One-Wallet?node-id=444-45709&node-type=symbol&t=OQxawbbArhzkDVkZ-0',
+    },
+  },
+} as ComponentMeta<typeof ActivityIndicator>;
diff --git a/src/activity-indicator/activity-indicator.tsx b/src/activity-indicator/activity-indicator.tsx
new file mode 100644
index 0000000..c81d978
--- /dev/null
+++ b/src/activity-indicator/activity-indicator.tsx
@@ -0,0 +1,25 @@
+import React, { FC } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { ViewProps } from 'react-native-svg/lib/typescript/fabric/utils';
+
+import LoaderView, { LoaderViewState } from '../loader/loader';
+
+type ActivityIndicatorProps = ViewProps & {
+  animate?: boolean;
+};
+
+const ActivityIndicator: FC<ActivityIndicatorProps> = ({ animate = true, style, ...props }) => {
+  return (
+    <View {...props} style={[styles.wrapper, style]}>
+      <LoaderView animate={animate} state={LoaderViewState.InProgress} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  wrapper: {
+    alignItems: 'center',
+  },
+});
+
+export default ActivityIndicator;
diff --git a/src/activity-indicator/index.ts b/src/activity-indicator/index.ts
new file mode 100644
index 0000000..27ee944
--- /dev/null
+++ b/src/activity-indicator/index.ts
@@ -0,0 +1,3 @@
+import ActivityIndicator from './activity-indicator';
+
+export { ActivityIndicator };
diff --git a/src/index.ts b/src/index.ts
index 36003c1..06e3cbe 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,5 +1,6 @@
 export * from './accessibility';
 export * from './action-modal';
+export * from './activity-indicator';
 export * from './blur';
 export * from './buttons';
 export * from './camera';