API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Feb 19th, 2019
113
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 11.89 KB | None | 0 0
raw download clone embed print report
  1. import React from "react";
  2. import {
  3.   StyleSheet,
  4.   View,
  5.   Text,
  6.   TouchableOpacity,
  7.   Image,
  8.   Dimensions,
  9.   ScrollView,
  10.   Animated
  11. } from "react-native";
  12. import * as constClass from "../utils/constants";
  13. import LinearGradient from "react-native-linear-gradient";
  14.  
  15. import profileThumbnail from "../assets/profile-photo.jpg";
  16. import expandIcon from "../assets/expandIcon.png";
  17.  
  18. import CardView from "react-native-cardview";
  19.  
  20. const HEADER_MAX_HEIGHT = Dimensions.get("window").height / 4;
  21. const HEADER_MIN_HEIGHT = 60;
  22. const HEADER_SCROLL_DISTANCE = HEADER_MAX_HEIGHT - HEADER_MIN_HEIGHT;
  23.  
  24. export default class ProfileScreen extends React.Component {
  25.   constructor(props) {
  26.     super(props);
  27.  
  28.     this.state = {
  29.       scrollY: new Animated.Value(0)
  30.     };
  31.   }
  32.  
  33.   render() {
  34.     const headerHeight = this.state.scrollY.interpolate({
  35.       inputRange: [0, HEADER_SCROLL_DISTANCE],
  36.       outputRange: [HEADER_MAX_HEIGHT, HEADER_MIN_HEIGHT],
  37.       extrapolate: "clamp"
  38.     });
  39.  
  40.     const imageOpacity = this.state.scrollY.interpolate({
  41.       inputRange: [0, 1, HEADER_SCROLL_DISTANCE],
  42.       outputRange: [1, 1, 0],
  43.       extrapolate: "clamp"
  44.     });
  45.  
  46.     /*const imageTranslate = this.state.scrollY.interpolate({
  47.       inputRange: [0, HEADER_SCROLL_DISTANCE],
  48.       outputRange: [0, -20],
  49.       extrapolate: "clamp"
  50.     });*/
  51.  
  52.     return (
  53.       <View
  54.         style={{ backgroundColor: "#ededed", flex: 1, flexDirection: "column" }}
  55.       >
  56.         <Animated.View
  57.           style={[
  58.             styles.headerStyle,
  59.             {
  60.               height: headerHeight,
  61.               useNativeDriver: true,
  62.               backgroundColor: "lightblue"
  63.             }
  64.           ]}
  65.         >
  66.         </Animated.View>
  67.         <ScrollView
  68.           contentContainerStyle={styles.bodyStyle}
  69.           scrollEventThrottle={16}
  70.           onScroll={Animated.event([
  71.             { nativeEvent: { contentOffset: { y: this.state.scrollY } } }
  72.           ])}
  73.         >
  74.           <CardView
  75.             style={styles.infoBox}
  76.             cardElevation={2}
  77.             cardMaxElevation={2}
  78.             cornerRadius={5}
  79.           >
  80.             <View
  81.               style={{
  82.                 flex: 1,
  83.                 alignItems: "flex-start",
  84.                 justifyContent: "space-evenly"
  85.               }}
  86.             >
  87.               <Text style={styles.titleInfoBox}>Personal Info</Text>
  88.               <View style={styles.attributeBox}>
  89.                 <Text style={styles.keyInfoBox}> Birth date: </Text>
  90.                 <Text style={styles.valueInfoBox}>00/00/00</Text>
  91.               </View>
  92.               <View style={styles.attributeBox}>
  93.                 <Text style={styles.keyInfoBox}> Address: </Text>
  94.                 <Text style={styles.valueInfoBox}>
  95.                   Lorem ipsum dolor sit amet, consectetur
  96.                 </Text>
  97.               </View>
  98.             </View>
  99.             <TouchableOpacity style={styles.expandedButtonStyle}>
  100.               <Image
  101.                 source={expandIcon}
  102.                 style={styles.expandIconStyle}
  103.                 resizeMode="contain"
  104.               />
  105.             </TouchableOpacity>
  106.           </CardView>
  107.           <CardView
  108.             style={styles.infoBox}
  109.             cardElevation={2}
  110.             cardMaxElevation={2}
  111.             cornerRadius={5}
  112.           >
  113.             <View
  114.               style={{
  115.                 flex: 1,
  116.                 alignItems: "flex-start",
  117.                 justifyContent: "space-evenly"
  118.               }}
  119.             >
  120.               <Text style={styles.titleInfoBox}>Personal Info</Text>
  121.               <View style={styles.attributeBox}>
  122.                 <Text style={styles.keyInfoBox}> Birth date: </Text>
  123.                 <Text style={styles.valueInfoBox}>00/00/00</Text>
  124.               </View>
  125.               <View style={styles.attributeBox}>
  126.                 <Text style={styles.keyInfoBox}> Address: </Text>
  127.                 <Text style={styles.valueInfoBox}>
  128.                   Lorem ipsum dolor sit amet, consectetur
  129.                 </Text>
  130.               </View>
  131.             </View>
  132.             <TouchableOpacity style={styles.expandedButtonStyle}>
  133.               <Image
  134.                 source={expandIcon}
  135.                 style={styles.expandIconStyle}
  136.                 resizeMode="contain"
  137.               />
  138.             </TouchableOpacity>
  139.           </CardView>
  140.           <CardView
  141.             style={styles.infoBox}
  142.             cardElevation={2}
  143.             cardMaxElevation={2}
  144.             cornerRadius={5}
  145.           >
  146.             <View
  147.               style={{
  148.                 flex: 1,
  149.                 alignItems: "flex-start",
  150.                 justifyContent: "space-evenly"
  151.               }}
  152.             >
  153.               <Text style={styles.titleInfoBox}>Personal Info</Text>
  154.               <View style={styles.attributeBox}>
  155.                 <Text style={styles.keyInfoBox}> Birth date: </Text>
  156.                 <Text style={styles.valueInfoBox}>00/00/00</Text>
  157.               </View>
  158.               <View style={styles.attributeBox}>
  159.                 <Text style={styles.keyInfoBox}> Address: </Text>
  160.                 <Text style={styles.valueInfoBox}>
  161.                   Lorem ipsum dolor sit amet, consectetur
  162.                 </Text>
  163.               </View>
  164.             </View>
  165.             <TouchableOpacity style={styles.expandedButtonStyle}>
  166.               <Image
  167.                 source={expandIcon}
  168.                 style={styles.expandIconStyle}
  169.                 resizeMode="contain"
  170.               />
  171.             </TouchableOpacity>
  172.           </CardView>
  173.           <CardView
  174.             style={styles.infoBox}
  175.             cardElevation={2}
  176.             cardMaxElevation={2}
  177.             cornerRadius={5}
  178.           >
  179.             <View
  180.               style={{
  181.                 flex: 1,
  182.                 alignItems: "flex-start",
  183.                 justifyContent: "space-evenly"
  184.               }}
  185.             >
  186.               <Text style={styles.titleInfoBox}>Personal Info</Text>
  187.               <View style={styles.attributeBox}>
  188.                 <Text style={styles.keyInfoBox}> Birth date: </Text>
  189.                 <Text style={styles.valueInfoBox}>00/00/00</Text>
  190.               </View>
  191.               <View style={styles.attributeBox}>
  192.                 <Text style={styles.keyInfoBox}> Address: </Text>
  193.                 <Text style={styles.valueInfoBox}>
  194.                   Lorem ipsum dolor sit amet, consectetur
  195.                 </Text>
  196.               </View>
  197.             </View>
  198.             <TouchableOpacity style={styles.expandedButtonStyle}>
  199.               <Image
  200.                 source={expandIcon}
  201.                 style={styles.expandIconStyle}
  202.                 resizeMode="contain"
  203.               />
  204.             </TouchableOpacity>
  205.           </CardView>
  206.           <CardView
  207.             style={styles.infoBox}
  208.             cardElevation={2}
  209.             cardMaxElevation={2}
  210.             cornerRadius={5}
  211.           >
  212.             <View
  213.               style={{
  214.                 flex: 1,
  215.                 alignItems: "flex-start",
  216.                 justifyContent: "space-evenly"
  217.               }}
  218.             >
  219.               <Text style={styles.titleInfoBox}>Personal Info</Text>
  220.               <View style={styles.attributeBox}>
  221.                 <Text style={styles.keyInfoBox}> Birth date: </Text>
  222.                 <Text style={styles.valueInfoBox}>00/00/00</Text>
  223.               </View>
  224.               <View style={styles.attributeBox}>
  225.                 <Text style={styles.keyInfoBox}> Address: </Text>
  226.                 <Text style={styles.valueInfoBox}>
  227.                   Lorem ipsum dolor sit amet, consectetur
  228.                 </Text>
  229.               </View>
  230.             </View>
  231.             <TouchableOpacity style={styles.expandedButtonStyle}>
  232.               <Image
  233.                 source={expandIcon}
  234.                 style={styles.expandIconStyle}
  235.                 resizeMode="contain"
  236.               />
  237.             </TouchableOpacity>
  238.           </CardView>
  239.           <CardView
  240.             style={styles.infoBox}
  241.             cardElevation={2}
  242.             cardMaxElevation={2}
  243.             cornerRadius={0}
  244.           >
  245.             <View
  246.               style={{
  247.                 flex: 1,
  248.                 alignItems: "flex-start",
  249.                 justifyContent: "space-evenly"
  250.               }}
  251.             >
  252.               <Text style={styles.titleInfoBox}>Job Info</Text>
  253.               <View style={styles.attributeBox}>
  254.                 <Text style={styles.keyInfoBox}> Start date: </Text>
  255.                 <Text style={styles.valueInfoBox}>00/00/00</Text>
  256.               </View>
  257.               <View style={styles.attributeBox}>
  258.                 <Text style={styles.keyInfoBox}> Job Position: </Text>
  259.                 <Text style={styles.valueInfoBox}>
  260.                   Lorem ipsum dolor sit amet, consectetur
  261.                 </Text>
  262.               </View>
  263.             </View>
  264.             <TouchableOpacity style={styles.expandedButtonStyle}>
  265.               <Image
  266.                 source={expandIcon}
  267.                 style={styles.expandIconStyle}
  268.                 resizeMode="contain"
  269.               />
  270.             </TouchableOpacity>
  271.           </CardView>
  272.           <CardView
  273.             style={styles.infoBox}
  274.             cardElevation={2}
  275.             cardMaxElevation={2}
  276.             cornerRadius={5}
  277.           >
  278.             <View
  279.               style={{
  280.                 flex: 1,
  281.                 alignItems: "flex-start",
  282.                 justifyContent: "space-evenly"
  283.               }}
  284.             >
  285.               <Text style={styles.titleInfoBox}>Other Info</Text>
  286.               <View style={styles.attributeBox}>
  287.                 <Text style={styles.keyInfoBox}> Other date: </Text>
  288.                 <Text style={styles.valueInfoBox}>00/00/00</Text>
  289.               </View>
  290.               <View style={styles.attributeBox}>
  291.                 <Text style={styles.keyInfoBox}> Health Insurance: </Text>
  292.                 <Text style={styles.valueInfoBox}>
  293.                   Lorem ipsum dolor sit amet, consectetur
  294.                 </Text>
  295.               </View>
  296.             </View>
  297.             <TouchableOpacity style={styles.expandedButtonStyle}>
  298.               <Image
  299.                 source={expandIcon}
  300.                 style={styles.expandIconStyle}
  301.                 resizeMode="contain"
  302.               />
  303.             </TouchableOpacity>
  304.           </CardView>
  305.         </ScrollView>
  306.       </View>
  307.     );
  308.   }
  309. }
  310.  
  311. const styles = StyleSheet.create({
  312.   headerStyle: {
  313.     width: "100%",
  314.     height: Dimensions.get("window").height / 4,
  315.     position: "relative",
  316.     zIndex: 3
  317.   },
  318.   cardHeaderStyle: {
  319.     width: "100%",
  320.     height: "100%",
  321.     zIndex: 2
  322.   },
  323.   bodyStyle: {
  324.     paddingTop: 30,
  325.     alignItems: "center"
  326.   },
  327.   profileImageStyle: {
  328.     position: "absolute",
  329.     top: "30%",
  330.     left: "8%",
  331.     width: "40%",
  332.     aspectRatio: 1,
  333.     borderWidth: 10,
  334.     borderColor: "#ededed",
  335.     backgroundColor: "#ededed",
  336.     borderRadius: Dimensions.get("window").width * 0.4,
  337.     zIndex: 4
  338.   },
  339.   infoBox: {
  340.     position: "relative",
  341.     width: "90%",
  342.     height: 150,
  343.     backgroundColor: "#FFF",
  344.     marginBottom: 20,
  345.     zIndex: 1
  346.   },
  347.   titleInfoBox: {
  348.     fontFamily: constClass.MEDIUM,
  349.     fontSize: 20,
  350.     color: constClass.LIGHT_BLUE,
  351.     paddingLeft: "6%"
  352.   },
  353.   keyInfoBox: {
  354.     fontFamily: constClass.MEDIUM,
  355.     fontSize: 16,
  356.     color: constClass.LIGHT_BLUE,
  357.     width: "30%"
  358.   },
  359.   valueInfoBox: {
  360.     fontFamily: constClass.MEDIUM,
  361.     fontSize: 16,
  362.     color: constClass.DARK_BLUE,
  363.     width: "60%"
  364.   },
  365.   attributeBox: {
  366.     flexDirection: "row",
  367.     justifyContent: "flex-start",
  368.     alignItems: "center",
  369.     paddingLeft: "5%"
  370.   },
  371.   expandedButtonStyle: {
  372.     position: "absolute",
  373.     bottom: "0%",
  374.     right: "0%",
  375.     //backgroundColor: "red",
  376.     width: "13%",
  377.     aspectRatio: 1
  378.   },
  379.   expandIconStyle: {
  380.     maxWidth: "100%",
  381.     maxHeight: "100%"
  382.   }
  383. });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!