1 00:00:02,300 --> 00:00:05,320 Adding icons is super straightforward 2 00:00:05,330 --> 00:00:07,760 in a React Native app that uses expo. 3 00:00:08,060 --> 00:00:09,670 We can get rid of the button import by the way, 4 00:00:09,670 --> 00:00:11,530 we don't need the built-in button anymore 5 00:00:11,900 --> 00:00:18,830 but back to the icons because an icon can be added by importing something from 6 00:00:18,980 --> 00:00:23,180 and now it's @expo/vector-icons. 7 00:00:23,180 --> 00:00:26,410 Might be a bit of a strange package name but that's just what it is, 8 00:00:26,420 --> 00:00:31,910 it's part of the expo toolkit so to say, it's automatically included in any React Native project you 9 00:00:31,910 --> 00:00:33,260 created with expo 10 00:00:33,500 --> 00:00:40,250 and there you can import components that help you render icons and a pretty nice component there is 11 00:00:40,250 --> 00:00:45,920 the ionicons component. For that, you simply have to know that there are different icon sets which 12 00:00:45,920 --> 00:00:52,790 are built in into expo or into this vector icons package to be precise. Ionicons is one set of icons 13 00:00:52,820 --> 00:00:58,490 managed by the team behind ionic in the end, so the icons which are included in that set are managed 14 00:00:58,490 --> 00:01:02,450 by that ionic team and I'm really just talking about the icons here, 15 00:01:02,450 --> 00:01:08,300 this has nothing to do with us adding anything from ionic to the React Native app, we're just using 16 00:01:08,300 --> 00:01:09,650 their icons. 17 00:01:09,650 --> 00:01:16,080 You also got other icon sets like evil icons, material icons, so a lot of icon sets you can use 18 00:01:16,190 --> 00:01:22,520 and a great place to learn about all included icons and get an overview of all the included icons is 19 00:01:22,520 --> 00:01:27,680 the official expo icons documentation which you find attached to this video as well, 20 00:01:27,680 --> 00:01:34,270 a link to this documentation and there you can not only learn more about how to use them but you'll 21 00:01:34,270 --> 00:01:40,460 also find that link to the icons directory and that is a long list of all the included icons you can use 22 00:01:40,470 --> 00:01:45,110 and you always see to which icon package this belongs, 23 00:01:45,110 --> 00:01:50,030 you can also search for icons there like remove to find all icons that have something to do with removing 24 00:01:50,030 --> 00:01:55,070 stuff and then you see that there is something from the ionicons package, something from the material 25 00:01:55,070 --> 00:01:56,820 icons package and so on. 26 00:01:57,140 --> 00:02:01,820 Now the icons I searched for in advance are from the ionicons package. 27 00:02:01,820 --> 00:02:07,040 So here, I'll import ionicons from @expo/vector-icons and this now automatically is a component we can 28 00:02:07,040 --> 00:02:10,830 use in our jsx code to output an icon 29 00:02:10,940 --> 00:02:15,820 and if we would have used material icons, that would also be a component just to output a material 30 00:02:15,820 --> 00:02:16,270 icon 31 00:02:16,340 --> 00:02:22,810 but I want to use an ionicon icon, so I'll use that and now I'll go down to the jsx code and instead 32 00:02:22,810 --> 00:02:30,040 of using lower here, I'll actually output such an ionicon, such an icon here in my button and the great 33 00:02:30,040 --> 00:02:36,250 thing is such an icon here can also be nested into our button even though what we're outputting here, 34 00:02:36,250 --> 00:02:43,930 props children, is instead of a text node but that is supported, you can output an icon component in that 35 00:02:43,930 --> 00:02:46,290 text component as well, so that will work. 36 00:02:47,140 --> 00:02:51,910 So back to this ionicon here though, right now I'm not saying anything about the icon I want to use 37 00:02:52,390 --> 00:02:58,400 and there, the icon I picked in advance has a name of md-remove. 38 00:02:58,900 --> 00:03:06,430 Now you tell React Native and kind of expo that you want to use that icon by adding the name prop here 39 00:03:06,520 --> 00:03:12,520 on ionicons and then this takes a string with the icon name which you find in that directory, right? 40 00:03:12,550 --> 00:03:15,970 So here I picked this icon here which I want to use, 41 00:03:16,000 --> 00:03:20,440 so that's the name, md-remove which we now use here. 42 00:03:20,530 --> 00:03:22,520 So that's the icon name we added here. 43 00:03:22,600 --> 00:03:28,660 Next you can also set up the icon size in pixels and here I'll go with 24 to have a nice big icon and 44 00:03:28,660 --> 00:03:33,250 also the color this icon should have and here, I'll set this to have a white color. 45 00:03:33,280 --> 00:03:38,920 Now I'll copy that and use the same on the greater button but there of course, the icon is a different 46 00:03:38,920 --> 00:03:39,320 one, 47 00:03:39,340 --> 00:03:45,580 here I picked md-add as an icon and you can of course explore that list of icons and pick different 48 00:03:45,610 --> 00:03:50,650 icons if you want to and you can also try a different icon packages instead of ionicons or even use 49 00:03:50,650 --> 00:03:54,830 two different icon packages in one and the same component. 50 00:03:54,850 --> 00:03:59,650 You don't have to stick to one icon package only, you can mix and match them as you want, 51 00:03:59,650 --> 00:04:04,150 so we could render an ionicon here and render a material icon here 52 00:04:04,150 --> 00:04:08,350 but of course you should ensure that the overall look of your app makes sense. 53 00:04:08,350 --> 00:04:13,840 So if you're mixing icons too wildly, chances are that it's not going to look that good, 54 00:04:13,840 --> 00:04:18,160 so typically you want to stick to one set but you don't have to technically. 55 00:04:18,190 --> 00:04:23,500 So here, I picked these two icons and now with that if we save this, we start a new game here. 56 00:04:23,500 --> 00:04:30,190 Now we got a plus and a minus icon here to indicate whether the numbers should be lower or higher 57 00:04:30,190 --> 00:04:36,100 and that is pretty nice in my opinion because that gives us a whole new way of building user interfaces 58 00:04:36,430 --> 00:04:41,380 because with icons, we really have another important tool for building great user experiences.