@servesall/atoms 1.1.16 → 1.1.19

package/src/Layout/index.js

@@ -21,6 +21,10 @@ import FullScreen from "./FullScreen";
 import WebSmallWrapper from "./WebSmallWrapper";
 import Box from "./Box";
 import RoundedTopBox from "./RoundedTopBox";
+import BorderBottom from "./BorderBottom";
+import BorderTop from "./BorderTop";
+import BorderBox from "./BorderBox";
+import ImageWrapper from "./ImageWrapper";
 
 export {
   Center,
@@ -46,4 +50,8 @@ export {
   WebSmallWrapper,
   Box,
   RoundedTopBox,
+  BorderBottom,
+  BorderTop,
+  BorderBox,
+  ImageWrapper,
 };

package/src/SlideToConfirm/Swipe.style.js

@@ -14,7 +14,7 @@ export const RoundWrapper = styled(Animated.View)`
   ${(props) => props.style};
 `;
 
-export const RoundSlider = styled.View`
+export const RoundSlider = styled(Animated.View)`
   width: 62px;
   height: 52px;
   background-color: ${(props) => props.theme.color1};

package/src/SlideToConfirm/index.js

@@ -114,7 +114,18 @@ const SwipeButton = ({
 
   return (
     <Wrapper onLayout={onLayout}>
-      <RoundWrapper style={[animatedBorder]}>
+      <Animated.View
+        style={[
+          animatedBorder,
+          {
+            width: "100%",
+            borderRadius: parseInt(theme.borderRadiusMedium, 10),
+            overflow: "hidden",
+            padding: 8,
+            borderWidth: 2,
+          },
+        ]}
+      >
         <Animated.View
           style={[
             colorWave,
@@ -150,7 +161,7 @@ const SwipeButton = ({
             </RoundSlider>
           </Animated.View>
         </PanGestureHandler>
-      </RoundWrapper>
+      </Animated.View>
     </Wrapper>
   );
 };

package/src/SplashScreen/SplashScreen.style.js

@@ -0,0 +1,6 @@
+import styled from "styled-components/native";
+
+export const Container = styled.View`
+  background-color: ${(props) => props.theme.color1};
+  flex: 1;
+`;

package/src/SplashScreen/assets/bootsplash_manifest.json

@@ -0,0 +1,7 @@
+{
+  "background": "#FFFFFF",
+  "logo": {
+    "width": 100,
+    "height": 97
+  }
+}

package/src/SplashScreen/assets/penguinOriginal.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="117px" height="113px" viewBox="0 0 117 113" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 63 (92445) - https://sketch.com -->
+    <title>Group 2</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group" transform="translate(-4.000000, 0.000000)" fill-rule="nonzero">
+            <g id="Group-2">
+                <g transform="translate(4.000000, 0.000000)">
+                    <path d="M93,37 L115.038115,49.9970209 C117.698501,51.5664791 117.641518,55.4027364 114.938395,56.8945162 L93,69" id="Fill-1" fill="#ECBD65"></path>
+                    <path d="M13.3056744,113 L82.6943256,113 C90.0415252,113 96,107.097393 96,99.8151823 L96,47.5631385 C96,21.2947904 74.5100141,0 47.9991188,0 L47.9991188,0 C21.4899859,0 0,21.2947904 0,47.5631385 L0,99.8151823 C0,107.097393 5.9567125,113 13.3056744,113" id="Fill-3" fill="#2D3436"></path>
+                    <path d="M49,45.4177434 L49,95.3935959 C49,99.0427149 51.9719953,102 55.6371062,102 L81.3628938,102 C85.0280047,102 88,99.0427149 88,95.3935959 L88,46.3378651 C88,35.2754929 78.9002334,25.619443 67.7963827,26.0115403 C62.6925321,26.1927764 58.0892649,28.3257858 54.7129522,31.6873668 C51.1808635,35.204044 49,40.0555948 49,45.4177434" id="Fill-5" fill="#FFFFFF"></path>
+                    <path d="M61,46 C61,49.8657244 64.1346712,53 68.0008835,53 C71.8670958,53 75,49.8657244 75,46 C75,42.1342756 71.8670958,39 68.0008835,39 C64.1346712,39 61,42.1342756 61,46" id="Fill-7" fill="#2D3436"></path>
+                    <path d="M109.394929,73.4127436 L95.5342956,81.3603424 C93.4885681,82.533138 93.4885681,85.466862 95.5342956,86.6396576 L109.394929,94.5872564 C111.440657,95.760052 114,94.2940575 114,91.9467313 L114,76.0532687 C114,73.7059425 111.440657,72.239948 109.394929,73.4127436" id="Fill-9" fill="#2D3436"></path>
+                    <path d="M74.8896913,73.4394613 L88.3698093,81.189527 C90.5433969,82.4382364 90.5433969,85.5617636 88.3698093,86.810473 L74.8896913,94.5605387 C72.7161037,95.809248 70,94.2483613 70,91.7491888 L70,76.2508112 C70,73.7516387 72.7161037,72.190752 74.8896913,73.4394613" id="Fill-11" fill="#2D3436"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/SplashScreen/index.js

@@ -0,0 +1,69 @@
+import React, { useState } from "react";
+import { Animated, Image, Easing, StatusBar } from "react-native";
+import BootSplash from "react-native-bootsplash";
+import bootsplash_logo from "./assets/bootsplash_logo.png";
+import bootsplash_manifest from "./assets/bootsplash_manifest.json";
+import { Container } from "./SplashScreen.style";
+import { theme } from "../Theme/definitions";
+
+const AnimatedBootSplash = ({ onAnimationEnd }) => {
+  const [opacity] = useState(() => new Animated.Value(0));
+
+  const { container, logo /*, brand */ } = BootSplash.useHideAnimation({
+    manifest: bootsplash_manifest,
+    logo: { uri: bootsplash_logo },
+    // darkLogo: require("../assets/bootsplash_dark_logo.png"),
+    // brand: require("../assets/bootsplash_brand.png"),
+    // darkBrand: require("../assets/bootsplash_dark_brand.png"),
+    statusBarTranslucent: true,
+    navigationBarTranslucent: false,
+    animate: () => {
+      // Perform animations and call onAnimationEnd
+      Animated.timing(opacity, {
+        useNativeDriver: true,
+        toValue: 800,
+        duration: 250,
+        easing: Easing.back(),
+      }).start(() => {
+        onAnimationEnd();
+      });
+    },
+  });
+
+  return (
+    <Animated.View
+      {...container}
+      style={[
+        container.style,
+        {
+          transform: [
+            {
+              translateY: opacity,
+            },
+          ],
+        },
+      ]}
+    >
+      <Image {...logo} />
+      {/* <Image {...brand} /> */}
+    </Animated.View>
+  );
+};
+
+export default function SplashScreen({ children }) {
+  const [visible, setVisible] = useState(true);
+
+  return (
+    <Container>
+      <StatusBar backgroundColor={theme.color1} barStyle="dark-content" />
+      {visible && (
+        <AnimatedBootSplash
+          onAnimationEnd={() => {
+            setVisible(false);
+          }}
+        />
+      )}
+      {!visible && children}
+    </Container>
+  );
+}

package/src/index.js

@@ -24,6 +24,10 @@ import {
   WebSmallWrapper,
   Box,
   RoundedTopBox,
+  BorderBottom,
+  BorderTop,
+  BorderBox,
+  ImageWrapper,
 } from "./Layout";
 import {
   Input,
@@ -52,6 +56,7 @@ import Switch from "./Switch";
 import SwipeButton from "./SlideToConfirm";
 import ErrorText from "./ErrorText";
 import CountryList from "./CountryFlatList";
+//import SplashScreen from "./SplashScreen";
 
 export {
   ThemeWrapper,
@@ -86,6 +91,10 @@ export {
   WebSmallWrapper,
   Box,
   RoundedTopBox,
+  BorderBottom,
+  BorderTop,
+  BorderBox,
+  ImageWrapper,
   Input,
   InputNormal,
   AnimatedPlaceholder,
@@ -109,4 +118,5 @@ export {
   ErrorText,
   AnimatedRoundedButton,
   CountryList,
+  //SplashScreen,
 };