@servesall/atoms 1.1.1 → 1.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@servesall/atoms",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "Atoms for react-native",
   "main": "dist/bundle.cjs.js",
   "module": "dist/bundle.esm.js",
@@ -21,16 +21,15 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.12.18",
-    "@killerwink/lottie-react-native-color": "^1.0.2",
     "react-native-status-bar-height": "^2.6.0",
     "styled-components": "^5.2.1"
   },
   "peerDependencies": {
+    "lottie-react-native": ">= 5.0.1",
     "react": ">=16.3.0",
     "react-native": ">= 0.63.2",
-    "react-native-reanimated": ">=2.0.0-rc.3",
     "react-native-gesture-handler": ">= 1.10.1",
-    "lottie-react-native": ">= 4.0.2"
+    "react-native-reanimated": ">=2.8.0"
   },
   "devDependencies": {
     "@babel/cli": "7.8.4",
@@ -39,6 +38,7 @@
     "@babel/preset-react": "7.8.3",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "11.0.2",
+    "@rollup/plugin-image": "^2.1.1",
     "@rollup/plugin-json": "4.0.2",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "rollup": "^2.2.0",

package/src/BottomNavBar/BottomNavController.js

@@ -1,54 +1,55 @@
-import React from 'react';
-import { Pressable } from 'react-native';
-import BottomNavItem from './BottomNavItem';
+import React from "react";
+import { Pressable } from "react-native";
+import BottomNavItem from "./BottomNavItem";
 
 const BottomNavController = ({ state, descriptors, navigation }) => {
+  return state.routes.map((route, index) => {
+    const { options } = descriptors[route.key];
+
+    const isFocused = state.index === index;
+
+    const onPress = () => {
+      const event = navigation.emit({
+        type: "tabPress",
+        target: route.key,
+        canPreventDefault: true,
+      });
+
+      if (!isFocused && !event.defaultPrevented) {
+        navigation.navigate(route.name);
+      }
+    };
+
+    const onLongPress = () => {
+      navigation.emit({
+        type: "tabLongPress",
+        target: route.key,
+      });
+    };
+
+    if (options.hide) {
+      return null;
+    }
+
     return (
-            state.routes.map((route, index) => {
-                const { options } = descriptors[route.key];
-
-                const isFocused = state.index === index;
-
-                const onPress = () => {
-                    const event = navigation.emit({
-                        type: 'tabPress',
-                        target: route.key,
-                        canPreventDefault: true,
-                    });
-
-                    if (!isFocused && !event.defaultPrevented) {
-                        navigation.navigate(route.name);
-                    }
-                };
-
-                const onLongPress = () => {
-                    navigation.emit({
-                        type: 'tabLongPress',
-                        target: route.key,
-                    });
-                };
-
-                if(options.hide) {
-                    return null;
-                }
-
-                return (
-                    <Pressable
-                        accessibilityRole="button"
-                        accessibilityStates={isFocused ? ['selected'] : []}
-                        accessibilityLabel={options.tabBarAccessibilityLabel}
-                        testID={options.tabBarTestID}
-                        onPress={onPress}
-                        onLongPress={onLongPress}
-                        style={{ alignSelf: 'stretch' }}
-                        key={index}
-                        hitSlop={40}
-                    >
-                        <BottomNavItem isFocused={isFocused} TabElements={options.TabElements} />
-                    </Pressable>
-                );
-            })
+      <Pressable
+        accessibilityRole="button"
+        accessibilityStates={isFocused ? ["selected"] : []}
+        accessibilityLabel={options.tabBarAccessibilityLabel}
+        testID={options.tabBarTestID}
+        onPress={onPress}
+        onLongPress={onLongPress}
+        style={{ alignSelf: "stretch" }}
+        key={index}
+        hitSlop={20}
+      >
+        <BottomNavItem
+          isFocused={isFocused}
+          TabElements={options.TabElements}
+        />
+      </Pressable>
     );
+  });
 };
 
 export default BottomNavController;

package/src/BottomNavBar/index.js

@@ -1,42 +1,39 @@
-import React, {useState, useEffect} from 'react';
-import { NavContainer } from './BottomNavBar.style';
-import BottomNavController from './BottomNavController';
-import { Keyboard, SafeAreaView } from 'react-native';
+import React, { useState, useEffect } from "react";
+import { NavContainer } from "./BottomNavBar.style";
+import BottomNavController from "./BottomNavController";
+import { Keyboard, SafeAreaView } from "react-native";
 
 const BottomNavBar = (props) => {
-    const [isFocused, setIsFocused] = useState(false);
+  const [isFocused, setIsFocused] = useState(false);
 
-    const _keyboardDidShow = () => {
-        setIsFocused(true);
-    };
-
-    const _keyboardDidHide = () => {
-        setIsFocused(false);
-    };
+  const _keyboardDidShow = () => {
+    setIsFocused(true);
+  };
 
-    useEffect(() => {
-        Keyboard.addListener("keyboardDidShow", _keyboardDidShow);
-        Keyboard.addListener("keyboardDidHide", _keyboardDidHide);
+  const _keyboardDidHide = () => {
+    setIsFocused(false);
+  };
 
-        // cleanup function
-        return () => {
-            Keyboard.removeListener("keyboardDidShow", _keyboardDidShow);
-            Keyboard.removeListener("keyboardDidHide", _keyboardDidHide);
-        };
-    }, []);
+  useEffect(() => {
+    Keyboard.addListener("keyboardDidShow", _keyboardDidShow);
+    Keyboard.addListener("keyboardDidHide", _keyboardDidHide);
 
-    const { children, style } = props;
-    if(isFocused) return null;
-    return (
-        <SafeAreaView>
-            <NavContainer style={style}>
-                <BottomNavController {...props}>
-                    {children}
-                </BottomNavController>
-            </NavContainer>
-        </SafeAreaView>
-    );
+    // cleanup function
+    return () => {
+      Keyboard.remove("keyboardDidShow", _keyboardDidShow);
+      Keyboard.remove("keyboardDidHide", _keyboardDidHide);
+    };
+  }, []);
+
+  const { children, style } = props;
+  if (isFocused) return null;
+  return (
+    <SafeAreaView>
+      <NavContainer style={style}>
+        <BottomNavController {...props}>{children}</BottomNavController>
+      </NavContainer>
+    </SafeAreaView>
+  );
 };
 
-
 export default BottomNavBar;

package/src/Buttons/AnimatedRoundedButton/FloatingButton.js

@@ -0,0 +1,83 @@
+import React, { useEffect } from "react";
+import { ButtonStyle } from "./FloatingButton.style";
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+  withSequence,
+  Easing,
+  withDelay,
+} from "react-native-reanimated";
+
+const RoundBtn = ({
+  children,
+  active,
+  color,
+  onClick = () => {},
+  loading,
+  LoaderElement,
+  successElement,
+  success,
+  error,
+  errorElement,
+}) => {
+  const scale = useSharedValue(1);
+  const height = useSharedValue("54px");
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      height: height.value,
+      opacity: scale.value,
+      transform: [
+        {
+          scale: scale.value,
+        },
+      ],
+    };
+  });
+
+  useEffect(() => {
+    if (loading) {
+      width.value = withTiming(70, {
+        duration: 250,
+      });
+    } else {
+      width.value = withDelay(
+        800,
+        withTiming("100%", {
+          duration: 250,
+        })
+      );
+    }
+  }, [loading]);
+
+  return (
+    <Animated.View style={[animatedStyle]}>
+      <ButtonStyle
+        active={active}
+        color={color}
+        success={success}
+        error={error}
+        onPress={() => {
+          scale.value = withSequence(
+            withTiming(0.9, {
+              duration: 80,
+            }),
+            withTiming(1, {
+              duration: 200,
+              easing: Easing.in(Easing.elastic(1.4)),
+            })
+          );
+          onClick();
+        }}
+      >
+        {success && successElement}
+        {error && errorElement}
+        {!success && !error && loading && LoaderElement}
+        {!success && !error && !loading && children}
+      </ButtonStyle>
+    </Animated.View>
+  );
+};
+
+export default RoundBtn;

package/src/Buttons/AnimatedRoundedButton/FloatingButton.style.js

@@ -0,0 +1,12 @@
+import styled from "styled-components/native";
+import { TouchableWithoutFeedback } from "react-native-gesture-handler";
+
+export const ButtonStyle = styled(TouchableWithoutFeedback)`
+  height: 54px;
+  width: 100%;
+  border-radius: ${(props) => props.theme.borderRadiusMedium};
+  background-color: ${(props) =>
+    props.success || props.error ? "transparent" : props.color};
+  opacity: ${(props) => (props.active ? 1 : 0.7)};
+  ${(props) => props.style};
+`;

package/src/Buttons/AnimatedRoundedButton/index.js

@@ -0,0 +1,129 @@
+import React, { useEffect } from "react";
+import { Dimensions } from "react-native";
+import { Center } from "../../Layout";
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+  Easing,
+} from "react-native-reanimated";
+import Loader from "../../Loader";
+import Success from "../../Success";
+import Error from "../../Error";
+import { theme } from "../../Theme/definitions";
+
+const AnimatedRoundedButton = ({
+  children,
+  active,
+  color,
+  onClick = () => {},
+  loading,
+  success,
+  error,
+  style,
+}) => {
+  const translateY = useSharedValue(200);
+  const height = useSharedValue(70);
+  const right = useSharedValue(0);
+  const left = useSharedValue(0);
+  const bottom = useSharedValue(10);
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [
+        {
+          translateY: translateY.value,
+        },
+      ],
+      width: "100%",
+    };
+  });
+
+  const animatedAbsolute = useAnimatedStyle(() => {
+    return {
+      height: height.value,
+      right: right.value,
+      left: left.value,
+      bottom: bottom.value,
+    };
+  });
+
+  useEffect(() => {
+    translateY.value = withTiming(0, {
+      duration: 450,
+      easing: Easing.in(Easing.elastic(2)),
+    });
+  }, []);
+
+  useEffect(() => {
+    if (loading) {
+      height.value = withTiming(Dimensions.get("window").height, {
+        duration: 250,
+      });
+      right.value = withTiming(0, {
+        duration: 250,
+        easing: Easing.in(Easing.elastic(2)),
+      });
+      bottom.value = withTiming(0, {
+        duration: 250,
+        easing: Easing.in(Easing.elastic(2)),
+      });
+    } else {
+      setTimeout(() => {
+        height.value = withTiming(70, {
+          duration: 200,
+        });
+        right.value = withTiming(0, {
+          duration: 200,
+          easing: Easing.in(Easing.elastic(2)),
+        });
+        bottom.value = withTiming(10, {
+          duration: 200,
+          easing: Easing.in(Easing.elastic(2)),
+        });
+      }, 600);
+    }
+  }, [loading]);
+
+  return (
+    <Animated.View
+      style={[
+        {
+          flex: 1,
+          position: "absolute",
+          height: 70,
+          width: "100%",
+          zIndex: 11,
+          backgroundColor:
+            loading || success || error
+              ? "rgba(255, 255, 255, 0.8)"
+              : "rgba(255, 255, 255, 0)",
+        },
+        animatedAbsolute,
+      ]}
+    >
+      <Center>
+        <Animated.View style={[animatedStyle]}>
+          {success && (
+            <Center>
+              <Success />
+            </Center>
+          )}
+          {error && (
+            <Center>
+              <Error />
+            </Center>
+          )}
+          {!success && !error && loading && (
+            <Center>
+              <Loader color={theme.color2} />
+            </Center>
+          )}
+          {!success && !error && !loading && <>{children}</>}
+        </Animated.View>
+      </Center>
+    </Animated.View>
+  );
+};
+
+export default AnimatedRoundedButton;

package/src/Buttons/FeedbackButton/FloatingButton.js

@@ -1,5 +1,4 @@
 import React, { useEffect } from "react";
-import { Dimensions } from "react-native";
 import { ButtonStyle } from "./FloatingButton.style";
 import Animated, {
   useAnimatedStyle,

package/src/Buttons/RoundButton/index.js

@@ -29,29 +29,27 @@ const RoundBtn = ({
   });
 
   return (
-    <ButtonWrapper>
-      <Animated.View style={[animatedStyle]}>
-        <ButtonStyle
-          size={size}
-          active={active}
-          color={color}
-          style={style}
-          onPressIn={() => {
-            scale.value = withSequence(
-              withTiming(0.9, {
-                duration: 80,
-              }),
-              withTiming(1, {
-                duration: 200,
-              })
-            );
-          }}
-          onPress={() => onClick()}
-        >
-          {children}
-        </ButtonStyle>
-      </Animated.View>
-    </ButtonWrapper>
+    <Animated.View style={[{ flex: 1 }, animatedStyle]}>
+      <ButtonStyle
+        size={size}
+        active={active}
+        color={color}
+        style={style}
+        onPressIn={() => {
+          scale.value = withSequence(
+            withTiming(0.9, {
+              duration: 80,
+            }),
+            withTiming(1, {
+              duration: 200,
+            })
+          );
+        }}
+        onPress={() => onClick()}
+      >
+        {children}
+      </ButtonStyle>
+    </Animated.View>
   );
 };
 

package/src/Buttons/RoundedButton/RoundedButton.style.js

@@ -3,8 +3,9 @@ import styled from "styled-components/native";
 export const ButtonWrapper = styled.View``;
 
 export const ButtonStyle = styled.Pressable`
-  min-height: 60px;
-  border-radius: ${(props) => props.theme.borderRadius};
+  min-height: ${(props) => (props.size === "big" ? "60px" : "54px")};
+  width: 100%;
+  border-radius: ${(props) => props.theme.borderRadiusMedium};
   background-color: ${(props) => props.color};
   opacity: ${(props) => (props.active ? 1 : 0.7)};
   ${(props) => props.style};

package/src/Buttons/RoundedButton/index.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { ButtonWrapper, ButtonStyle } from "./RoundedButton.style";
+import { ButtonStyle } from "./RoundedButton.style";
 import Animated, {
   useAnimatedStyle,
   useSharedValue,
@@ -13,6 +13,8 @@ const RoundedBtn = ({
   color,
   onClick = () => {},
   style,
+  size = "big",
+  hitSlop = 0,
 }) => {
   const scale = useSharedValue(1);
 
@@ -28,28 +30,28 @@ const RoundedBtn = ({
   });
 
   return (
-    <ButtonWrapper>
-      <Animated.View style={[animatedStyle]}>
-        <ButtonStyle
-          active={active}
-          color={color}
-          style={style}
-          onPressIn={() => {
-            scale.value = withSequence(
-              withTiming(0.9, {
-                duration: 80,
-              }),
-              withTiming(1, {
-                duration: 200,
-              })
-            );
-          }}
-          onPress={() => onClick()}
-        >
-          {children}
-        </ButtonStyle>
-      </Animated.View>
-    </ButtonWrapper>
+    <Animated.View style={[animatedStyle]}>
+      <ButtonStyle
+        hitSlop={hitSlop}
+        size={size}
+        active={active}
+        color={color}
+        style={style}
+        onPressIn={() => {
+          scale.value = withSequence(
+            withTiming(0.9, {
+              duration: 80,
+            }),
+            withTiming(1, {
+              duration: 200,
+            })
+          );
+        }}
+        onPress={() => active && onClick()}
+      >
+        {children}
+      </ButtonStyle>
+    </Animated.View>
   );
 };
 

package/src/Buttons/index.js

@@ -4,6 +4,7 @@ import RoundBtn from "./RoundButton";
 import FloatingBtn from "./FloatingButton";
 import AnimatedButton from "./AnimatedButton";
 import FeedbackButton from "./FeedbackButton";
+import AnimatedRoundedButton from "./AnimatedRoundedButton";
 
 export {
   TextBtn,
@@ -12,4 +13,5 @@ export {
   FloatingBtn,
   AnimatedButton,
   FeedbackButton,
+  AnimatedRoundedButton,
 };