1
00:00:02,250 --> 00:00:07,160
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,

2
00:00:07,170 --> 00:00:10,080
this text here - simple, affordable and the duration,

3
00:00:10,200 --> 00:00:13,400
that's not using our own font and that's something we want to change

4
00:00:13,620 --> 00:00:16,110
and that's of course our meal item here.

5
00:00:16,110 --> 00:00:23,460
There we have these three text components and these simply need to get a style that uses our own font.

6
00:00:23,910 --> 00:00:28,470
Now by the way earlier in the course, you learned about alternatives to that, instead of assigning a style

7
00:00:28,470 --> 00:00:30,690
and repeating a style assignment here,

8
00:00:30,690 --> 00:00:36,210
you could also create your own wrapper component as we did with body text earlier in the course which

9
00:00:36,210 --> 00:00:41,430
is simply wrapping the built-in text component that always sets your own font family, that will be an

10
00:00:41,430 --> 00:00:47,550
alternative or you set up a global style which you import into this file and actually, now that I think about

11
00:00:47,550 --> 00:00:49,350
it since we'll have more text later,

12
00:00:49,350 --> 00:00:54,990
I will create my own wrapper component here and I'll have my let's say DefaultText.js file here, you

13
00:00:54,990 --> 00:01:00,330
can name this whatever you want it and in there, I'll import React from React because I'm creating a React

14
00:01:00,330 --> 00:01:06,950
component and import text and stylesheet from React Native

15
00:01:07,050 --> 00:01:10,500
and now this is a thin wrapper around the built-in text component,

16
00:01:10,500 --> 00:01:17,550
so default text, this component here is simply a component which returns the built-in text component

17
00:01:17,940 --> 00:01:24,300
around props.children so that we can use default text with opening and closing tags and in between,

18
00:01:24,300 --> 00:01:32,730
pass our text and there I'll point at styles.text here to assign my own text style, make sure stylesheet

19
00:01:32,730 --> 00:01:40,280
is imported for this and then use the stylesheet to create one down there and store it

20
00:01:40,280 --> 00:01:48,050
in the styles constant. Of course, also the export default text thereafter and now here in text, I will

21
00:01:48,050 --> 00:01:54,170
simply set up a font family of open sans and that should be my default here and that's the only thing I'll

22
00:01:54,170 --> 00:01:59,870
change and now we can use default text whenever we have text in the app that should use our own custom

23
00:01:59,870 --> 00:02:10,000
font family. So for example here on the meal item, we can now import this custom text, so import default

24
00:02:10,000 --> 00:02:18,360
text from ./DefaultText, from our own component there and now use default text down there

25
00:02:18,900 --> 00:02:27,110
instead of the text component which I'm currently using, just like this and with that if we now

26
00:02:27,110 --> 00:02:32,290
go there, this actually uses our own custom font, it doesn't look that different but it is our own font,

27
00:02:32,480 --> 00:02:38,630
this is especially clear if we go there and we change this to OpenSans-Bold of course because the

28
00:02:38,630 --> 00:02:48,320
bold version is always a bit easier to recognize but I'll change it back to the non-bold version. So

29
00:02:48,320 --> 00:02:53,300
we have our own custom text here as well, you could style other thing things here as well, add colors, add

30
00:02:53,330 --> 00:02:59,150
icons, whatever you want. I'm done with my styling for the moment, now I want to make sure that we have

31
00:02:59,240 --> 00:03:05,360
more meaningful content here on the detail page before we then also later work on the filters screen

32
00:03:05,360 --> 00:03:05,600
here.