searchBar

App.js

@@ -1,20 +1,17 @@
+import React, { useState } from 'react';
+import { SafeAreaView, Text, FlatList, StyleSheet, View } from 'react-native';
+import SearchBar from './src/components/SearchBar';
+import ClientItem from './src/components/ClientItem';
+import { MenuProvider } from 'react-native-popup-menu';
 import { StatusBar } from 'expo-status-bar';
-import { StyleSheet, Text, View } from 'react-native';
+import { DATA, theme } from './constants'
+import ClientSearchScreen from './src/screens/ClientSearchScreen';
 
-export default function App() {
+const App = () => {
   return (
-    <View style={styles.container}>
-      <Text>Open up App.js to start working on your app!</Text>
-      <StatusBar style="auto" />
-    </View>
+    <MenuProvider>
+    <ClientSearchScreen />
+    </MenuProvider>
   );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});
+};
+export default App;

constants.js

@@ -0,0 +1,74 @@
+export const DATA = [
+  {
+    id: 1,
+    icon: "person-circle",
+    name: "Samuel Herbas",
+    code: "11020102001002",
+    balance: "12523 Bs.",
+    pendingNotes: "3",
+    lastPayment: "15/03/22",
+  },
+  {
+    id: 2,
+    icon: "person-circle",
+    name: "Mariana Costa",
+    code: "11020102001003",
+    balance: "9500 Bs.",
+    pendingNotes: "2",
+    lastPayment: "20/03/22",
+  },
+  {
+    id: 3,
+    icon: "person-circle",
+    name: "Carlos Perez",
+    code: "11020102001004",
+    balance: "7800 Bs.",
+    pendingNotes: "4",
+    lastPayment: "18/03/22",
+  },
+  {
+    id: 4,
+    icon: "person-circle",
+    name: "Luisa Méndez",
+    code: "11020102001005",
+    balance: "8600 Bs.",
+    pendingNotes: "1",
+    lastPayment: "22/03/22",
+  },
+  {
+    id: 5,
+    icon: "person-circle",
+    name: "Jorge Salas",
+    code: "11020102001006",
+    balance: "4670 Bs.",
+    pendingNotes: "5",
+    lastPayment: "10/03/22",
+  },
+];
+export const theme = {
+  colors: {
+    primaryText: "#161819",
+    secondaryText: "#787878",
+    primary: "#fffefd",
+    secondary: "#bbe6ec",
+    tertiary: "#152432",
+    red: "#b83232",
+    green: "#5cce87",
+    black: "#161819",
+    skyBlue: "#a8dae1",
+    otherWhite: "#e8e8e8",
+    slateGrey: "#787878",
+  },
+  fontSizes: {
+    body: 20,
+    subheading: 26,
+    heading: 40,
+  },
+  fonts: {
+    main: "Montserrat",
+  },
+  fontWeights: {
+    normal: "400",
+    bold: "700",
+  },
+};

package.json

@@ -17,7 +17,8 @@
     "expo-dev-client": "~3.3.9",
     "expo-status-bar": "~1.11.1",
     "react": "18.2.0",
-    "react-native": "0.73.4"
+    "react-native": "0.73.4",
+    "react-native-popup-menu": "^0.16.1"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0"

src/components/ClientItem.js

@@ -0,0 +1,115 @@
+import React from 'react';
+import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
+import { Dimensions } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import { MaterialCommunityIcons } from '@expo/vector-icons';
+import { FontAwesome5 } from '@expo/vector-icons';
+const windowWidth = Dimensions.get('window').width;
+import { theme } from '../../constants'
+
+const ClientItem = ({ client, onSelect }) => {
+  return (
+    <TouchableOpacity onPress={() => onSelect(client.id)} style={styles.item}>
+      <View style={styles.iconContainer}>
+        <View style={styles.iconWraped}>
+            <Text style={styles.icon}>{client.name.charAt(0)}</Text>
+        </View>
+        <View style={styles.detailsContainer}>
+          <Text style={styles.name}>{client.name}</Text>
+          <View style={styles.codeContainer}>
+            <MaterialCommunityIcons name="account" size={19} color="black" />
+            <Text style={styles.code}>{client.code}</Text>
+          </View>
+          <View style={styles.codeContainer}>
+            <FontAwesome5 name="money-bill" size={13} color="black" />
+            <Text style={styles.balance}>{client.balance}</Text>
+          </View>
+        </View>
+      </View>
+      <View style={styles.lineContainer}>
+        <View style={styles.line}></View>
+      </View>
+      <View style={styles.notesContainer}>
+        <Text style={styles.notes}>Notas pendientes: {client.pendingNotes}</Text>
+        <Text style={styles.lastPayment}>Ultimo pago: {client.lastPayment}</Text>
+      </View>
+
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  item: { 
+    paddingVertical: 13,
+    paddingHorizontal: 17,
+    backgroundColor: theme.colors.primary,
+    borderRadius: 10,
+    marginHorizontal: 20,
+    marginVertical: 10,
+    borderRadius: 20,
+    borderWidth: 2,
+    borderColor: theme.colors.otherWhite,
+  },
+  iconContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  iconWraped: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: theme.colors.tertiary,
+    borderRadius: 20,
+    width: 70,
+    height: 70,
+  },
+  icon: {
+    color: theme.colors.primary,
+    fontSize: 30,
+    fontWeight: 'medium',
+  },
+  detailsContainer: {
+    marginLeft: 17,
+  },
+  name: {
+    fontWeight: 'bold',
+    fontSize: 16,
+    color: theme.colors.tertiary
+  },
+  codeContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  code: {
+    fontSize: 16,
+    marginLeft: 5,
+    color: theme.colors.secondaryText,
+  },
+  balance: {
+    fontSize: 16,
+    marginLeft: 8,
+    color: theme.colors.secondaryText,
+  },
+  notesContainer: {
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+  },
+  notes: {
+    fontSize: 16,
+    color: theme.colors.secondaryText,
+  },
+  lastPayment: {
+    fontSize: 16,
+    color: theme.colors.secondaryText,
+  },
+  lineContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  line: {
+    marginVertical: 13 ,
+    backgroundColor: theme.colors.otherWhite,
+    width: windowWidth*0.8,
+    height: 2,
+  },
+});
+export default ClientItem;