DEV Community

Discussion on: Can Anyone help me review my React Native code #a newbie

ashisacat profile image

Hey! I'm a React and RN dev so I'll throw a few quick ones at you, though this functions more as a high-level code review than a 'product review' as I couldnt seem to get the app running without errors and I didn't have time to debug them right now.:
First thing to jump out at me in src/Homescreen.js: you're using inline styles (which are broadly seen as 'not cool'), and I'd prefer to see you using StyleSheet.create({}) here.

That said, you're using stylesheets elsewhere in the app so I guess it's an oversight.

Your formatting also makes the jsx tree a little difficult to parse because the indentation isn't consistent - you could perhaps look into tools like eslint, prettier etc. which can enforce a style guide for you so that you dont have to focus on it.
The general structure seems fairly solid and you appear to have a pretty good grasp of the RN 'way-of-working' from what I saw, though there is a lot of component reuse, for example, most of your text is wrapped within its own View - why not create a Text component which is and just use that to keep your screens and other components tidier? This is the real benefit of react - not having to parse the boilerplate over and over, getting it right once and then reusing that component.

Variable naming is also something which popped up to me a few times - you use names such as 'ActandDecIcons', 'ActandDecIcons1', 'ActandDecIcons2'. This isn't particularly descriptive - those styles are only used in that fine, so we know its used by the A&D component. One is left margin, one is right margin, so why not name them 'IconWithLeftMargin' or 'LeftMargin', something which tells me obviously what that style should be doing without me having to go and cross-reference everything every time - context switching is hard.

There's not a huge amount of functionality in there, but what is there seems like a good start - thinking about validating the input fields, maybe using the AsyncStorage and other libraries could be a good next step - Photo storage perhaps?

One last thing, your components/screens are rather large - I don't like Components any bigger than 100 lines at a maximum - maybe 150 if the logic is abstracted away and there's a lot of pass-over boilerplate or something, but you should really be trying to encapsulate your Components at a lower level.

BUT great start, I've seen Junior Devs struggle with less :D

aore profile image
Emmanuel Oreoluwa Author

Thanks I Will work on all my mistakes