auction create screen finalised layout

Navigations/AuctionBottomTab.js

@@ -5,7 +5,7 @@ import {
   Text,
   TouchableOpacity,
 } from "react-native";
-import { MaterialIcons, Ionicons } from "@expo/vector-icons";
+import { MaterialIcons } from "@expo/vector-icons";
 import { useNavigation } from '@react-navigation/native';
 import themeColors from "../assets/colors";
 
@@ -48,8 +48,8 @@ const styles = StyleSheet.create({
     justifyContent:"space-between",
     paddingHorizontal: 30,
     backgroundColor:themeColors.BLACK,
-    borderTopRightRadius: 20,
-    borderTopLeftRadius: 20,
+    borderTopRightRadius: 30,
+    borderTopLeftRadius: 30,
     alignItems:"center"
   },
   barButtonView:{

Navigations/AuthStack.js

@@ -16,6 +16,7 @@ import UserBidScreen from "../screen/User.Bids.Screen";
 import AuctionListScreen from "../screen/Auctions.List.Screen";
 import AuctionDetailScreen from "../screen/Auction.Detail.Screen";
 import UserAuctionCreateScreen from "../screen/User.Auction.Create.Screen";
+import AuctionCameraScreen from "../screen/Auction.Camera.Screen";
 
 const Stack = createStackNavigator();
 
@@ -244,6 +245,15 @@ export function AuthStack({ navigation }) {
           title: "Auctions List",
           headerTitleAlign: "center"
         }}
+      />
+       <Stack.Screen
+        name="AuctionCameraScreen"
+        component={AuctionCameraScreen}
+        options={{
+          headerShown: false,
+          title: "Auctions List",
+          headerTitleAlign: "center"
+        }}
       />
       <Stack.Screen
         name="AboutUs"

components/camera.component.js

+import React, { useState, useRef, useEffect } from 'react';
+import {
+  StyleSheet,
+  Dimensions,
+  View,
+  Text,
+  TouchableOpacity,
+} from 'react-native';
+import { Camera } from 'expo-camera';
+import { AntDesign, MaterialIcons } from '@expo/vector-icons';
+import themeColors from '../assets/colors';
+
+const WINDOW_HEIGHT = Dimensions.get('window').height;
+const CAPTURE_SIZE = Math.floor(WINDOW_HEIGHT * 0.08);
+
+export const AppCamera = (props) => {
+  const cameraRef = useRef();
+  const [hasPermission, setHasPermission] = useState(null);
+  const [cameraType, setCameraType] = useState(Camera.Constants.Type.back);
+  const [isPreview, setIsPreview] = useState(false);
+  const [isCameraReady, setIsCameraReady] = useState(false);
+
+  useEffect(() => {
+    onHandlePermission();
+  }, []);
+
+  const onHandlePermission = async () => {
+    const { status } = await Camera.requestPermissionsAsync();
+    setHasPermission(status === 'granted');
+  };
+
+  const onCameraReady = () => {
+    setIsCameraReady(true);
+  };
+
+  const switchCamera = () => {
+    if (isPreview) {
+      return;
+    }
+    setCameraType(prevCameraType =>
+      prevCameraType === Camera.Constants.Type.back
+        ? Camera.Constants.Type.front
+        : Camera.Constants.Type.back
+    );
+  };
+
+  const onSnap = async () => {
+    if (cameraRef.current) {
+      const options = { quality: 0.7, base64: true };
+      const data = await cameraRef.current.takePictureAsync(options);
+      const source = data.base64;
+
+      if (source) {
+        await cameraRef.current.pausePreview();
+        setIsPreview(true);
+
+        let base64Img = `data:image/jpg;base64,${source}`;
+        let apiUrl =
+          'https://api.cloudinary.com/v1_1/dx8zdylt0/image/upload';
+        let data = {
+          file: base64Img,
+          upload_preset: 'agripreneurs'
+        };
+
+        fetch(apiUrl, {
+          body: JSON.stringify(data),
+          headers: {
+            'content-type': 'application/json'
+          },
+          method: 'POST'
+        })
+          .then(async response => {
+            let data = await response.json();
+            if (data.secure_url) {
+              const imageLink = data.secure_url;
+              props.onAddImage(imageLink);
+            }
+          })
+          .catch(err => {
+            alert('Cannot upload');
+            console.log(err);
+          });
+      }
+    }
+  };
+
+  const cancelPreview = async () => {
+    await cameraRef.current.resumePreview();
+    setIsPreview(false);
+  };
+
+  if (hasPermission === null) {
+    return <View />;
+  }
+  if (hasPermission === false) {
+    return <Text style={styles.text}>No access to camera</Text>;
+  }
+
+  return (
+    <View style={styles.container}>
+      <Camera
+        ref={cameraRef}
+        style={styles.container}
+        type={cameraType}
+        onCameraReady={onCameraReady}
+        useCamera2Api={true}
+      />
+      <View style={styles.container}>
+        {isPreview && (
+          <TouchableOpacity
+            onPress={cancelPreview}
+            style={styles.closeButton}
+            activeOpacity={0.7}
+          >
+            <AntDesign name='close' size={32} color={themeColors.BLACK}/>
+          </TouchableOpacity>
+        )}
+        {!isPreview && (
+          <View style={styles.bottomButtonsContainer}>
+            <TouchableOpacity disabled={!isCameraReady} onPress={switchCamera}>
+              <MaterialIcons name='flip-camera-ios' size={28} color='white' />
+            </TouchableOpacity>
+            <TouchableOpacity
+              activeOpacity={0.7}
+              disabled={!isCameraReady}
+              onPress={onSnap}
+              style={styles.capture}
+            />
+          </View>
+        )}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    ...StyleSheet.absoluteFillObject
+  },
+  text: {
+    color: themeColors.BLACK
+  },
+  bottomButtonsContainer: {
+    position: 'absolute',
+    flexDirection: 'row',
+    bottom: 28,
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  closeButton: {
+    position: 'absolute',
+    top: 35,
+    right: 20,
+    height: 50,
+    width: 50,
+    borderRadius: 25,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: themeColors.WHITE,
+    opacity: 0.7
+  },
+  capture: {
+    backgroundColor: themeColors.WHITE,
+    borderRadius: 5,
+    height: CAPTURE_SIZE,
+    width: CAPTURE_SIZE,
+    borderRadius: Math.floor(CAPTURE_SIZE / 2),
+    marginBottom: 28,
+    marginHorizontal: 30
+  }
+});

components/datpicker.component.js

@@ -42,8 +42,6 @@ export const AppDatePicker = () => {
 
 const styles = StyleSheet.create({
   datepicker:{
-    flex: 1,
-    justifyContent: 'center',
-    marginVertical: 20
+    width: 120,
   }
 });

components/text_input.component.js

@@ -12,6 +12,7 @@ const styles = StyleSheet.create({
   input:{
     alignItems: "center",
     padding: 10,
+    marginBottom: 20,
     fontSize: 16,
     borderBottomColor: themeColors.SECONDARY_COLOR,
     borderBottomWidth: 1,

package.json

@@ -17,6 +17,7 @@
     "@react-navigation/stack": "^5.14.5",
     "axios": "^0.21.4",
     "expo": "~41.0.1",
+    "expo-camera": "^11.2.2",
     "expo-image-picker": "^10.2.3",
     "expo-secure-store": "^10.2.0",
     "expo-splash-screen": "^0.10.2",

screen/Auction.Camera.Screen.js

+import React from 'react';
+import { AppCamera } from '../components/camera.component';
+
+const  AuctionCameraScreen =  ({navigation}) => {
+  const handleAddImage = (image) => {
+    navigation.navigate('AuctionCreateScreen', {
+      image: image
+    })
+  }
+  return (
+    <AppCamera onAddImage={(image) => handleAddImage(image)}/>
+  );
+};
+export default AuctionCameraScreen;

screen/User.Auction.Create.Screen.js

-import React from 'react';
-import {View, StyleSheet, Text, ScrollView} from 'react-native';
+import React, { useEffect, useState } from 'react';
+import {View, StyleSheet, Text, ScrollView, Image, TouchableOpacity} from 'react-native';
 import { AppContainer } from '../container/container';
 import themeColors from '../assets/colors';
 import { AuctionBottomTab } from '../Navigations/AuctionBottomTab';
 import { AppTextInput } from '../components/text_input.component';
 import { AppButton } from '../components/button.component';
 import { AppDatePicker } from '../components/datpicker.component';
+import { MaterialIcons } from "@expo/vector-icons";
+
+const  UserAuctionCreateScreen =  ({route, navigation}) => {
+  const [image, setImage] = useState('https://via.placeholder.com/50');
+
+  useEffect(() => {
+    if (route.params === undefined) {
+      setImage('https://via.placeholder.com/50')
+    } else {
+      setImage(route.params.image)
+    }
+  }, [])
 
-const  UserAuctionCreateScreen =  (props, {navigation}) => {
   return (
     <View style={styles.container}>
       <AppContainer>
@@ -17,9 +28,25 @@ const  UserAuctionCreateScreen =  (props, {navigation}) => {
         <ScrollView>
           <View>
             <AppTextInput placeholder='Enter item name'/>
-            <AppTextInput/>
+            <AppTextInput placeholder='Enter item price' keyboardType='numeric'/>
+            <View style={styles.dateContainer}>
+              <Text style={styles.label}>Expire Date</Text>
              <AppDatePicker/>
-            <AppButton/>
+            </View>
+            <Text style={styles.imgLabel}>Item Image</Text>
+            <View style={styles.addImagewrapper}>
+              <View style={styles.imageContainer}>
+                <Image source={{
+                  uri: image,
+                }} style={styles.images}/>
+              </View>
+              <View style={styles.addImageBtnContainer}>
+                <TouchableOpacity style={styles.addImageBtn} onPress={() => {navigation.navigate('AuctionCameraScreen')}}>
+                  <MaterialIcons name="add-a-photo" size={24} color={themeColors.WHITE} />
+                </TouchableOpacity>
+              </View>
+            </View>
+            <AppButton label='Add Item'/>
           </View>
       </ScrollView>
       </AppContainer>
@@ -32,7 +59,7 @@ export default UserAuctionCreateScreen;
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    paddingTop: 50,
+    paddingTop: 30,
     backgroundColor: '#ffffff'
   },
   header: {
@@ -45,6 +72,26 @@ const styles = StyleSheet.create({
     fontWeight: 'bold',
     color: themeColors.BLACK,
   },
+  label: {
+    flex: 1,
+    fontSize: 16,
+    fontWeight: '500',
+    color: themeColors.BLACK,
+    alignSelf: 'center'
+  },
+  imgLabel: {
+    flex: 1,
+    fontSize: 16,
+    fontWeight: '500',
+    marginBottom: 10,
+    color: themeColors.BLACK,
+  },
+  dateContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    marginTop: 20,
+    marginBottom: 40
+  },
   addBtn:{
     alignItems: "center",
     padding: 8,
@@ -57,4 +104,34 @@ const styles = StyleSheet.create({
     elevation: 2,
     height: 33
   },
+  addImagewrapper : {
+    height: 100,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginBottom: 20
+  },
+  images: {
+    width: 100,
+    height: 100,
+    borderRadius: 10,
+    resizeMode: 'contain'
+  },
+  imageContainer: {
+    height: 50,
+    marginRight: 50,
+    borderRadius: 50,
+  },
+  addImageBtnContainer: {
+    width: 50,
+    height: 50,
+    borderRadius: 50
+  },
+  addImageBtn: {
+    width: 50,
+    height: 50,
+    borderRadius: 50,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: themeColors.BLACK
+  },
 })
\ No newline at end of file