Tag: react-navigation

Hey there! How are you? I hope well!

Well, we have reached a point in our app development that requires us to tidy up our code, because we just add everything to the MainScreen component just to check if everything works just fine! Now, we need to separate the concerns and clear things in our minds by breaking up the component in separate components and assigning them with the correct jobs each should execute! Let’s make a sketch first, so we can visualize our design and logic behind the first screen in our app.

Component structure of MainScreen

Our top Component in our MainScreen remains in the index.js file of the folder with the same name! This component includes a lot more components inside it and so we need to break it up keeping in mind our goals at this point:

• we need a header which is used for navigation (for this case we are using StackNavigator)
• we need the general title of the app, which is the Site title and Tagline of the WP settings
• and finally the list of posts

A general guiding rule is that each file contains only one component. This keeps things clean and readable!

So, we have 3 main components (the PostsList component breaks down to more) that we need to create in order to give our app a clean structure.

SiteInfo component

For the time being, I put the Site title and Tagline into a separate component called SiteInfo inside the MainScreen folder. This component does from now on the http call to get its contents. Of course, now we import it in the MainScreen component.

That’s it for now… Refactoring is on its way.. We keep in mind to make our app components as decoupled as possible!

PostsList component

Ok, we added an additional component which is responsible for rendering the list of posts from now on. In this component we are passing down the posts array from MainScreen state and the navigation prop as a prop of the PostsList component. Eventually, the two props of this component are: navigation and posts!