Now there is one other place in the app where I want to use my own font and that's here in the recipes list,
this text here - simple, affordable and the duration,
that's not using our own font and that's something we want to change
and that's of course our meal item here.
There we have these three text components and these simply need to get a style that uses our own font.
Now by the way earlier in the course, you learned about alternatives to that, instead of assigning a style
and repeating a style assignment here,
you could also create your own wrapper component as we did with body text earlier in the course which
is simply wrapping the built-in text component that always sets your own font family, that will be an
alternative or you set up a global style which you import into this file and actually, now that I think about
it since we'll have more text later,
I will create my own wrapper component here and I'll have my let's say DefaultText.js file here, you
can name this whatever you want it and in there, I'll import React from React because I'm creating a React
component and import text and stylesheet from React Native
and now this is a thin wrapper around the built-in text component,
so default text, this component here is simply a component which returns the built-in text component
around props.children so that we can use default text with opening and closing tags and in between,
pass our text and there I'll point at styles.text here to assign my own text style, make sure stylesheet
is imported for this and then use the stylesheet to create one down there and store it
in the styles constant. Of course, also the export default text thereafter and now here in text, I will
simply set up a font family of open sans and that should be my default here and that's the only thing I'll
change and now we can use default text whenever we have text in the app that should use our own custom
font family. So for example here on the meal item, we can now import this custom text, so import default
text from ./DefaultText, from our own component there and now use default text down there
instead of the text component which I'm currently using, just like this and with that if we now
go there, this actually uses our own custom font, it doesn't look that different but it is our own font,
this is especially clear if we go there and we change this to OpenSans-Bold of course because the
bold version is always a bit easier to recognize but I'll change it back to the non-bold version. So
we have our own custom text here as well, you could style other thing things here as well, add colors, add
icons, whatever you want. I'm done with my styling for the moment, now I want to make sure that we have
more meaningful content here on the detail page before we then also later work on the filters screen
here.