feat(home): add session card and home design

.eslintrc.json

@@ -44,6 +44,7 @@
     "react/require-default-props": "off",
     "react/function-component-definition": ["error", { "namedComponents": "arrow-function" }],
     "no-promise-executor-return": "off",
+    "react/style-prop-object": "off",
     "react/no-unstable-nested-components": ["warn", { "allowAsProps": true }],
     "eol-last": "off",
     "@typescript-eslint/comma-dangle": "off",

.vscode/settings.json

@@ -0,0 +1,9 @@
+{
+  "i18n-ally.localesPaths": [
+    "ios/Pods/RCT-Folly/folly/lang",
+    "ios/Pods/boost/boost/locale",
+    "ios/Pods/boost/boost/predef/language",
+    "ios/Pods/Headers/Private/RCT-Folly/folly/lang",
+    "ios/Pods/Headers/Public/RCT-Folly/folly/lang"
+  ]
+}

App.tsx

@@ -1,6 +1,7 @@
 import 'react-native-gesture-handler';
 
 import React, { useCallback, useEffect, useState } from 'react';
+import { I18nextProvider } from 'react-i18next';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import Toast from 'react-native-toast-message';
 import { Colors, Spacings, Typography } from 'react-native-ui-lib';
@@ -16,6 +17,7 @@ import * as SplashScreen from 'expo-splash-screen';
 import { StatusBar } from 'expo-status-bar';
 
 import { GestureHandlerRootView } from './App.styled';
+import i18n from './i18n';
 
 SplashScreen.preventAutoHideAsync();
 
@@ -63,17 +65,17 @@ const App = () => {
   }
 
   return (
-    <GestureHandlerRootView onLayout={onLayoutRootView}>
-      <SafeAreaProvider>
-        {/* eslint-disable react/style-prop-object */}
-        <StatusBar style="auto" />
-        {/* eslint-enable react/style-prop-object */}
-        <QueryClientProvider client={queryClient}>
-          <RootNavigator />
-          <Toast />
-        </QueryClientProvider>
-      </SafeAreaProvider>
-    </GestureHandlerRootView>
+    <I18nextProvider i18n={i18n}>
+      <GestureHandlerRootView onLayout={onLayoutRootView}>
+        <SafeAreaProvider>
+          <StatusBar style="auto" />
+          <QueryClientProvider client={queryClient}>
+            <RootNavigator />
+            <Toast />
+          </QueryClientProvider>
+        </SafeAreaProvider>
+      </GestureHandlerRootView>
+    </I18nextProvider>
   );
 };
 

app/assets/colors.json

@@ -1,4 +1,16 @@
 {
+  "base": {
+    "white": "#fff",
+    "beige": "#FFF1DC",
+    "blue": "#3A98B9",
+    "lightBeige": "#E8D5C4",
+    "lightGray": "#EEEEEE"
+  },
+  "supports": {
+    "green": "#A4D0A4",
+    "yellow": "#F7D060",
+    "red": "#CE5959"
+  },
   "grays": {
     "gray": "#A0A1B4",
     "gray02": "#FAFAFA",

app/components/Containers/Private/Container.styled.ts

@@ -1,10 +1,13 @@
+import colors from '@oxvo-mobile/assets/colors.json';
+
 import styled from 'styled-components/native';
 
 const Container = styled.View`
   flex: 1;
   position: relative;
-  padding: 16px;
-  background-color: #fdfdfd;
+  // padding: 0 16px;
+  color: 'red';
+  background-color: ${colors.grays.gray02};
 `;
 
 export default Container;

app/components/CustomHandle.tsx

@@ -0,0 +1,158 @@
+import React, { useMemo } from 'react';
+import { StyleProp, StyleSheet, ViewStyle } from 'react-native';
+import Animated, {
+  Extrapolate,
+  interpolate,
+  useAnimatedStyle,
+  useDerivedValue,
+} from 'react-native-reanimated';
+import { toRad } from 'react-native-redash';
+import { Text } from 'react-native-ui-lib';
+
+import colors from '@oxvo-mobile/assets/colors.json';
+
+import { BottomSheetHandleProps } from '@gorhom/bottom-sheet';
+
+// @ts-ignore
+export const transformOrigin = ({ x, y }, ...transformations) => {
+  'worklet';
+
+  return [
+    { translateX: x },
+    { translateY: y },
+    ...transformations,
+    { translateX: x * -1 },
+    { translateY: y * -1 },
+  ];
+};
+
+interface HandleProps extends BottomSheetHandleProps {
+  style?: StyleProp<ViewStyle>;
+}
+
+const Handle: React.FC<HandleProps> = ({ style, title, animatedIndex }) => {
+  // #region animations
+  const indicatorTransformOriginY = useDerivedValue(() =>
+    interpolate(animatedIndex.value, [0, 1, 2], [-1, 0, 1], Extrapolate.CLAMP)
+  );
+  // #endregion
+
+  // #region styles
+  const containerStyle = useMemo(() => [styles.header, style], [style]);
+  const containerAnimatedStyle = useAnimatedStyle(() => {
+    const borderTopRadius = interpolate(animatedIndex.value, [1, 2], [20, 0], Extrapolate.CLAMP);
+    return {
+      borderTopLeftRadius: borderTopRadius,
+      borderTopRightRadius: borderTopRadius,
+    };
+  });
+  const leftIndicatorStyle = useMemo(
+    () => ({
+      ...styles.indicator,
+      ...styles.leftIndicator,
+    }),
+    []
+  );
+  const leftIndicatorAnimatedStyle = useAnimatedStyle(() => {
+    const leftIndicatorRotate = interpolate(
+      animatedIndex.value,
+      [0, 1, 2],
+      [toRad(-30), 0, toRad(30)],
+      Extrapolate.CLAMP
+    );
+    return {
+      transform: transformOrigin(
+        { x: 0, y: indicatorTransformOriginY.value },
+        {
+          rotate: `${leftIndicatorRotate}rad`,
+        },
+        {
+          translateX: -5,
+        }
+      ),
+    };
+  });
+  const rightIndicatorStyle = useMemo(
+    () => ({
+      ...styles.indicator,
+      ...styles.rightIndicator,
+    }),
+    []
+  );
+  const rightIndicatorAnimatedStyle = useAnimatedStyle(() => {
+    const rightIndicatorRotate = interpolate(
+      animatedIndex.value,
+      [0, 1, 2],
+      [toRad(30), 0, toRad(-30)],
+      Extrapolate.CLAMP
+    );
+    return {
+      transform: transformOrigin(
+        { x: 0, y: indicatorTransformOriginY.value },
+        {
+          rotate: `${rightIndicatorRotate}rad`,
+        },
+        {
+          translateX: 5,
+        }
+      ),
+    };
+  });
+  // #endregion
+
+  // render
+  return (
+    <Animated.View style={[containerStyle, containerAnimatedStyle]} renderToHardwareTextureAndroid>
+      <Animated.View style={[leftIndicatorStyle, leftIndicatorAnimatedStyle]} />
+      <Animated.View style={[rightIndicatorStyle, rightIndicatorAnimatedStyle]} />
+      <Text text60BO marginT-24 style={styles.title}>
+        {title}
+      </Text>
+    </Animated.View>
+  );
+};
+
+export default Handle;
+
+const styles = StyleSheet.create({
+  header: {
+    alignContent: 'center',
+    alignItems: 'center',
+
+    backgroundColor: 'blue',
+
+    paddingVertical: 12,
+    // borderBottomWidth: 1,
+    // borderTopWidth: 1,
+    // borderLeftWidth: 1,
+    // borderRightWidth: 1,
+    // borderTopColor: '#f3f3f3',
+    // borderBottomColor: '#fff',
+    // borderLeftColor: '#f3f3f3',
+    // borderRightColor: '#f3f3f3',
+  },
+  title: {
+    // alignSelf: 'flex-start',
+    // // paddingLeft: 4,
+    // marginTop: 26,
+    // fontSize: 20,
+    // lineHeight: 20,
+    // textAlign: 'center',
+    // fontWeight: 'bold',
+  },
+  indicator: {
+    position: 'absolute',
+    width: 10,
+    top: 20,
+    height: 4,
+    backgroundColor: 'gray',
+  },
+  leftIndicator: {
+    borderTopStartRadius: 2,
+    borderBottomStartRadius: 2,
+  },
+  rightIndicator: {
+    borderTopEndRadius: 2,
+    borderBottomEndRadius: 2,
+  },
+});

app/components/Header/Header.styled.tsx

@@ -1,12 +1,9 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-
-/* eslint-disable @typescript-eslint/no-unused-vars */
-// @ts-nocheck @ts-ignore
-// FIXME: @ts-ignore
 import React from 'react';
-import { Dimensions, Image, Text, View } from 'react-native';
+import { Dimensions, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
+import colors from '@oxvo-mobile/assets/colors.json';
+
 import { SAFE_AREA_TOP_MARGIN } from '@oxvo-mobile/constants/ui';
 
 import styled from 'styled-components/native';
@@ -43,18 +40,15 @@ const HeaderContainer = styled((props) => {
   );
 })`
   padding: 24px;
-
   padding-bottom: 8px;
   display: flex;
   flex-direction: row;
   align-items: center;
-
   justify-content: space-between;
-
   z-index: 3;
-  background-color: #fdfdfd;
+  background-color: ${colors.base.white};
   border-bottom-width: 1px;
-  border-bottom-color: #eeeeee;
+  border-bottom-color: ${colors.base.lightGray};
 `;
 
 export { HeaderContainer, RightElement, LeftElement, MiddleElement };