So let's start working on this app then
and for this, I have a brand new app here,
you'll find it attached in case you want to build up on this same starting app.
This simple app gives us this here, a very ugly app where we have some text which is overlapped by the
status bar, by the notch.
Now we could fix this with save area view as you learned earlier but we'll not need to because we'll
not keep this content anyways and we'll use a third-party library that allows us to easily navigate
between different screens and get nice animations along the way,
so that we don't have to take care about that
and this third-party library will also manage the notch on the device and give us this save area out
of the box.
Now before we add that third-party library, let's start writing some code though because we can only
navigate between screens if we have multiple screens.
So for that, I'll create a new screens folder here and I'll also already create a components folder,
the difference will be that in the screens folder, we have these React components which we then use as
full
screens I guess and in the components folder instead, we'll have the components we use on
our screens,
so for example when we have that grid of meal categories, of food categories, then our grid item would
be a component, the entire grid, the entire food categories screen however would be a screen
and I guess this makes sense. Now as sketched, as laid out, in this app we'll need a couple of screens and
I'll create all the files already and we'll fill them with life throughout this module of course. We'll need
the categories screen and I'll name the file categories screen to make it really clear what's inside
there.
This is the screen where we can select a category like Italian, German, American, so where we can select
a food category, so we'll add content that reflects this, we'll add such a grid on this screen, in this
screen component later.
Now once we selected a category, we will see a list of meals that fits into this category and I'll name
this screen which we'll then see, which we'll navigate to, category meals screen because this is the screen
that loads the meals for a chosen category.
So that's another screen we need and another screen we'll be able to navigate to.
Now we also will need a favorites screen which is the screen that holds all our favorite recipes, our
favorite meals and we'll also need a MealDetailScreen, that's the screen we see if we tap on a single
meal inside of a chosen category or on the favorite screen. This then shows us the ingredients and the
detailed steps for this meal.
Now and last but not least as laid out, we'll need a filters screen and this filters screen is the screen
that allows us to set filters, like vegan food so that we only see recipes which are vegan or vegetarian
or glutenFree or lactoseFree,
these will be the four categories I'll have in this app, so these are the screens. Now we'll add components
as we need them and not add all the files in advance
and with that, we have the very basic setup we need here, though of course all our screens
are totally empty. Now we'll populate them with more life step-by-step but I at least want to set up
a basic component in each of these screens.
So I'll start in the categories screen and of course, we need to import React from React there because
we'll build a React component and we'll also import something from React Native because obviously, we'll
build a React component here that uses some React Native components. To be precise,
I will start simple here and import a view and a text from React Native and then create my component, the
categories screen in this case which takes props or which might receive props at least because it's
a normal React component after all and where I will export this as my default component. I'll also add
a stylesheet because chances are we'll need this and if we don't, we can still delete it later.
So I'll set up my styles here with stylesheet
create, like this.
So that's a very basic React component, doesn't render anything though,
so inside of the component function here, we'll have to return something and that something is some jsx
code where I want to render a view and in there, a text and here I say the categories screen.
Now I'll also give that view some style where I say styles.screen, with a very basic screen layout
or a screen styling here where I set flex to one and then justify content to center and align items to
center and as you learned, this will do one thing,
it will center the content on the screen, so it will center this text on the screen in the end.
This is the base component and I'll copy that content into all other screens
and of course, this is not the final content we'll have there, just some dummy content so that we can
start navigating between some of these screens and see something.
So here, we have the category meal screen, that's this component here and that's therefore what we need to
export here and here, I will therefore say the category meal screen like this. Now I'll also add this
to the favorites screen and rename this to favorite screen
and of course therefore export
favorite screen here
and then here, I can say the favorites screen,
copy that into the filters screen and do the same thing there,
it's the filters screen,
I renamed it and I exported this and also say the filters screen here in our text
and last but not least, this is the MealDetailScreen.
So here we have the MealDetailScreen, I'll
also name it MealDetailScreen here and export the MealDetailScreen.
So with that, we got that all set up in these screens,
now we're almost done with all the preparation,
I just want to add some special fonts to this app and thereafter, we'll dive right into adding some navigation.