29/8, screen project done, profile baru 10%, notif blm dibuat screen

apps/components/Card/CardHomePromo.js

@@ -0,0 +1,175 @@
+import Text from '@components/Text';
+import {BaseColor} from '@config';
+import PropTypes from 'prop-types';
+import React from 'react';
+import {ActivityIndicator, StyleSheet, TouchableOpacity} from 'react-native';
+// import styles from './styles';
+import {useTheme} from '@react-navigation/native';
+import {Image, View} from 'react-native';
+import {Fonts} from '@config';
+
+export default function CardHomePromo(props) {
+  const {colors} = useTheme();
+  const {
+    style,
+    loading,
+    children,
+    backgroundColor,
+    title,
+    subtitle,
+    onPressSeeDetails,
+    onPress,
+    image,
+    ...rest
+  } = props;
+
+  return (
+    <TouchableOpacity onPress={onPress}>
+      <View
+        style={{
+          // flex: 1,
+          flexDirection: 'row',
+          // borderWidth: 1,
+          // borderColor: 'black',
+          width: '100%',
+          height: 180, // height ini harus sama kayak height image ataupun sebaliknya, karena biar sejajar panjangnya
+          alignSelf: 'center',
+          borderRadius: 25,
+          // alignItems: 'center',
+          alignContent: 'center',
+          justifyContent: 'space-between',
+          marginHorizontal: 20,
+          // backgroundColor: BaseColor.corn50,
+          backgroundColor: backgroundColor,
+        }}>
+        <View
+          style={{
+            width: '70%',
+            paddingHorizontal: 25,
+            paddingVertical: 15,
+          }}>
+          <Text
+            style={{
+              color: BaseColor.grey10,
+              fontFamily: Fonts.type.LatoBold,
+              fontSize: 16,
+              marginBottom: 10,
+            }}>
+            {/* Step into your new elegance design home. */}
+            {title}
+          </Text>
+          <Text
+            style={{
+              color: BaseColor.grey10,
+              fontFamily: Fonts.type.Lato,
+              fontSize: 12,
+              marginBottom: 10,
+            }}>
+            {/* Each apartment showcase contemporary architecture, high-end finished, and
+      top-of the-line appliance. */}
+            {subtitle}
+          </Text>
+
+          <TouchableOpacity
+            onPress={onPressSeeDetails}
+            style={{
+              backgroundColor: BaseColor.corn70,
+              width: 100,
+              paddingVertical: 10,
+              paddingHorizontal: 10,
+              borderRadius: 18,
+              marginTop: 10,
+            }}>
+            <View>
+              <Text
+                style={{
+                  color: BaseColor.corn10,
+                  fontFamily: Fonts.type.Lato,
+                  alignSelf: 'center',
+                  justifyContent: 'center',
+                }}>
+                See details
+              </Text>
+            </View>
+          </TouchableOpacity>
+        </View>
+        <View style={{width: '30%'}}>
+          <Image
+            source={image}
+            //   source={require('@assets/images/home/slider-project/sudirmansuite.jpeg')}
+            // width={80}
+            style={{
+              resizeMode: 'cover',
+              borderTopRightRadius: 25,
+              borderBottomRightRadius: 25,
+              // alignItems: 'center',
+              width: '100%',
+              height: 180,
+            }}
+            // height={80}
+          ></Image>
+        </View>
+      </View>
+    </TouchableOpacity>
+
+    // <TouchableOpacity
+    //   {...rest}
+    //   style={StyleSheet.flatten([
+    //     [styles.default, {backgroundColor: backgroundColor}],
+    //     outline && [
+    //       styles.outline,
+    //       {
+    //         backgroundColor: colors.card,
+    //         borderColor: colors.primary,
+    //       },
+    //     ],
+    //     full && styles.full,
+    //     medium && styles.medium,
+    //     round && styles.round,
+    //     style,
+    //   ])}
+    //   activeOpacity={0.9}>
+    //   {icon ? icon : null}
+    //   <Text
+    //     style={StyleSheet.flatten([
+    //       styles.textDefault,
+    //       outline && {color: colors.primary},
+    //       styleText,
+    //     ])}
+    //     numberOfLines={1}>
+    //     {children}
+    //   </Text>
+    //   {loading ? (
+    //     <ActivityIndicator
+    //       size="small"
+    //       color={outline ? colors.primary : BaseColor.whiteColor}
+    //       style={{paddingLeft: 5}}
+    //     />
+    //   ) : null}
+    // </TouchableOpacity>
+  );
+}
+
+CardHomePromo.propTypes = {
+  loading: PropTypes.bool,
+
+  backgroundColor: PropTypes.string,
+  title: PropTypes.string,
+  subtitle: PropTypes.string,
+  onPressSeeDetails: PropTypes.func,
+  onPress: PropTypes.func,
+  image: PropTypes.node,
+  style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+  loading: PropTypes.bool,
+};
+
+CardHomePromo.defaultProps = {
+  style: {},
+  loading: false,
+  image: '',
+  onPress: () => {},
+  onPressSeeDetails: () => {},
+  subtitle: '',
+  title: '',
+  backgroundColor: '',
+};

apps/components/Header/Animated/index.js

@@ -0,0 +1,103 @@
+import React from "react";
+import { Animated, View } from "react-native";
+import styles from "./styles";
+
+const HeaderAnimated = ({
+  title = "",
+  componentRight = null,
+  componentLeft = null,
+  componentBottom = null,
+  scrollY = 0,
+  widthRight = 80,
+  heightScroll = 140,
+  styleRight = {},
+  style = {}
+}) => {
+  // const scrollY = useRef(new Animated.Value(0)).current;
+
+  //For header background color from transparent to header color
+  const positionTopInput = scrollY.interpolate({
+    inputRange: [0, heightScroll],
+    outputRange: [75, 16],
+    extrapolate: "clamp",
+    useNativeDriver: true,
+  });
+
+  const paddingInput = scrollY.interpolate({
+    inputRange: [0, heightScroll],
+    outputRange: [0, widthRight],
+    extrapolate: "clamp",
+    useNativeDriver: true,
+  });
+  const heightView = scrollY.interpolate({
+    inputRange: [0, heightScroll],
+    outputRange: [45, 0],
+    extrapolate: "clamp",
+    useNativeDriver: true,
+  });
+
+  const opacityHeader = scrollY.interpolate({
+    inputRange: [0, heightScroll],
+    outputRange: [1, 0],
+    extrapolate: "clamp",
+    useNativeDriver: true,
+  });
+
+  return (
+    <View
+      style={[
+        styles.paddingSrollView,
+        { position: "relative", paddingBottom: 0 },
+        style
+      ]}
+    >
+      <View
+        style={{
+          flexDirection: "row",
+          marginBottom: 16,
+          alignItems: "center",
+          marginRight: widthRight,
+        }}
+      >
+        <Animated.View
+          style={{
+            flex: 1,
+            opacity: opacityHeader,
+            justifyContent: "center",
+          }}
+        >
+          {componentLeft}
+        </Animated.View>
+      </View>
+      <Animated.View
+        style={{
+          height: heightView,
+        }}
+      />
+      <Animated.View
+        style={{
+          position: "absolute",
+          top: positionTopInput,
+          left: 20,
+          width: "100%",
+          paddingRight: paddingInput,
+        }}
+      >
+        {componentBottom}
+      </Animated.View>
+      <View
+        style={[
+          styles.componentRight,
+          {
+            width: widthRight,
+          },
+          styleRight,
+        ]}
+      >
+        {componentRight}
+      </View>
+    </View>
+  );
+};
+
+export default HeaderAnimated;

apps/components/Header/Animated/styles.js

@@ -0,0 +1,14 @@
+import { StyleSheet } from "react-native";
+
+export default StyleSheet.create({
+  paddingSrollView: { padding: 20 },
+  paddingFlatList: {
+    paddingTop: 8,
+  },
+  componentRight: {
+    alignItems: "flex-end",
+    position: "absolute",
+    right: 20,
+    top: 22,
+  },
+});