Icon Buttons

[00:00:00]
>> Kadi Kraman: Now let's move on to Icon Buttons. So on mobile UIs it's very common to use icons for buttons instead of just text. It's actually quite common on the web as well. It's kind of makes mobile apps feel nicer, and it allows us to have less text on the screen.

[00:00:17]
It's just a little bit more fun. We'll be using expo icons and this is built on top of the react-native-vector-icons and the handy thing about it is, you got a link here. So it's got a convenient website that you can use to search for icons. So let's say that I wanted a leaf, so I can search for my leaf icon and it gives me the import that I need and also the component to render.

[00:00:43]
So you can have your own icon images or SVGs or whatever, but this is just a convenient way if you want to quickly get some icons in your app. You can choose some from this existing library. One thing to note, which might be surprising if you're going for the web is that SVGs are actually not the most optimal way to render things on native apps.

[00:01:08]
In particular android, it's actually quite expensive. So if you have 1,000 SVGs on an Android app, it might end up slowing to a crawl. So SVGs are something to be used kind of sparingly in a React Native app. And like small PNGs would, for example, actually be preferred.

[00:01:29]
But using icons for like bottom tabs or icon buttons or things like that is very common, and that's what we're going to do. Let's start by installing the vector-icons library. So we're gonna do npx expo install @expo/vector-icons, [COUGH] and you might be wondering why are we doing this npx expo install.

[00:01:52]
Why are we not doing yarn install or npm install and this is just a useful thing to do if you are building with expo. And notice that what this did is that it prints out, it's installing one SDK 51 compatible native module using yarn. And the reason this is important is that react native versions don't work like react native changes across releases.

[00:02:22]
And packages that touch native code, they need to be compatible with that version of React Native. So if we look at our package.json, which is here, so we can see that we have expo, this is SDK 51, and then we have react-native 74. So react-native does a release around every like twice a year, and Expo does a release of SDK release twice a year as well.

[00:02:50]
And then with each SDK release we also bump the react-native version. So if you install with npx expo will install then if the library that you're installing is something that we have records of, this checks and makes sure that you're installing an SDK compatible version. So that's why it's saying that it's installing an SDK 51, so this comes from here, compatible library.

[00:03:14]
So in September or October or SDK 52 comes out. If you haven't upgraded yet and you run npx expo install, it makes sure that the library you're installing is compatible with 51 compared to if we just did yarn install or npm install, which by default would install the latest version of that package.

[00:03:35]
>> Kadi Kraman: [COUGH] And you'll also notice that I'm using yarn. So even though I did npx expo install, it's using yarn to add my package. And the way that it detects that is actually based on the lock file. So if I have a yarn lock in my in my project, it's gonna use yarn.

[00:03:52]
If you have PMP lock, it will use PMPM if you have a bone lock file, if you use bone, etc.
>> Kadi Kraman: Now, If we weren't using Expo Go, at this point, we would have to rebuild our native app to actually get these native components for the expo/vector-icons. But because we are using Expo Go, this is a sandbox environment, and it has a whole bunch of native libraries pre-installed, including expo/vector-icons.

[00:04:19]
So that's why we can just install this library and away we go.
>> Kadi Kraman: Now, I've picked some icons already. All right, so we're going to use the icon for the delete button. So here's the UI that we're going to do. So instead of having the delete as a black button with text, we're going to use a delete icon instead.

[00:04:43]
Make it a bit pretty. So I've chosen this red color, which is somewhere on here. There we go, let's add this red to our theme file. Let's go to the theme and add a color red. And then I think what I did is I went on this website close, there we go, I think this is what I used, closecircleo.

[00:05:22]
>> Kadi Kraman: It's this one, there you go. So now that you have, you can actually just copy this from the vector icons website, go to our shopping list item, and import the vector icon.
>> Kadi Kraman: And oops.
>> Kadi Kraman: And we also can render the component. So where are touchableOpacity is, we can keep the touchableOpacity.

[00:06:01]
But we replace the text with our closecircle.
>> Kadi Kraman: [COUGH] Let's also remove these styles.
>> Kadi Kraman: There we go, so we don't need these button styles anymore. And instead of the black color, let's do a theme color red. There we go, I probably want our kind of completed items to be grey.

[00:06:42]
So let's use a grey color if it's completed. So if isCompleted, let's do theme.colorGrey, otherwise, we'll do red.
>> Kadi Kraman: Awesome.
>> Student: If you can't find good icons with expo icons, are there any other icon libraries you'll reach for?
>> Kadi Kraman: I would use SVG, I mean you can use any SVG icon.

[00:07:15]
There's a react native svg, so react native svg.
>> Kadi Kraman: There you go. So you can install react-native-svg and then just render any icon that you might want from SVG. Actually, Expo image also renders SVGs. So if you have, so expo image, from here, expo image. I'll just call it image, there you go, [LAUGH].

[00:07:43]
Yeah expo Image actually also renders SVGs, so any like SVG library website that you might usually frequent would work. All right, and I think at this point, looking at my thoughts that this padding on the edges looks a bit tight, so let's increase it from 8 to 18, give it a little bit more space to breathe.