fix: linter 🔎

.gitignore

@@ -76,3 +76,6 @@ android/keystores/debug.keystore
 
 # generated by bob
 lib/
+
+# env
+.env

example/package.json

@@ -10,17 +10,19 @@
   },
   "dependencies": {
     "expo": "~51.0.14",
+    "expo-secure-store": "~13.0.1",
     "expo-status-bar": "~1.12.1",
     "react": "18.2.0",
-    "react-native": "0.74.2",
     "react-dom": "18.2.0",
-    "react-native-web": "~0.19.10"
+    "react-native": "0.74.2",
+    "react-native-web": "~0.19.10",
+    "react-native-webview": "13.8.6"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
-    "babel-plugin-module-resolver": "^5.0.0",
     "@expo/webpack-config": "^18.0.1",
-    "babel-loader": "^8.1.0"
+    "babel-loader": "^8.1.0",
+    "babel-plugin-module-resolver": "^5.0.0"
   },
   "private": true
-}
+}

example/src/App.tsx

@@ -1,27 +1,19 @@
 import * as React from 'react';
 
-import { StyleSheet, View, Text } from 'react-native';
-import { multiply } from '@flipgive/react-native-rewards';
+import { SafeAreaView, StyleSheet } from 'react-native';
+import { ShopRewards } from '@flipgive/react-native-rewards';
 
 export default function App() {
-  const [result, setResult] = React.useState<number | undefined>();
-
-  React.useEffect(() => {
-    multiply(3, 7).then(setResult);
-  }, []);
-
   return (
-    <View style={styles.container}>
-      <Text>Result: {result}</Text>
-    </View>
+    <SafeAreaView style={styles.container}>
+      <ShopRewards />
+    </SafeAreaView>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
   },
   box: {
     width: 60,

package.json

@@ -64,20 +64,27 @@
     "eslint": "^8.51.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-prettier": "^5.0.1",
+    "expo-secure-store": "~13.0.1",
     "jest": "^29.7.0",
     "prettier": "^3.0.3",
     "react": "18.2.0",
     "react-native": "0.74.2",
     "react-native-builder-bob": "^0.23.2",
+    "react-native-webview": "13.8.6",
     "release-it": "^15.0.0",
     "typescript": "^5.2.2"
   },
   "resolutions": {
     "@types/react": "^18.2.44"
   },
+  "dependencies": {
+    "react-hook-form": "^7.52.0"
+  },
   "peerDependencies": {
+    "expo-secure-store": "*",
     "react": "*",
-    "react-native": "*"
+    "react-native": "*",
+    "react-native-webview": "*"
   },
   "workspaces": [
     "example"

src/host/components/ModalLoader/index.tsx

@@ -0,0 +1,138 @@
+import React, { useEffect, useRef } from 'react';
+import { View, Text, StyleSheet, Animated, Easing, Modal } from 'react-native';
+import { hostColors } from '../../styles/colors';
+
+interface ModalLoaderProps {
+  visible: boolean;
+  text?: string;
+}
+
+export function ModalLoader({ visible, text }: ModalLoaderProps) {
+  const rotation = useRef(new Animated.Value(0)).current;
+  const dot1 = useRef(new Animated.Value(0)).current;
+  const dot2 = useRef(new Animated.Value(0)).current;
+  const dot3 = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    const rotate = Animated.loop(
+      Animated.timing(rotation, {
+        toValue: 1,
+        duration: 1000,
+        easing: Easing.linear,
+        useNativeDriver: true,
+      })
+    );
+
+    const animateDots = (dot: Animated.Value, delay: number) => {
+      return Animated.loop(
+        Animated.sequence([
+          Animated.timing(dot, {
+            toValue: -10,
+            duration: 300,
+            delay,
+            easing: Easing.ease,
+            useNativeDriver: true,
+          }),
+          Animated.timing(dot, {
+            toValue: 0,
+            duration: 300,
+            easing: Easing.ease,
+            useNativeDriver: true,
+          }),
+        ])
+      );
+    };
+
+    let animationDot1 = animateDots(dot1, 0);
+    let animationDot2 = animateDots(dot2, 150);
+    let animationDot3 = animateDots(dot3, 300);
+
+    if (visible) {
+      rotate.start();
+      animationDot1.start();
+      animationDot2.start();
+      animationDot3.start();
+    } else {
+      rotation.setValue(0);
+      dot1.setValue(0);
+      dot2.setValue(0);
+      dot3.setValue(0);
+      rotate.stop();
+      animationDot1.stop();
+      animationDot2.stop();
+      animationDot3.stop();
+    }
+
+    // Cleanup function to stop animations
+    return () => {
+      rotate.stop();
+      animationDot1.stop();
+      animationDot2.stop();
+      animationDot3.stop();
+    };
+  }, [visible, rotation, dot1, dot2, dot3]);
+
+  const rotateInterpolate = rotation.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '360deg'],
+  });
+
+  const animatedStyle = {
+    transform: [{ rotate: rotateInterpolate }],
+  };
+
+  const dotStyle = (dot: Animated.Value) => ({
+    transform: [{ translateY: dot }],
+  });
+
+  return (
+    <Modal visible={visible} transparent={false} style={styles.container}>
+      <View style={styles.container}>
+        <Animated.View style={[styles.loader, animatedStyle]}>
+          <View style={styles.circle} />
+        </Animated.View>
+        <View style={styles.loadingContainer}>
+          <Text style={styles.loadingText}>{text || 'Loading '}</Text>
+          <Animated.Text style={[styles.dot, dotStyle(dot1)]}>.</Animated.Text>
+          <Animated.Text style={[styles.dot, dotStyle(dot2)]}>.</Animated.Text>
+          <Animated.Text style={[styles.dot, dotStyle(dot3)]}>.</Animated.Text>
+        </View>
+      </View>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: hostColors.backgroundColor,
+  },
+  loader: {
+    width: 100,
+    height: 100,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  circle: {
+    width: 100,
+    height: 100,
+    borderWidth: 10,
+    borderColor: hostColors.primaryColor,
+    borderRadius: 50,
+    borderTopColor: 'transparent',
+  },
+  loadingContainer: {
+    flexDirection: 'row',
+    marginTop: 20,
+  },
+  loadingText: {
+    fontSize: 24,
+    color: hostColors.primaryColor,
+  },
+  dot: {
+    fontSize: 24,
+    color: hostColors.primaryColor,
+  },
+});

src/host/components/animation/FadeWrapper.tsx

@@ -0,0 +1,38 @@
+import React, { useRef, useEffect } from 'react';
+import { type ReactNode } from 'react';
+import { Animated } from 'react-native';
+import { type StyleProp, type ViewStyle } from 'react-native';
+
+interface FadeWrapperProps {
+  children: ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+export const FadeWrapper: React.FC<FadeWrapperProps> = ({
+  children,
+  style,
+}) => {
+  const fadeAnim = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    Animated.timing(fadeAnim, {
+      toValue: 1,
+      duration: 500,
+      useNativeDriver: true,
+    }).start();
+
+    return () => {
+      Animated.timing(fadeAnim, {
+        toValue: 0,
+        duration: 500,
+        useNativeDriver: true,
+      }).start();
+    };
+  }, [fadeAnim]);
+
+  return (
+    <Animated.View style={[style, { opacity: fadeAnim }]}>
+      {children}
+    </Animated.View>
+  );
+};

src/host/components/bottomSheet/index.tsx

@@ -0,0 +1,97 @@
+import React, { useEffect, useRef, useState } from 'react';
+import {
+  Animated,
+  Dimensions,
+  Modal,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { hostColors } from '../../styles/colors';
+
+const windowHeight = Dimensions.get('window').height;
+
+interface BottomSheetProps {
+  isVisible: boolean;
+  setModalVisible: (isVisible: boolean) => void;
+  children: React.ReactNode;
+}
+
+export const BottomSheet: React.FC<BottomSheetProps> = ({
+  isVisible,
+  setModalVisible,
+  children,
+}) => {
+  const [showModal, setShowModal] = useState(isVisible);
+  const slideAnim = useRef(new Animated.Value(windowHeight)).current;
+
+  useEffect(() => {
+    if (isVisible) {
+      setShowModal(true);
+      Animated.timing(slideAnim, {
+        toValue: 0,
+        duration: 300,
+        useNativeDriver: true,
+      }).start();
+    } else {
+      Animated.timing(slideAnim, {
+        toValue: windowHeight,
+        duration: 300,
+        useNativeDriver: true,
+      }).start(() => {
+        setShowModal(false);
+      });
+    }
+  }, [isVisible, slideAnim]);
+
+  const handleClose = () => {
+    Animated.timing(slideAnim, {
+      toValue: windowHeight,
+      duration: 300,
+      useNativeDriver: true,
+    }).start(() => {
+      setShowModal(false);
+      setModalVisible(false);
+    });
+  };
+
+  return (
+    <Modal visible={showModal} onRequestClose={handleClose} transparent>
+      <View style={styles.container}>
+        <TouchableOpacity
+          style={styles.overlay}
+          activeOpacity={1}
+          onPress={handleClose}
+        />
+        <Animated.View
+          style={[
+            styles.contentContainer,
+            { transform: [{ translateY: slideAnim }] },
+          ]}
+        >
+          {children}
+        </Animated.View>
+      </View>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'flex-end',
+    backgroundColor: 'rgba(0,0,0,0.5)',
+  },
+  overlay: {
+    flex: 1,
+  },
+  contentContainer: {
+    backgroundColor: hostColors.white,
+    paddingTop: 5,
+    maxHeight: windowHeight * 0.75,
+    minHeight: windowHeight * 0.25,
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    paddingBottom: 50,
+  },
+});