Add files via upload

Author: Programmer-RD-AI

app/assets/adaptive-icon.png

@@ -0,0 +1,16 @@
+import { Formik } from "formik";
+import React from "react";
+
+function AppForm({ initValues, onSubmit, validationSchema, children }) {
+  return (
+    <Formik
+      initialValues={initValues}
+      onSubmit={onSubmit}
+      validationSchema={validationSchema}
+    >
+      {() => <>{children}</>}
+    </Formik>
+  );
+}
+
+export default AppForm;

app/assets/favicon.png

@@ -0,0 +1,19 @@
+import React from "react";
+import AppTextInput from "./AppTextInput";
+import ErrorMessage from "./ErrorMessage";
+import { useFormikContext } from "formik";
+function AppFormField({ name, ...otherProps }) {
+  const {setFieldTouched,handleChange,errors,touched} = useFormikContext();
+  return (
+    <>
+      <AppTextInput
+        {...otherProps}
+        onBlur={() => setFieldTouched(name)}
+        onChangeText={handleChange(name)}
+      />
+      <ErrorMessage error={errors[name]} visible={touched[name]} />
+    </>
+  );
+}
+
+export default AppFormField;

app/components/AppForm.js

@@ -29,9 +29,12 @@ function AppPicker({ icon, items, onSelectItem, placeholder, selectedItem }) {
               style={styles.icon}
             />
           )}
-          <AppText style={styles.text}>
-            {selectedItem ? selectedItem.label : placeholder}
-          </AppText>
+          {selectedItem ? (
+            <AppText style={styles.text}>{selectedItem.label}</AppText>
+          ) : (
+            <AppText style={styles.placeholder}>{placeholder}</AppText>
+          )}
+
           <MaterialCommunityIcons
             name="chevron-down"
             size={20}
@@ -73,6 +76,10 @@ const styles = StyleSheet.create({
   icon: {
     marginRight: 10,
   },
+  placeholder: {
+    color: defaultStyles.colors.medium,
+    flex: 1,
+  },
   text: {
     flex: 1,
   },

app/components/AppFormField.js

@@ -15,7 +15,11 @@ function AppTextInput({ icon, ...otherProps }) {
           style={styles.icon}
         />
       )}
-      <TextInput style={defaultStyles.text} {...otherProps} />
+      <TextInput
+        placeholderTextColor={defaultStyles.colors.medium}
+        style={defaultStyles.text}
+        {...otherProps}
+      />
     </View>
   );
 }

app/components/AppPicker.js

@@ -0,0 +1,35 @@
+import React from "react";
+import { StyleSheet, Text, TouchableOpacity } from "react-native";
+
+import colors from "../config/colors";
+
+function AppButton({ title, onPress, color = "primary" }) {
+  return (
+    <TouchableOpacity
+      style={[styles.button, { backgroundColor: colors[color] }]}
+      onPress={onPress}
+    >
+      <Text style={styles.text}>{title}</Text>
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  button: {
+    backgroundColor: colors.primary,
+    borderRadius: 25,
+    justifyContent: "center",
+    alignItems: "center",
+    padding: 15,
+    width: "100%",
+    marginVertical: 10,
+  },
+  text: {
+    color: colors.white,
+    fontSize: 18,
+    textTransform: "uppercase",
+    fontWeight: "bold",
+  },
+});
+
+export default AppButton;

app/components/AppTextInput.js

@@ -1,16 +1,20 @@
 import React from "react";
 import { View, StyleSheet, Image } from "react-native";
 
-import AppText from "./AppText";
+import Text from "./Text";
 import colors from "../config/colors";
 
 function Card({ title, subTitle, image }) {
   return (
     <View style={styles.card}>
       <Image style={styles.image} source={image} />
       <View style={styles.detailsContainer}>
-        <AppText style={styles.title}>{title}</AppText>
-        <AppText style={styles.subTitle}>{subTitle}</AppText>
+        <Text style={styles.title} numberOfLines={1}>
+          {title}
+        </Text>
+        <Text style={styles.subTitle} numberOfLines={2}>
+          {subTitle}
+        </Text>
       </View>
     </View>
   );

app/components/Button.js

@@ -0,0 +1,35 @@
+import React from "react";
+import { View, StyleSheet, TouchableOpacity } from "react-native";
+
+import Icon from "./Icon";
+import Text from "./Text";
+
+function CategoryPickerItem({ item, onPress }) {
+  return (
+    <View style={styles.container}>
+      <TouchableOpacity onPress={onPress}>
+        <Icon
+          backgroundColor={item.backgroundColor}
+          name={item.icon}
+          size={80}
+        />
+      </TouchableOpacity>
+      <Text style={styles.label}>{item.label}</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: 30,
+    paddingVertical: 15,
+    alignItems: "center",
+    width: "33%",
+  },
+  label: {
+    marginTop: 5,
+    textAlign: "center",
+  },
+});
+
+export default CategoryPickerItem;

app/components/Card.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import {StyleSheet} from 'react-native'
+import AppText from './AppText';
+function ErrorMessage({error,visible}) {
+    console.log(error,visible);
+    if (!error || !visible) {
+        return null
+    }
+    return (
+      <AppText style={styles.error}>{error}</AppText> 
+    );
+}
+const styles = StyleSheet.create({
+    error : {color:'red'}
+})
+export default ErrorMessage;