HERE’S THE SOLUTION 2024
Guys i faced the same issue and solved it but i forgot what i did. The bugs are related to deprecated packages or a tiny detail in this course. That tiny detail is usually the ‘flex’ style.
Check out the animation container inside the uploadScreen.js
animation: {
width: 150,
flex: 1, //!!necessary!!
},
Here’s my whole code about it:
listings.js file:
Click to inspect the code
import client from "./client";
const listingsEndpoint = "/listings";
const getListings = () => client.get(listingsEndpoint);
const postListings = (listing, onUploadProgress) => {
const data = new FormData();
data.append("title", listing.title);
data.append("price", listing.price);
data.append("categoryId", listing.category.value);
data.append("description", listing.description);
listing.images.forEach((image, index) =>
data.append("images", {
name: "image" + index,
type: "image/jpeg",
uri: image,
})
);
if (listing.location)
data.append("location", JSON.stringify(listing.location));
console.log("Posted Data:", data);
return client.post(listingsEndpoint, data, {
headers: {
"Content-Type": "multipart/form-data",
},
onUploadProgress: (progress) => {
if (onUploadProgress) {
onUploadProgress(progress.loaded / progress.total);
}
},
});
};
export default {
getListings,
postListings,
};
ListingEditScreen.js file:
Click to inspect the code
import { StyleSheet } from "react-native";
import { React, useState } from "react";
import * as Yup from "yup";
import Screen from "../components/Screen";
import {
AppForm,
AppFormField,
AppFormPicker,
SubmitButton,
} from "../components/forms";
import CategoryPickerItem from "../components/CategoryPickerItem";
import FormImagePicker from "../components/forms/FormImagePicker";
import useLocation from "../hooks/useLocation";
import listingsApi from "../api/listings";
import UploadScreen from "./UploadScreen";
const validationSchema = Yup.object().shape({
title: Yup.string().required().min(1).label("Title"),
price: Yup.number().required().min(1).max(10000).label("Price"),
description: Yup.string().label("Description"),
category: Yup.object().required().nullable().label("Category"),
images: Yup.array().min(1, "Please select at least one image."),
});
const categories = [
{
label: "Furniture",
value: 1,
icon: "floor-lamp",
backgroundColor: "#fc5c65",
},
{ label: "Cars", value: 2, icon: "car", backgroundColor: "#fd9644" },
{ label: "Cameras", value: 3, icon: "camera", backgroundColor: "#fed330" },
{ label: "Games", value: 4, icon: "cards", backgroundColor: "#26de81" },
{
label: "Clothing",
value: 5,
icon: "shoe-heel",
backgroundColor: "#2bcbba",
},
{ label: "Sports", value: 6, icon: "basketball", backgroundColor: "#45aaf2" },
{
label: "Movies & Music",
value: 7,
icon: "headphones",
backgroundColor: "#4b7bec",
},
{
label: "Books",
value: 8,
icon: "book-open-blank-variant",
backgroundColor: "#884ab4",
},
{
label: "Other",
value: 9,
icon: "page-layout-header",
backgroundColor: "#5e6f81",
},
];
export default function ListingEditScreen() {
const location = useLocation();
//TODO: DONE check out the source control for bugs!
const [uploadProgress, setUploadProgress] = useState(0);
const [uploadVisible, setUploadVisible] = useState(false);
const handleSubmit = async (listing, { resetForm }) => {
setUploadProgress(0);
setUploadVisible(true);
const result = await listingsApi.postListings(
{ ...listing, location }, //FIXME: FIXED include the location data later
(uploadProgress) => setUploadProgress(uploadProgress)
);
if (!result.ok) {
setUploadVisible(false);
return alert("Couldn't save the listing"); //FIXME: STILL causing error while uploading too many images.
}
resetForm();
};
return (
<Screen style={styles.container}>
<UploadScreen //FIXME: FIXED(with flex:1) done.json not shown on screen fully
onDone={() => {
setUploadVisible(false);
}}
visible={uploadVisible}
progress={uploadProgress}
/>
<AppForm
initialValues={{
title: "",
price: "", //It must be string
description: "",
category: null,
images: [],
}}
onSubmit={handleSubmit}
validationSchema={validationSchema}
>
<FormImagePicker
name="images"
//FIXME: FIXED image not shown on screen and can't delete!
/>
<AppFormField
maxLength={255}
name="title"
placeholder="Title"
//FIXME: FIXED Not reseting
/>
<AppFormField
containerWidth="30%"
keyboardType="numeric"
maxLength={8} //TODO: max 9999.99 increase the value later
name="price"
placeholder="Price"
//FIXME: FIXED Not reseting
/>
<AppFormPicker
numColumns={3}
containerWidth="55%"
items={categories}
name="category"
PickerItemComponent={CategoryPickerItem}
placeholder="Category"
/>
<AppFormField
maxLength={255}
multiline
name="description"
numberOfLines={2}
placeholder="Description"
//FIXME: FIXED Not reseting
/>
<SubmitButton title="Post" />
</AppForm>
</Screen>
);
}
const styles = StyleSheet.create({
container: {
padding: 10,
},
});
UploadScreen.js file:
Click to inspect the code
import { View, StyleSheet, Modal } from "react-native";
import React from "react";
import * as Progress from "react-native-progress";
import LottieView from "lottie-react-native";
import colors from "../config/colors";
export default function UploadScreen({
onDone,
progress = 0,
visible = false,
}) {
return (
<Modal visible={visible}>
<View style={styles.container}>
{progress < 1 ? (
<Progress.Bar
color={colors.primary}
progress={progress}
width={200}
/>
) : (
<LottieView
autoPlay
loop={false}
onAnimationFinish={onDone}
source={require("../assets/animations/done.json")}
style={styles.animation}
/>
)}
</View>
</Modal>
);
}
const styles = StyleSheet.create({
animation: {
width: 150,
flex: 1, //!!necessary!!
},
container: {
alignItems: "center",
flex: 1,
justifyContent: "center",
},
});
Reply for questions.