Setting base setup

front/components/UI/InteractiveBase.tsx

@@ -1,13 +1,8 @@
 import React, { useRef, useState } from 'react';
 import { Animated, StyleSheet, TouchableOpacity, ActivityIndicator, View, Image, StyleProp, ViewStyle } from 'react-native';
-import Ionicons from '@expo/vector-icons/Ionicons';
+// import Ionicons from '@expo/vector-icons/Ionicons';
-import { Text, useTheme } from 'native-base'
+// import { Text, useTheme } from 'native-base'
-import { BlurView } from 'expo-blur';
+// import { BlurView } from '@react-native-community/blur';
-
-import {
-  Fill,
-  BackdropBlur,
-} from "@shopify/react-native-skia";
 
 interface InteractiveBaseProps {
   children?: React.ReactNode;
@@ -200,7 +195,7 @@ const InteractiveBase: React.FC<InteractiveBaseProps> = ({ children, onPress, st
       style={[
         style,
         isDisabled ? styleAnimate.Disabled : {
-          backgroundColor: isOutlined ? 'transparent' : backgroundColorValue,
+          backgroundColor: isOutlined ? 'rgba(0,0,0,0.3)' : backgroundColorValue,
           borderColor: isOutlined ? backgroundColorValue :  'transparent',
           borderWidth: 2,
           transform: [{ scale: scaleValue }],
@@ -219,17 +214,19 @@ const InteractiveBase: React.FC<InteractiveBaseProps> = ({ children, onPress, st
           onMouseLeave={handleMouseLeave}
           style={styles.container}
         >
-          {/* <BlurView
-            // style={[styles.container, {width: isCollapsed ? 'fit-content': '100%'}]}
-            tint="dark"
-            intensity={100}
-          >
-            {children}
-          </BlurView> */}
           {children}
-          <BackdropBlur blur={4} clip={{ x: 0, y: 128, width: 256, height: 128 }}>
+          {/* <BlurView
-            <Fill color="rgba(0, 0, 0, 0.2)" />
+            style={{
-          </BackdropBlur>
+              width: '420px',
+              height: '50px',
+              borderRadius: 20,
+              borderWidth: 1,
+
+            }}
+            blurType="light"
+            blurAmount={20}
+            blurRadius={5}
+          /> */}
       </TouchableOpacity>
     </Animated.View>
   );

front/components/UI/SettingsBase.tsx

@@ -0,0 +1,98 @@
+import React, { useState } from 'react';
+import { StyleSheet, ActivityIndicator, View, Image } from 'react-native';
+import Ionicons from '@expo/vector-icons/Ionicons';
+import InteractiveBase from './InteractiveBase';
+import { Text, useTheme } from 'native-base';
+// import { BlurView } from 'expo-blur';
+
+interface SettingProps {
+  icon: string;
+  title: string;
+  description?: string;
+  onPress?: () => Promise<any>;
+  children?: React.ReactNode;
+}
+
+const SettingBase: React.FC<SettingProps> = ({ title, description, onPress, icon, children}) => {
+  const styleSetting = StyleSheet.create({
+    Default: {
+        scale: 1,
+        shadowOpacity: 0.30,
+        shadowRadius: 4.65,
+        elevation: 8,
+        backgroundColor: 'rgba(16, 16, 20, 0.50)',
+    },
+    onHover: {
+        scale: 1,
+        shadowOpacity: 0.30,
+        shadowRadius: 4.65,
+        elevation: 8,
+        backgroundColor: 'rgba(32, 32, 40, 0.50)',
+    },
+    onPressed: {
+        scale: 1,
+        shadowOpacity: 0.30,
+        shadowRadius: 4.65,
+        elevation: 8,
+        backgroundColor: 'rgba(16, 16, 20, 0.50)',
+    },
+    Disabled: {
+        scale: 1,
+        shadowOpacity: 0.30,
+        shadowRadius: 4.65,
+        elevation: 8,
+        backgroundColor: 'rgba(16, 16, 20, 0.50)',
+    }
+  });
+
+  return (
+    <InteractiveBase
+      style={[styles.container, {width: '100%'}]}
+      styleAnimate={styleSetting}
+      onPress={async () => {
+        if (onPress) {
+          await onPress();
+        }
+      }}
+    >
+        <View style={styles.content}>
+          <Ionicons name={icon} size={24} color="#fff"/>
+          <View style={styles.info}>
+            <Text style={styles.text}>{title}</Text>
+            <Text style={styles.description}>{description}</Text>
+          </View>
+          {children}
+        </View>
+    </InteractiveBase>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    borderRadius: 8,
+    backgroundColor: 'rgba(16, 16, 20, 0.50)',
+  },
+  content: {
+    paddingVertical: 10,
+    paddingHorizontal: 20,
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    alignSelf: 'stretch',
+    flexDirection: 'row',
+  },
+  info: {
+    flexDirection: 'column',
+    marginHorizontal: 16,
+    flex: 1,
+  },
+  text: {
+    color: '#fff',
+    fontSize: 16,
+  },
+  description: {
+    color: '#fff',
+    fontSize: 10,
+  },
+});
+
+export default SettingBase;

front/package.json

@@ -22,10 +22,10 @@
 		"@expo/vector-icons": "^13.0.0",
 		"@motiz88/react-native-midi": "^0.0.5",
 		"@react-native-async-storage/async-storage": "~1.17.3",
+		"@react-native-community/blur": "^4.3.2",
 		"@react-navigation/native": "^6.0.11",
 		"@react-navigation/native-stack": "^6.7.0",
 		"@reduxjs/toolkit": "^1.8.3",
-		"@shopify/react-native-skia": "^0.1.208",
 		"@tanstack/react-query": "^4.2.3",
 		"@types/jest": "^28.1.4",
 		"@types/react-dom": "~18.0.8",
@@ -34,7 +34,6 @@
 		"add": "^2.0.6",
 		"expo": "^47.0.8",
 		"expo-asset": "~8.7.0",
-		"expo-blur": "~12.0.1",
 		"expo-dev-client": "~2.0.1",
 		"expo-linear-gradient": "~12.0.1",
 		"expo-linking": "~3.3.1",

front/views/SigninView.tsx

@@ -18,6 +18,7 @@ import { Image, Flex } from 'native-base';
 import ImageBanner from '../assets/banner.jpg';
 import TMPBase from '../components/UI/TMPBase';
 import { LinearGradient } from 'expo-linear-gradient';
+import SettingBase from '../components/UI/SettingsBase';
 
 const hanldeSignin = async (
 	username: string,
@@ -87,6 +88,7 @@ const SigninView = () => {
                         icon='person'
                         title="Menu"
                     />
+                    <SettingBase icon='person' title='title' description='description'>coucou</SettingBase>
                     <SeparatorBase>or</SeparatorBase>
                     <TextFormField
                         error={formData.username.error}

front/yarn.lock

@@ -2884,6 +2884,11 @@
   dependencies:
     merge-options "^3.0.4"
 
+"@react-native-community/blur@^4.3.2":
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/@react-native-community/blur/-/blur-4.3.2.tgz#185a2c7dd03ba168cc95069bc4742e9505fd6c6c"
+  integrity sha512-0ID+pyZKdC4RdgC7HePxUQ6JmsbNrgz03u+6SgqYpmBoK/rE+7JffqIw7IEsfoKitLEcRNLGekIBsfwCqiEkew==
+
 "@react-native-community/cli-clean@^9.2.1":
   version "9.2.1"
   resolved "https://registry.yarnpkg.com/@react-native-community/cli-clean/-/cli-clean-9.2.1.tgz#198c5dd39c432efb5374582073065ff75d67d018"
@@ -3549,14 +3554,6 @@
     component-type "^1.2.1"
     join-component "^1.1.0"
 
-"@shopify/react-native-skia@^0.1.208":
-  version "0.1.208"
-  resolved "https://registry.yarnpkg.com/@shopify/react-native-skia/-/react-native-skia-0.1.208.tgz#f3badb065dc0ed4bbf34a6036c9aa3ded2bfd068"
-  integrity sha512-5Zi6gYlyGo10A1hz2u8RnVP/xzOuRHRAo/HdOY0ncMyKSyvaNtINNfM7zuthRKZT4R3zFF38dYphfC7mcFELtQ==
-  dependencies:
-    canvaskit-wasm "0.38.0"
-    react-reconciler "^0.27.0"
-
 "@sideway/address@^4.1.3":
   version "4.1.4"
   resolved "https://registry.yarnpkg.com/@sideway/address/-/address-4.1.4.tgz#03dccebc6ea47fdc226f7d3d1ad512955d4783f0"
@@ -6905,11 +6902,6 @@ caniuse-lite@^1.0.30001125:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001495.tgz#64a0ccef1911a9dcff647115b4430f8eff1ef2d9"
   integrity sha512-F6x5IEuigtUfU5ZMQK2jsy5JqUUlEFRVZq8bO2a+ysq5K7jD6PPc9YXZj78xDNS3uNchesp1Jw47YXEqr+Viyg==
 
-canvaskit-wasm@0.38.0:
-  version "0.38.0"
-  resolved "https://registry.yarnpkg.com/canvaskit-wasm/-/canvaskit-wasm-0.38.0.tgz#83e6c46f3015c2ff3f6503157f47453af76a7be7"
-  integrity sha512-ZEG6lucpbQ4Ld+mY8C1Ng+PMLVP+/AX02jS0Sdl28NyMxuKSa9uKB8oGd1BYp1XWPyO2Jgr7U8pdyjJ/F3xR5Q==
-
 capture-exit@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/capture-exit/-/capture-exit-2.0.0.tgz#fb953bfaebeb781f62898239dabb426d08a509a4"
@@ -9069,11 +9061,6 @@ expo-asset@~8.7.0:
     path-browserify "^1.0.0"
     url-parse "^1.5.9"
 
-expo-blur@~12.0.1:
-  version "12.0.1"
-  resolved "https://registry.yarnpkg.com/expo-blur/-/expo-blur-12.0.1.tgz#7aa4186620359acfa976dda84360070b634ffe3d"
-  integrity sha512-7oF/xRIFJukM4/qL6ejZ4Z/4YcVExvBPsBrz7rGYz6PtgAkWwYFR62+ExZOzTEG4hgoPPmlnt1ncimsk/MYUgQ==
-
 expo-constants@~14.0.0, expo-constants@~14.0.2:
   version "14.0.2"
   resolved "https://registry.yarnpkg.com/expo-constants/-/expo-constants-14.0.2.tgz#2cb1dec8f41a64c2fc5b4eecaf77d7661cad01cc"
@@ -15934,14 +15921,6 @@ react-query@*:
     broadcast-channel "^3.4.1"
     match-sorter "^6.0.2"
 
-react-reconciler@^0.27.0:
-  version "0.27.0"
-  resolved "https://registry.yarnpkg.com/react-reconciler/-/react-reconciler-0.27.0.tgz#360124fdf2d76447c7491ee5f0e04503ed9acf5b"
-  integrity sha512-HmMDKciQjYmBRGuuhIaKA1ba/7a+UsM5FzOZsMO2JYHt9Jh8reCb7j1eDC95NOyUlKM9KRyvdx0flBuDvYSBoA==
-  dependencies:
-    loose-envify "^1.1.0"
-    scheduler "^0.21.0"
-
 react-redux@^8.0.2:
   version "8.0.5"
   resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-8.0.5.tgz#e5fb8331993a019b8aaf2e167a93d10af469c7bd"
@@ -16643,13 +16622,6 @@ scheduler@^0.20.2:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
-scheduler@^0.21.0:
-  version "0.21.0"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.21.0.tgz#6fd2532ff5a6d877b6edb12f00d8ab7e8f308820"
-  integrity sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ==
-  dependencies:
-    loose-envify "^1.1.0"
-
 scheduler@^0.22.0:
   version "0.22.0"
   resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.22.0.tgz#83a5d63594edf074add9a7198b1bae76c3db01b8"