feat: close icon rotation animation and swipe gesture fix

Signed-off-by: Sakul <sakulbudhathoki977@gmail.com>

js/packages/components/main/Footer.tsx

@@ -1,5 +1,5 @@
-import React from 'react'
-import { TouchableOpacity, View } from 'react-native'
+import React, { useEffect, useMemo } from 'react'
+import { TouchableOpacity, View, Animated, Easing } from 'react-native'
 import { useIsFocused } from '@react-navigation/native'
 import { Icon } from '@ui-kitten/components'
 import LinearGradient from 'react-native-linear-gradient'
@@ -14,6 +14,7 @@ type ButtonFooterProps = {
 	selected: boolean
 	disabled?: boolean
 	selectedElemSize?: number
+	isFocused: boolean
 }
 
 const ButtonFooter: React.FC<ButtonFooterProps> = ({
@@ -22,6 +23,7 @@ const ButtonFooter: React.FC<ButtonFooterProps> = ({
 	onPress,
 	selected,
 	disabled = false,
+	isFocused = false,
 }) => {
 	const [{ border, column, color, opacity }] = useStyles()
 	const selectedSize = 59
@@ -35,6 +37,20 @@ const ButtonFooter: React.FC<ButtonFooterProps> = ({
 	const elemColor = selected ? selectedElemColor : color.blue
 	const selectedBackgroundColor = color.blue
 	const backgroundColor = selected ? selectedBackgroundColor : backgroundColorProp
+	let rotateValue = useMemo(() => new Animated.Value(0), [])
+	useEffect(() => {
+		Animated.timing(rotateValue, {
+			toValue: isFocused ? 0 : 1,
+			duration: 300,
+			easing: Easing.linear,
+			useNativeDriver: false,
+		}).start()
+	}, [isFocused, rotateValue])
+
+	const rotateAnimation = rotateValue.interpolate({
+		inputRange: [0, 1],
+		outputRange: ['0deg', '45deg'],
+	})
 
 	return (
 		<View
@@ -60,9 +76,18 @@ const ButtonFooter: React.FC<ButtonFooterProps> = ({
 					},
 				]}
 			>
-				<View
+				<Animated.View
 					style={[
-						{ justifyContent: 'center', alignItems: 'center' },
+						{
+							justifyContent: 'center',
+							alignItems: 'center',
+
+							transform: [
+								{
+									rotate: rotateAnimation,
+								},
+							],
+						},
 						disabled ? opacity(0.5) : null,
 					]}
 				>
@@ -73,7 +98,7 @@ const ButtonFooter: React.FC<ButtonFooterProps> = ({
 						height={elemSize}
 						fill={elemColor}
 					/>
-				</View>
+				</Animated.View>
 			</TouchableOpacity>
 		</View>
 	)
@@ -90,6 +115,7 @@ export const Footer: React.FC<{}> = () => {
 		icon: 'plus-outline',
 		onPress: () => navigate.main.listModal(),
 		selected: true,
+		isFocused,
 	}
 
 	return (

js/packages/components/main/HomeModal.tsx

@@ -14,8 +14,8 @@ import LinearGradient from 'react-native-linear-gradient'
 import {
 	PanGestureHandler,
 	State,
-	PanGestureHandlerGestureEvent,
 	PanGestureHandlerStateChangeEvent,
+	PanGestureHandlerGestureEvent,
 } from 'react-native-gesture-handler'
 
 import { useStyles } from '@berty-tech/styles'
@@ -35,7 +35,7 @@ const HomeModalButton: React.FC<{
 	value,
 	bgColor,
 	icon,
-	iconSize = 60,
+	iconSize = 50,
 	iconPack,
 	onPress,
 	children = null,
@@ -74,9 +74,9 @@ const HomeModalButton: React.FC<{
 
 								elevation: 16,
 							},
-							border.radius.large,
-							padding.vertical.large,
-							padding.horizontal.medium,
+							border.radius.medium,
+							padding.vertical.medium,
+							padding.horizontal.small,
 							margin.right.large,
 						]}
 					>
@@ -189,7 +189,8 @@ export const HomeModal: React.FC<{}> = () => {
 										elevation: 18,
 									},
 									border.radius.medium,
-									padding.large,
+									padding.vertical.large,
+									padding.horizontal.medium,
 									padding.top.medium,
 								]}
 							>
@@ -216,9 +217,9 @@ export const HomeModal: React.FC<{}> = () => {
 												{
 													backgroundColor: '#527FEC',
 												},
-												border.radius.large,
-												padding.vertical.large,
-												padding.horizontal.medium,
+												border.radius.medium,
+												padding.vertical.medium,
+												padding.horizontal.small,
 												margin.right.large,
 											]}
 										>
@@ -230,7 +231,7 @@ export const HomeModal: React.FC<{}> = () => {
 												height={15}
 												style={{ top: 30, left: -7 }}
 											/>
-											<Icon name='users' pack='custom' fill={color.white} width={60} height={60} />
+											<Icon name='users' pack='custom' fill={color.white} width={50} height={50} />
 										</View>
 										<TextNative
 											numberOfLines={1}