React Native - Advanced Concepts

Hello,
I am following this course and noticed that most parts of the code are deprecated.
While in the Fundamentals code it was easily fixabled, I see that in the advanced like I just started and in the Native Features chapter I see lots of changes. ( for es launchImageLibraryAsync for ex has the return statement completely changed ( like an obj with assets and canceled ) IDK, I guess I’ll find more changes like this if I continue the course, but I wonder if it’s worth following it ?

I see from the forum that the first pinned post is from 2020, it makes sense - lots of things change in 4 years, but on the website I cannot see when the course was made, I probably wouldn’t have bought it knowing it’s that old.

I’m not trying to flame or anything, maybe request an update on the lessons with the new changes in the libraries?

Yes having the year mentioned on the course will be nice. Sometimes I have a curiosity even though I have already bought the course.

I faced similar issue with the Node course. It wasn’t fun but these hurdles help you getting prepared for what you’d be doing in the actual development.

Honestly, I’m really annoyed that these tutorials didn’t stay up-to-date. I recommend not buying them.

I totally agree with you. It would be great if Mosh could do a course update. I started it with a lot of enthusiam.

The Ultimate React Native Series: Fundamentals
The 1st part, I was able to complete it with updating certain part of the code.

The Ultimate React Native Series: Advanced Concepts
While beginning the 2nd part, I had to update some dependencies versions to make the api server work. Unluckily again, I got stuck in chapter 04 - Networking (when posting the listings). I’ve reviewed other people issues on this, but their solutions did not work for me.

I’m a person that likes to learn how to debug software, but sometimes it gets very complex or annoying. Not to mention, when you are learning something new.

Not sure how other people as of 2024 has made DoneWithIt mobile app work and/or have made it run 100%. Is there anyone who could share the complete code?

Finally, I’ve learned a ton from 12 chapters (only 4 to finish the bundle) and the way Mosh teaches, you don’t even feel how time goes by. But is really a pity that I’m (and I would think lots of other people as me are) stuck.

So, again it would be GREAT if Mosh could do an update on this React Native course as he did with the React course. Please Mosh if you read this comment, set some time to update at least the outdated lessons.

2 Likes

Could you complete the Node course?

Yes, I completed it in 2020. I think I needed to use Yup instead of Joi and there were a few mongoose issues as well.

I think I had no issues following the course. It is true that some of the libraries are deprecated but the essence of following the course is to know the core features. Besides, Mosh will always show you the documentation of each library and how to use it. If you are following the course so many years after, try to use modern libraries and challenge yourself to make it work. After learning, you find yourself in a real environment where things are rapidly changing everyday. You would not expect to go back to the course

1 Like

How did you solve the problem with posting a new formdata? I’ve been researching how to solve this for hours, and I’ve tried other people’s solutions (setting the content type manually) and I’ve also tried to solve with gpt4 but still can’t find a solution :sob:

Kindly send your code plus screenshot of the error. I will look at it.

here is the code to the insertListing API call, I made sure everything is the same as from the video.

const insertListing = (listing) => {
	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.imageUris.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(JSON.stringify(listing.location));
	}

	return client.post(endpoint, data);
};

also, here is the code for handleSubmit, for when the user clicks on the submitButton.

const location = useLocation();

	const handleSubmit = async (listing) => {
		const result = await listingsApi.insertListing({
			...listing,
			location,
		});

		if (!result.ok) {
			console.log(result);
			alert("error");
			return;
		}
		alert("Success");
	};

the backend is pretty much the same, but I did do this because when I did npm i it gave me the same errors as this post. however i didn’t change the version of joi because gpt4 said the joi functions mosh used was deprecated, so i decided to use the same joi version as him, however all the other dependencies are the latest. Here is what i get for console logging the result variable in handleSubmit:

{"config": {"adapter": ["xhr", "http"], "baseURL": "http://my-ip-address:9000/api", "data": "null", "env": {"Blob": [Function Blob], "FormData": [Function FormData]}, "headers": [Object], "maxBodyLength": -1, "maxContentLength": -1, "method": "post", "timeout": 0, "transformRequest": [[Function transformRequest]], "transformResponse": [[Function transformResponse]], "transitional": {"clarifyTimeoutError": false, "forcedJSONParsing": true, "silentJSONParsing": true}, "url": "/listings", "validateStatus": [Function validateStatus], "xsrfCookieName": "XSRF-TOKEN", "xsrfHeaderName": "X-XSRF-TOKEN"}, "data": "<!DOCTYPE html>
<html lang=\"en\">
<head>
<meta charset=\"utf-8\">
<title>Error</title>
</head>
<body>
<pre>SyntaxError: Unexpected token &#39;n&#39;, &quot;null&quot; is not valid JSON<br> &nbsp; &nbsp;at JSON.parse (&lt;anonymous&gt;)<br> &nbsp; &nbsp;at createStrictSyntaxError (C:\\Users\\dyup3\\Desktop\\React Native\\Carrot Market\\backend\\node_modules\\body-parser\\lib\\types\\json.js:169:10)<br> &nbsp; &nbsp;at parse (C:\\Users\\dyup3\\Desktop\\React Native\\Carrot Market\\backend\\node_modules\\body-parser\\lib\\types\\json.js:86:15)<br> &nbsp; &nbsp;at C:\\Users\\dyup3\\Desktop\\React Native\\Carrot Market\\backend\\node_modules\\body-parser\\lib\\read.js:128:18<br> &nbsp; &nbsp;at AsyncResource.runInAsyncScope (node:async_hooks:206:9)<br> &nbsp; &nbsp;at invokeCallback (C:\\Users\\dyup3\\Desktop\\React Native\\Carrot Market\\backend\\node_modules\\raw-body\\index.js:238:16)<br> &nbsp; &nbsp;at done (C:\\Users\\dyup3\\Desktop\\React Native\\Carrot Market\\backend\\node_modules\\raw-body\\index.js:227:7)<br> &nbsp; &nbsp;at IncomingMessage.onEnd (C:\\Users\\dyup3\\Desktop\\React Native\\Carrot Market\\backend\\node_modules\\raw-body\\index.js:287:7)<br> &nbsp; &nbsp;at IncomingMessage.emit (node:events:518:28)<br> &nbsp; &nbsp;at endReadableNT (node:internal/streams/readable:1696:12)</pre>
</body>
</html>
", "duration": 16, "headers": {"connection": "keep-alive", "content-length": "1272", "content-security-policy": "default-src 'none'", "content-type": "text/html; charset=utf-8", "date": "Sat, 27 Apr 2024 09:31:53 GMT", "keep-alive": "timeout=5", "x-content-type-options": "nosniff", "x-powered-by": "Express"}, "ok": false, "originalError": [AxiosError: Request failed with status code 400], "problem": "CLIENT_ERROR", "status": 400}

thank you sm in advance

p.s. @Mosh please consider updating the react native course as there was a lot of errors along the way which I guess was not that hard to solve but I finally got stuck on one :frowning:. or maybe if you decide to just update the backend that would be great :smiley:

Nevermind, i managed to fix it somehow :person_shrugging:, thanks for the help tho

Hi everyone, for those doing the React Native course in 2024 like me and having issues with the “NETWORKING” chapter, especially when posting listings:

I have updated the code: FEEL FREE TO FORK MY REPO! :point_down:
https://github.com/CrisRamosLazaro/SparkJoy-backend

Modifications:
1- the package.json has the updated versions of the modules as of Nov 2024

2- The problematic routes > listings is fixed.
The main issue (and I have no idea how it was working for Mosh) is that:

2.1) in the front-end, the location must be stringified before appending it to the FormData,
(which was correctly set as if (location) data.append('location', JSON.stringify(location))

2.2) in the back-end, the Joi schema specifies that the req.body’s location is an object
const schema = Joi.object({
title: Joi.string().required(),
price: Joi.number().required().min(1),
categoryId: Joi.number().required().min(1),
location: Joi.object({ //---------------> here
latitude: Joi.number().required(),
longitude: Joi.number().required(),
}).optional(),
})

2.3) Somehow the command to parse the stringified location back to an object was placed AFTER the validateWith middleware:

router.post("/",
'['
upload.array("images", config.get("maxImageCount")),
validateWith(schema),
//-------> 👆HERE IS WHERE THE VALIDATION CHECKS IF THE LOCATION IS AN OBJECT
validateCategoryId,
imageResize,
],
async (req, res) => {
const listing = {
title: req.body.title,
price: parseFloat(req.body.price),
categoryId: parseInt(req.body.categoryId),
description: req.body.description,
};
listing.images = req.images.map((fileName) => ({ fileName: fileName }));
if (req.body.location) listing.location = JSON.parse(req.body.location);
//-------> 👆 AND HERE IS WHEN THE LOCATION IS PARSED BACK INTO AN OBJECT
// -------> so there will always be an error

if (req.user) listing.userId = req.user.userId;
store.addListing(listing);
res.status(201).send(listing);
})

Now (in the routes >listings.js) I’ve created the validateLocation function, where I moved the JSON.parse(req.body.location) line, and placed it BEFORE the validateWith middleware in the router.post()

3- The recommended way to perform validation with Joi in newer versions is to call the .validate() method directly on the schema object. This is the approach that aligns with the current Joi API.

So I have modified the middleware > validation.js file from
const Joi = require("joi");
module.exports = schema => (req, res, next) => {
const result = Joi.validate(req.body, schema);
if (result.error)
return res.status(400).send({ error: result.error.details[0].message });
next();
};

to

export default schema => (req, res, next) => {
const { error } = schema.validate(req.body)
if (error) {
return res.status(400).send({ error: error.details[0].message }) }
next()
}

4- I have updated the code to ES6 / modules

5- I have added an .env file where I’ve transferred the BASE_URL and PORT values, and made the corresponding adjustments in the files that required it.

(you’ll need to add that too, ie:

DEV_BASE_URL=http://192.168.0.00:9000/assets BASE_URL=https://moshbucket1.s3.us-east-2.amazonaws.com PORT=9000
)

6- I’ve added the public/assets folder to my .env,
You’ll have to copy it from Mosh’s original code

7- I’ve moved the listings array and the messages array to a new folder called db and have imported them in the files that use them.
db/mock-db-listings.js
db/mock-db-messages.js
You’ll have to create the db folder and the files, and copy those arrays from Mosh’s original code (or create your own data)

SIDE NOTE:
I don’t know if it happened to you as well, but I could only get the success Alert if I specified the headers in the frontend repo:

//app>api>listings.js

const saveListing = (listingData) => client.post('/listings', listingData, {
headers: {
'Content-Type': 'multipart/form-data',
},
})

it’s weird, because apisauce is supposed to add this header automatically, or so the course says, but without this declared header, I get an error.