feat(components): add settings item and setting

app/components/Settings/Settings.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import SettingsItem from '@oxvo-mobile/components/SettingsItem/SettingsItem';
+
+import { Ionicons } from '@expo/vector-icons';
+
+const settings = [
+  {
+    icon: <Ionicons name="md-eye-outline" size={20} color="black" />,
+    text: 'can see',
+    color: 'black',
+  },
+  {
+    icon: <Ionicons name="md-eye-outline" size={20} color="black" />,
+    text: 'can see',
+    color: 'black',
+  },
+  {
+    icon: <Ionicons name="md-eye-outline" size={20} color="black" />,
+    text: 'can see',
+    color: 'black',
+  },
+];
+const Settings = () => (
+  console.log(settings.length - 1),
+  (
+    <View style={{ flex: 1 }}>
+      <Text style={styles.subTitle}>Account</Text>
+
+      {settings.map((item, index) => {
+        console.log(index);
+        return (
+          <SettingsItem
+            Icon={item.icon}
+            text={item.text}
+            key={index}
+            color={item.color}
+            idx={index + 1 !== settings.length ? index + 1 : null}
+          />
+        );
+      })}
+    </View>
+  )
+);
+
+export default Settings;
+const styles = StyleSheet.create({
+  subTitle: {
+    fontSize: 12,
+    color: '#cccccc',
+    fontWeight: '400',
+    textTransform: 'uppercase',
+    marginBottom: 8,
+  },
+});

app/components/SettingsItem/SettingsItem.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import { AntDesign } from '@expo/vector-icons';
+
+import { SettingsItemProps } from './types';
+
+const SettingsItem = ({
+  Icon,
+  text,
+  color = 'blue',
+  idx,
+  alignIcon = 'left',
+}: SettingsItemProps) => {
+  return alignIcon === 'left' ? (
+    <View style={styles.container}>
+      <View style={styles.iconContainer}>{Icon && React.cloneElement(Icon, { color: color })}</View>
+
+      <View style={[styles.textContainer, idx ? styles.divider : null]}>
+        <Text style={[styles.textStyle, { color: color }]}>{text}</Text>
+        <AntDesign name="right" size={12} color="#A2B5BB" style={{ alignSelf: 'center' }} />
+      </View>
+    </View>
+  ) : (
+    <View style={styles.container}>
+      <View style={[styles.textContainer, idx ? styles.divider : null]}>
+        <AntDesign name="left" size={12} color="#A2B5BB" style={{ alignSelf: 'center' }} />
+        <Text style={[styles.textStyle, { color: color }]}>{text}</Text>
+      </View>
+      <View style={styles.iconContainer}>{Icon && React.cloneElement(Icon, { color: color })}</View>
+    </View>
+  );
+};
+
+export default SettingsItem;
+const styles = StyleSheet.create({
+  container: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignContent: 'center',
+    justifyContent: 'center',
+    width: '100%',
+    marginBottom: 8,
+  },
+  iconContainer: {
+    width: '10%',
+    alignSelf: 'center',
+  },
+  textContainer: {
+    width: '90%',
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  divider: {
+    paddingBottom: 8,
+    borderBottomColor: '#d5d5d5',
+    borderBottomWidth: 1,
+  },
+  textStyle: {
+    fontSize: 16,
+    fontWeight: '500',
+  },
+});

app/components/SettingsItem/types.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+
+type IconProps = {
+  name: string;
+  size: number;
+  color: string;
+};
+
+type SettingsItemProps = {
+  Icon?: React.ReactElement<IconProps>;
+  text: string;
+  idx: number;
+  color: string;
+  alignIcon: string;
+};
+export { SettingsItemProps };

app/screens/PublicScreens/Auth/SignIn/SignIn.tsx

@@ -5,6 +5,7 @@ import { Button, Checkbox, Text, TextField, View } from 'react-native-ui-lib';
 import { PASSWORD_SETTINGS } from '@oxvo-mobile/domains/Auth/constants/auth';
 import useSignIn from '@oxvo-mobile/domains/Auth/queries/useSignIn';
 
+import { Ionicons } from '@expo/vector-icons';
 import { zodResolver } from '@hookform/resolvers/zod';
 import * as z from 'zod';
 
@@ -18,8 +19,13 @@ const formSchema = z.object({
 
 type FormData = z.infer<typeof formSchema>;
 
+function Test() {
+  return <Text>SignIn</Text>;
+}
+
 const SignInScreen = () => {
   const [rememberMe, setRememberMe] = useState(false);
+  const [showPassword, setShowPassword] = useState(false);
   const {
     control,
     handleSubmit,
@@ -39,6 +45,9 @@ const SignInScreen = () => {
   const handleRememberMe = () => {
     setRememberMe(!rememberMe);
   };
+  const handleViewPassword = () => {
+    setShowPassword(!showPassword);
+  };
 
   return (
     <View flex paddingH-30 paddingV-50 bg-white>
@@ -79,10 +88,28 @@ const SignInScreen = () => {
               textContentType="password"
               autoCapitalize="none"
               floatingPlaceholder
+              marginB-20
+              trailingAccessory={
+                showPassword ? (
+                  <Ionicons
+                    name="eye-off-outline"
+                    size={24}
+                    color="black"
+                    onPress={handleViewPassword}
+                  />
+                ) : (
+                  <Ionicons
+                    name="md-eye-outline"
+                    size={24}
+                    color="black"
+                    onPress={handleViewPassword}
+                  />
+                )
+              }
               placeholder="Password"
               value={field.value}
               onChangeText={field.onChange}
-              secureTextEntry
+              secureTextEntry={showPassword}
               validationMessage={errors.password?.message}
               enableErrors
               containerStyle={{ marginBottom: 15 }}