@coorpacademy/components 11.14.4 → 11.14.6

package/es/template/mobile-login/qr-code-scanner/index.native.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+export interface Props {
+    hasPermission: boolean;
+    onScan: (token?: string) => void;
+    onHelpPress: () => void;
+    locales: {
+        title: string;
+        explanation1: string;
+        explanation2: string;
+        ctaHelp: string;
+        titleHelp: string;
+    };
+}
+declare const QRCodeScanner: (props: Props) => JSX.Element;
+export default QRCodeScanner;
+//# sourceMappingURL=index.native.d.ts.map

package/es/template/mobile-login/qr-code-scanner/index.native.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../../src/template/mobile-login/qr-code-scanner/index.native.tsx"],"names":[],"mappings":";AAQA,MAAM,WAAW,KAAK;IACpB,aAAa,EAAE,OAAO,CAAC;IACvB,MAAM,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,OAAO,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,YAAY,EAAE,MAAM,CAAC;QACrB,YAAY,EAAE,MAAM,CAAC;QACrB,OAAO,EAAE,MAAM,CAAC;QAChB,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC;CACH;AAuPD,QAAA,MAAM,aAAa,UAAW,KAAK,gBAkDlC,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/es/template/mobile-login/qr-code-scanner/index.native.js

@@ -0,0 +1,348 @@
+import React, { useCallback, useEffect, useRef } from 'react';
+import { Animated, Easing, StyleSheet, Text, View } from 'react-native';
+import QRCodeScannerBase from 'react-native-qrcode-scanner';
+import { NovaCompositionCoorpacademyQrCode as QrCodeIcon } from '@coorpacademy/nova-icons';
+import Touchable from '../../../hoc/touchable/index.native';
+const HEIGHT = 280;
+const WIDTH = 280;
+const COLOR = '#fff';
+const BORDER_RADIUS = 8;
+const LINE_WIDTH = 7;
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    height: '100%'
+  },
+  camera: {
+    width: '100%',
+    height: '100%'
+  },
+  blurs: {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    opacity: 0.6
+  },
+  blurTop: {
+    position: 'absolute',
+    backgroundColor: '#000',
+    width: '100%',
+    height: '35%',
+    transform: [{
+      translateY: -HEIGHT / 2 + LINE_WIDTH / 2
+    }]
+  },
+  blurBottom: {
+    position: 'absolute',
+    backgroundColor: '#000',
+    width: '100%',
+    height: '65%',
+    bottom: 0,
+    transform: [{
+      translateY: HEIGHT / 2 - LINE_WIDTH / 2
+    }]
+  },
+  blurLeft: {
+    position: 'absolute',
+    backgroundColor: '#000',
+    width: '50%',
+    height: HEIGHT - LINE_WIDTH,
+    left: 0,
+    top: '35%',
+    transform: [{
+      translateX: -WIDTH / 2 + LINE_WIDTH / 2
+    }, {
+      translateY: -HEIGHT / 2 + LINE_WIDTH / 2
+    }]
+  },
+  blurRight: {
+    position: 'absolute',
+    backgroundColor: '#000',
+    width: '50%',
+    height: HEIGHT - LINE_WIDTH,
+    right: 0,
+    top: '35%',
+    transform: [{
+      translateX: WIDTH / 2 - LINE_WIDTH / 2
+    }, {
+      translateY: -HEIGHT / 2 + LINE_WIDTH / 2
+    }]
+  }
+});
+const targetStyle = StyleSheet.create({
+  target: {
+    width: HEIGHT,
+    height: WIDTH,
+    top: '35%',
+    left: '50%',
+    transform: [{
+      translateX: -WIDTH / 2
+    }, {
+      translateY: -HEIGHT / 2
+    }],
+    borderRadius: BORDER_RADIUS,
+    position: 'absolute',
+    overflow: 'hidden'
+  },
+  square: {
+    position: 'absolute',
+    width: '35%',
+    height: '35%'
+  },
+  stroke: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    backgroundColor: COLOR,
+    borderRadius: BORDER_RADIUS
+  }
+});
+const explanationsStyle = StyleSheet.create({
+  explanations: {
+    position: 'absolute',
+    width: '100%',
+    height: 300,
+    bottom: 0,
+    backgroundColor: '#fff',
+    borderRadius: 30,
+    padding: 24
+  },
+  titleWrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    paddingVertical: 16
+  },
+  qrCodeIcon: {
+    fill: '#000',
+    height: 14,
+    width: 14
+  },
+  titleText: {
+    fontWeight: '600',
+    color: '#1D1D2B',
+    fontSize: 21,
+    lineHeight: 30,
+    letterSpacing: 0.5,
+    marginLeft: 5
+  },
+  line: {
+    flexDirection: 'row',
+    paddingRight: 24,
+    paddingVertical: 8
+  },
+  lineText: {
+    fontWeight: '400',
+    color: '#1D1D2B',
+    fontSize: 18,
+    lineHeight: 24,
+    letterSpacing: 0.5,
+    marginRight: 7
+  },
+  help: {
+    flexDirection: 'row',
+    marginTop: 12
+  },
+  titleHelp: {
+    fontSize: 16,
+    color: '#9999A8'
+  },
+  ctaHelp: {
+    marginLeft: 5,
+    fontSize: 16,
+    letterSpacing: 0.5,
+    textDecorationLine: 'underline',
+    color: '#9999A8'
+  }
+});
+
+const Corner = props => {
+  const {
+    position,
+    lineLength
+  } = props;
+  return /*#__PURE__*/React.createElement(View, {
+    style: [targetStyle.square, position]
+  }, /*#__PURE__*/React.createElement(Animated.View, {
+    style: [targetStyle.stroke, {
+      height: LINE_WIDTH,
+      width: lineLength
+    }]
+  }), /*#__PURE__*/React.createElement(Animated.View, {
+    style: [targetStyle.stroke, {
+      width: LINE_WIDTH,
+      height: lineLength
+    }]
+  }));
+};
+
+const Target = () => {
+  const animationRef = useRef(new Animated.Value(0)).current;
+  const lineLength = animationRef.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, WIDTH * 0.35]
+  });
+  useEffect(() => {
+    const animation = Animated.timing(animationRef, {
+      toValue: 1,
+      duration: 700,
+      delay: 400,
+      easing: Easing.out(Easing.sin),
+      useNativeDriver: false
+    });
+    animation.start(); // on mount only
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return /*#__PURE__*/React.createElement(View, {
+    style: targetStyle.target
+  }, /*#__PURE__*/React.createElement(Corner, {
+    lineLength: lineLength,
+    position: {
+      top: 0,
+      left: 0,
+      transform: [{
+        rotate: '0deg'
+      }]
+    }
+  }), /*#__PURE__*/React.createElement(Corner, {
+    lineLength: lineLength,
+    position: {
+      top: 0,
+      right: 0,
+      transform: [{
+        rotate: '90deg'
+      }]
+    }
+  }), /*#__PURE__*/React.createElement(Corner, {
+    lineLength: lineLength,
+    position: {
+      bottom: 0,
+      right: 0,
+      transform: [{
+        rotate: '180deg'
+      }]
+    }
+  }), /*#__PURE__*/React.createElement(Corner, {
+    lineLength: lineLength,
+    position: {
+      bottom: 0,
+      left: 0,
+      transform: [{
+        rotate: '270deg'
+      }]
+    }
+  }));
+};
+
+const Explanations = props => {
+  const {
+    locales,
+    onHelpPress
+  } = props;
+  const animationRef = useRef(new Animated.Value(0)).current;
+  const animateBottom = animationRef.interpolate({
+    inputRange: [0, 1],
+    outputRange: [-300, 0]
+  });
+  useEffect(() => {
+    const animation = Animated.timing(animationRef, {
+      toValue: 1,
+      duration: 600,
+      delay: 400,
+      easing: Easing.out(Easing.sin),
+      useNativeDriver: false
+    });
+    animation.start(); // on mount only
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return /*#__PURE__*/React.createElement(Animated.View, {
+    style: [explanationsStyle.explanations, {
+      bottom: animateBottom
+    }]
+  }, /*#__PURE__*/React.createElement(View, {
+    style: explanationsStyle.titleWrapper
+  }, /*#__PURE__*/React.createElement(QrCodeIcon, {
+    style: explanationsStyle.qrCodeIcon
+  }), /*#__PURE__*/React.createElement(Text, {
+    style: explanationsStyle.titleText
+  }, locales.title)), /*#__PURE__*/React.createElement(View, {
+    style: explanationsStyle.line
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: explanationsStyle.lineText
+  }, "1."), /*#__PURE__*/React.createElement(Text, {
+    style: explanationsStyle.lineText
+  }, locales.explanation1)), /*#__PURE__*/React.createElement(View, {
+    style: explanationsStyle.line
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: explanationsStyle.lineText
+  }, "2."), /*#__PURE__*/React.createElement(Text, {
+    style: explanationsStyle.lineText
+  }, locales.explanation2)), /*#__PURE__*/React.createElement(Touchable, {
+    onPress: onHelpPress,
+    style: explanationsStyle.help
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: explanationsStyle.titleHelp
+  }, locales.titleHelp), /*#__PURE__*/React.createElement(Text, {
+    style: explanationsStyle.ctaHelp
+  }, locales.ctaHelp)));
+};
+
+const QRCodeScanner = props => {
+  const {
+    hasPermission,
+    locales,
+    onScan,
+    onHelpPress
+  } = props;
+  const handleRead = useCallback(({
+    data
+  }) => {
+    onScan(typeof data === 'string' ? data : undefined); // on mount only
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const blurRef = useRef(new Animated.Value(0)).current;
+  const blurOpacity = blurRef.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, 0.7]
+  });
+  useEffect(() => {
+    const animation = Animated.timing(blurRef, {
+      toValue: 1,
+      duration: 800,
+      delay: 600,
+      easing: Easing.out(Easing.sin),
+      useNativeDriver: false
+    });
+    animation.start(); // on mount only
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles.container,
+    testID: "qr-code-scanner"
+  }, hasPermission ? /*#__PURE__*/React.createElement(QRCodeScannerBase, {
+    fadeIn: false,
+    onRead: handleRead,
+    cameraStyle: styles.camera,
+    cameraProps: {
+      captureAudio: false
+    }
+  }) : null, /*#__PURE__*/React.createElement(Animated.View, {
+    style: [styles.blurs, {
+      opacity: blurOpacity
+    }]
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.blurTop
+  }), /*#__PURE__*/React.createElement(View, {
+    style: styles.blurBottom
+  }), /*#__PURE__*/React.createElement(View, {
+    style: styles.blurLeft
+  }), /*#__PURE__*/React.createElement(View, {
+    style: styles.blurRight
+  })), /*#__PURE__*/React.createElement(Target, null), /*#__PURE__*/React.createElement(Explanations, {
+    locales: locales,
+    onHelpPress: onHelpPress
+  }));
+};
+
+export default QRCodeScanner;
+//# sourceMappingURL=index.native.js.map

package/es/template/mobile-login/qr-code-scanner/index.native.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.native.js","names":["React","useCallback","useEffect","useRef","Animated","Easing","StyleSheet","Text","View","QRCodeScannerBase","NovaCompositionCoorpacademyQrCode","QrCodeIcon","Touchable","HEIGHT","WIDTH","COLOR","BORDER_RADIUS","LINE_WIDTH","styles","create","container","width","height","camera","blurs","position","opacity","blurTop","backgroundColor","transform","translateY","blurBottom","bottom","blurLeft","left","top","translateX","blurRight","right","targetStyle","target","borderRadius","overflow","square","stroke","explanationsStyle","explanations","padding","titleWrapper","flexDirection","alignItems","justifyContent","paddingVertical","qrCodeIcon","fill","titleText","fontWeight","color","fontSize","lineHeight","letterSpacing","marginLeft","line","paddingRight","lineText","marginRight","help","marginTop","titleHelp","ctaHelp","textDecorationLine","Corner","props","lineLength","Target","animationRef","Value","current","interpolate","inputRange","outputRange","animation","timing","toValue","duration","delay","easing","out","sin","useNativeDriver","start","rotate","Explanations","locales","onHelpPress","animateBottom","title","explanation1","explanation2","QRCodeScanner","hasPermission","onScan","handleRead","data","undefined","blurRef","blurOpacity","captureAudio"],"sources":["../../../../src/template/mobile-login/qr-code-scanner/index.native.tsx"],"sourcesContent":["import React, {useCallback, useEffect, useRef} from 'react';\nimport {Animated, Easing, StyleSheet, Text, View, ViewStyle} from 'react-native';\n\nimport QRCodeScannerBase from 'react-native-qrcode-scanner';\nimport type {BarCodeReadEvent} from 'react-native-camera';\nimport {NovaCompositionCoorpacademyQrCode as QrCodeIcon} from '@coorpacademy/nova-icons';\nimport Touchable from '../../../hoc/touchable/index.native';\n\nexport interface Props {\n  hasPermission: boolean;\n  onScan: (token?: string) => void;\n  onHelpPress: () => void;\n  locales: {\n    title: string;\n    explanation1: string;\n    explanation2: string;\n    ctaHelp: string;\n    titleHelp: string;\n  };\n}\n\nconst HEIGHT = 280;\nconst WIDTH = 280;\nconst COLOR = '#fff';\nconst BORDER_RADIUS = 8;\n\nconst LINE_WIDTH = 7;\n\nconst styles = StyleSheet.create({\n  container: {\n    width: '100%',\n    height: '100%'\n  },\n  camera: {\n    width: '100%',\n    height: '100%'\n  },\n  blurs: {\n    position: 'absolute',\n    width: '100%',\n    height: '100%',\n    opacity: 0.6\n  },\n  blurTop: {\n    position: 'absolute',\n    backgroundColor: '#000',\n    width: '100%',\n    height: '35%',\n    transform: [{translateY: -HEIGHT / 2 + LINE_WIDTH / 2}]\n  },\n  blurBottom: {\n    position: 'absolute',\n    backgroundColor: '#000',\n    width: '100%',\n    height: '65%',\n    bottom: 0,\n    transform: [{translateY: HEIGHT / 2 - LINE_WIDTH / 2}]\n  },\n  blurLeft: {\n    position: 'absolute',\n    backgroundColor: '#000',\n    width: '50%',\n    height: HEIGHT - LINE_WIDTH,\n    left: 0,\n    top: '35%',\n    transform: [\n      {translateX: -WIDTH / 2 + LINE_WIDTH / 2},\n      {translateY: -HEIGHT / 2 + LINE_WIDTH / 2}\n    ]\n  },\n  blurRight: {\n    position: 'absolute',\n    backgroundColor: '#000',\n    width: '50%',\n    height: HEIGHT - LINE_WIDTH,\n    right: 0,\n    top: '35%',\n    transform: [\n      {translateX: WIDTH / 2 - LINE_WIDTH / 2},\n      {translateY: -HEIGHT / 2 + LINE_WIDTH / 2}\n    ]\n  }\n});\n\nconst targetStyle = StyleSheet.create({\n  target: {\n    width: HEIGHT,\n    height: WIDTH,\n    top: '35%',\n    left: '50%',\n    transform: [{translateX: -WIDTH / 2}, {translateY: -HEIGHT / 2}],\n    borderRadius: BORDER_RADIUS,\n    position: 'absolute',\n    overflow: 'hidden'\n  },\n  square: {\n    position: 'absolute',\n    width: '35%',\n    height: '35%'\n  },\n  stroke: {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    backgroundColor: COLOR,\n    borderRadius: BORDER_RADIUS\n  }\n});\n\nconst explanationsStyle = StyleSheet.create({\n  explanations: {\n    position: 'absolute',\n    width: '100%',\n    height: 300,\n    bottom: 0,\n    backgroundColor: '#fff',\n    borderRadius: 30,\n    padding: 24\n  },\n  titleWrapper: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'flex-start',\n    paddingVertical: 16\n  },\n  qrCodeIcon: {\n    fill: '#000',\n    height: 14,\n    width: 14\n  },\n  titleText: {\n    fontWeight: '600',\n    color: '#1D1D2B',\n    fontSize: 21,\n    lineHeight: 30,\n    letterSpacing: 0.5,\n    marginLeft: 5\n  },\n  line: {\n    flexDirection: 'row',\n    paddingRight: 24,\n    paddingVertical: 8\n  },\n  lineText: {\n    fontWeight: '400',\n    color: '#1D1D2B',\n    fontSize: 18,\n    lineHeight: 24,\n    letterSpacing: 0.5,\n    marginRight: 7\n  },\n  help: {\n    flexDirection: 'row',\n    marginTop: 12\n  },\n  titleHelp: {\n    fontSize: 16,\n    color: '#9999A8'\n  },\n  ctaHelp: {\n    marginLeft: 5,\n    fontSize: 16,\n    letterSpacing: 0.5,\n    textDecorationLine: 'underline',\n    color: '#9999A8'\n  }\n});\n\nconst Corner = (props: {position: ViewStyle; lineLength: Animated.AnimatedInterpolation}) => {\n  const {position, lineLength} = props;\n\n  return (\n    <View style={[targetStyle.square, position]}>\n      <Animated.View style={[targetStyle.stroke, {height: LINE_WIDTH, width: lineLength}]} />\n      <Animated.View style={[targetStyle.stroke, {width: LINE_WIDTH, height: lineLength}]} />\n    </View>\n  );\n};\n\nconst Target = () => {\n  const animationRef = useRef<Animated.Value>(new Animated.Value(0)).current;\n  const lineLength = animationRef.interpolate({\n    inputRange: [0, 1],\n    outputRange: [0, WIDTH * 0.35]\n  });\n\n  useEffect(() => {\n    const animation = Animated.timing(animationRef, {\n      toValue: 1,\n      duration: 700,\n      delay: 400,\n      easing: Easing.out(Easing.sin),\n      useNativeDriver: false\n    });\n\n    animation.start();\n    // on mount only\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  return (\n    <View style={targetStyle.target}>\n      <Corner lineLength={lineLength} position={{top: 0, left: 0, transform: [{rotate: '0deg'}]}} />\n      <Corner\n        lineLength={lineLength}\n        position={{top: 0, right: 0, transform: [{rotate: '90deg'}]}}\n      />\n      <Corner\n        lineLength={lineLength}\n        position={{bottom: 0, right: 0, transform: [{rotate: '180deg'}]}}\n      />\n      <Corner\n        lineLength={lineLength}\n        position={{bottom: 0, left: 0, transform: [{rotate: '270deg'}]}}\n      />\n    </View>\n  );\n};\n\nconst Explanations = (props: {locales: Props['locales']; onHelpPress: Props['onHelpPress']}) => {\n  const {locales, onHelpPress} = props;\n\n  const animationRef = useRef<Animated.Value>(new Animated.Value(0)).current;\n  const animateBottom = animationRef.interpolate({\n    inputRange: [0, 1],\n    outputRange: [-300, 0]\n  });\n\n  useEffect(() => {\n    const animation = Animated.timing(animationRef, {\n      toValue: 1,\n      duration: 600,\n      delay: 400,\n      easing: Easing.out(Easing.sin),\n      useNativeDriver: false\n    });\n\n    animation.start();\n\n    // on mount only\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  return (\n    <Animated.View style={[explanationsStyle.explanations, {bottom: animateBottom}]}>\n      <View style={explanationsStyle.titleWrapper}>\n        <QrCodeIcon style={explanationsStyle.qrCodeIcon} />\n        <Text style={explanationsStyle.titleText}>{locales.title}</Text>\n      </View>\n      <View style={explanationsStyle.line}>\n        <Text style={explanationsStyle.lineText}>1.</Text>\n        <Text style={explanationsStyle.lineText}>{locales.explanation1}</Text>\n      </View>\n      <View style={explanationsStyle.line}>\n        <Text style={explanationsStyle.lineText}>2.</Text>\n        <Text style={explanationsStyle.lineText}>{locales.explanation2}</Text>\n      </View>\n\n      <Touchable onPress={onHelpPress} style={explanationsStyle.help}>\n        <Text style={explanationsStyle.titleHelp}>{locales.titleHelp}</Text>\n        <Text style={explanationsStyle.ctaHelp}>{locales.ctaHelp}</Text>\n      </Touchable>\n    </Animated.View>\n  );\n};\n\nconst QRCodeScanner = (props: Props) => {\n  const {hasPermission, locales, onScan, onHelpPress} = props;\n\n  const handleRead = useCallback(({data}: BarCodeReadEvent) => {\n    onScan(typeof data === 'string' ? data : undefined);\n    // on mount only\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const blurRef = useRef<Animated.Value>(new Animated.Value(0)).current;\n  const blurOpacity = blurRef.interpolate({\n    inputRange: [0, 1],\n    outputRange: [0, 0.7]\n  });\n\n  useEffect(() => {\n    const animation = Animated.timing(blurRef, {\n      toValue: 1,\n      duration: 800,\n      delay: 600,\n      easing: Easing.out(Easing.sin),\n      useNativeDriver: false\n    });\n\n    animation.start();\n\n    // on mount only\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  return (\n    <View style={styles.container} testID=\"qr-code-scanner\">\n      {hasPermission ? (\n        <QRCodeScannerBase\n          fadeIn={false}\n          onRead={handleRead}\n          cameraStyle={styles.camera}\n          cameraProps={{captureAudio: false}}\n        />\n      ) : null}\n      <Animated.View style={[styles.blurs, {opacity: blurOpacity}]}>\n        <View style={styles.blurTop} />\n        <View style={styles.blurBottom} />\n        <View style={styles.blurLeft} />\n        <View style={styles.blurRight} />\n      </Animated.View>\n      <Target />\n      <Explanations locales={locales} onHelpPress={onHelpPress} />\n    </View>\n  );\n};\n\nexport default QRCodeScanner;\n"],"mappings":"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"}

package/es/template/mobile-login/welcome/index.native.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../../src/template/mobile-login/welcome/index.native.tsx"],"names":[],"mappings":";AA+IA,oBAAY,KAAK,GAAG;IAClB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,oBAAoB,EAAE,MAAM,IAAI,CAAC;IACjC,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,OAAO,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,WAAW,EAAE,MAAM,CAAC;QACpB,SAAS,EAAE,MAAM,CAAC;QAClB,cAAc,EAAE,MAAM,CAAC;QACvB,SAAS,EAAE,MAAM,CAAC;QAClB,OAAO,EAAE,MAAM,CAAC;KACjB,CAAC;CACH,CAAC;AAEF,QAAA,MAAM,OAAO,UAAW,KAAK,uBA0D5B,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../../src/template/mobile-login/welcome/index.native.tsx"],"names":[],"mappings":";AA0KA,oBAAY,KAAK,GAAG;IAClB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,oBAAoB,EAAE,MAAM,IAAI,CAAC;IACjC,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,OAAO,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,WAAW,EAAE,MAAM,CAAC;QACpB,SAAS,EAAE,MAAM,CAAC;QAClB,cAAc,EAAE,MAAM,CAAC;QACvB,SAAS,EAAE,MAAM,CAAC;QAClB,OAAO,EAAE,MAAM,CAAC;KACjB,CAAC;CACH,CAAC;AAEF,QAAA,MAAM,OAAO,UAAW,KAAK,uBAqI5B,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/es/template/mobile-login/welcome/index.native.js

@@ -1,7 +1,8 @@
-import React, { useEffect, useState } from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import React, { useEffect, useRef, useState } from 'react';
+import { Animated, StyleSheet, Text, View } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import { NovaCompositionCoorpacademyLogoCoorp as LogoCoorp, NovaCompositionCoorpacademyQrCode as QrCodeIcon, NovaCompositionCoorpacademyEmail as MailIcon } from '@coorpacademy/nova-icons';
+import { useAnimateProp, useTranslateY } from '@coorpacademy/react-native-animation';
 import Touchable from '../../../hoc/touchable/index.native';
 import { useTemplateContext } from '../../app-review/template-context';
 
@@ -20,12 +21,20 @@ const createStyleSheet = theme => StyleSheet.create({
     width: '100%',
     alignItems: 'flex-start'
   },
+  gradients: {
+    position: 'absolute',
+    top: 400,
+    bottom: 400,
+    left: 0,
+    right: 0,
+    flex: 1
+  },
   gradient: {
     position: 'absolute',
-    top: -100,
+    top: -730,
     bottom: 0,
-    left: -180,
-    right: 0,
+    left: -380,
+    right: -380,
     opacity: 1,
     transform: [{
       rotate: '35deg'
@@ -33,18 +42,32 @@ const createStyleSheet = theme => StyleSheet.create({
   },
   gradient2: {
     position: 'absolute',
-    top: -80,
-    bottom: 0,
-    left: 0,
-    right: -200,
-    opacity: 0.5,
+    top: -630,
+    bottom: -200,
+    left: -300,
+    right: -400,
+    opacity: 0.6,
     transform: [{
       rotate: '-35deg'
     }]
   },
+  animatedLogoWrapper: {
+    alignItems: 'center'
+  },
+  animatedLogo: {
+    position: 'absolute',
+    width: 77,
+    height: 100
+  },
   logo: {
     padding: 100
   },
+  logoBG: {
+    backgroundColor: '#fff',
+    top: 20,
+    width: 60,
+    height: 60
+  },
   title: {
     fontWeight: '600',
     fontSize: 28,
@@ -129,36 +152,102 @@ const Welcome = props => {
     theme
   } = useTemplateContext();
   const [styleSheet, setStylesheet] = useState(null);
+  const translateGradients = useTranslateY({
+    fromValue: 0,
+    toValue: -200,
+    duration: 300,
+    delay: 750
+  });
+  const translateContent = useTranslateY({
+    fromValue: 170,
+    toValue: 0,
+    duration: 450,
+    delay: 750
+  });
+  const fadeInContent = useAnimateProp({
+    property: 'opacity',
+    fromValue: 0,
+    toValue: 1,
+    duration: 650,
+    delay: 750
+  });
+  const fadeOutStartLogo = useAnimateProp({
+    property: 'opacity',
+    fromValue: 1,
+    toValue: 0,
+    duration: 450,
+    delay: 1000
+  });
+  const fadeInFinalLogo = useAnimateProp({
+    property: 'opacity',
+    fromValue: 0,
+    toValue: 1,
+    duration: 250,
+    delay: 900
+  });
+  const scaleAnim = useRef(new Animated.Value(0)).current;
+  const interpolateScale = scaleAnim.interpolate({
+    inputRange: [0, 0.4, 0.5, 0.6, 1],
+    outputRange: [1, 1.7, 1.7, 1.7, 1]
+  });
   useEffect(() => {
     const _stylesheet = createStyleSheet(theme);
 
     setStylesheet(_stylesheet);
   }, [theme]);
+  useEffect(() => {
+    fadeInContent.start();
+    fadeInFinalLogo.start();
+    fadeOutStartLogo.start();
+    translateContent.start();
+    translateGradients.start();
+    const animatedScale = Animated.timing(scaleAnim, {
+      toValue: 1,
+      duration: 1000,
+      useNativeDriver: true
+    });
+    animatedScale.start(); // on mount only
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   if (!styleSheet) {
     return null;
   }
 
-  return /*#__PURE__*/React.createElement(View, {
-    style: styleSheet.wrapper,
+  return /*#__PURE__*/React.createElement(Animated.View, {
+    style: [styleSheet.wrapper, translateContent.animatedStyle],
     testID: "welcome"
+  }, /*#__PURE__*/React.createElement(Animated.View, {
+    style: [styleSheet.gradients, translateGradients.animatedStyle]
   }, /*#__PURE__*/React.createElement(LinearGradient, {
     colors: ['#0061FF', '#fff'],
-    locations: [0, 0.3],
+    locations: [0, 0.95],
     style: styleSheet.gradient
   }), /*#__PURE__*/React.createElement(LinearGradient, {
     colors: ['#2199AB', '#fff'],
-    locations: [0, 0.3],
+    locations: [0, 0.95],
     style: styleSheet.gradient2
-  }), /*#__PURE__*/React.createElement(Touchable, {
+  })), /*#__PURE__*/React.createElement(Touchable, {
     onLongPress: onDemoPress,
     style: styleSheet.logo
+  }, /*#__PURE__*/React.createElement(Animated.View, {
+    style: [styleSheet.animatedLogoWrapper, {
+      transform: [{
+        scale: interpolateScale
+      }]
+    }]
+  }, /*#__PURE__*/React.createElement(Animated.View, {
+    style: [styleSheet.logoBG, fadeInFinalLogo.animatedStyle]
+  }), /*#__PURE__*/React.createElement(Animated.View, {
+    style: [styleSheet.animatedLogo, fadeInFinalLogo.animatedStyle]
   }, /*#__PURE__*/React.createElement(LogoCoorp, {
-    fill: theme.colors.cta,
-    width: 77,
-    height: 75
-  })), /*#__PURE__*/React.createElement(View, {
-    style: styleSheet.content
+    fill: "#0061FF"
+  })), /*#__PURE__*/React.createElement(Animated.View, {
+    style: [styleSheet.animatedLogo, fadeOutStartLogo.animatedStyle]
+  }, /*#__PURE__*/React.createElement(LogoCoorp, {
+    fill: "#fff"
+  })))), /*#__PURE__*/React.createElement(Animated.View, {
+    style: [styleSheet.content, fadeInContent.animatedStyle]
   }, /*#__PURE__*/React.createElement(Text, {
     style: styleSheet.title
   }, locales.title), /*#__PURE__*/React.createElement(Text, {