Images & Nav Q&A

[00:00:00]
>> For the bottom tab, how can we enlarge our anime tab on click?
>> Because we know if the selected shape changes, we could trigger an animation here and just animate your styles. So you can animate SVG elements. SVG actually also for animating. You can create animated SVG so, you can like enlarge it, or something.

[00:00:21]
So I think I would do it here, but I think it depends on the specific animation as well. Cuz a lot of animations are kind of sleight of hand. So, for example, a recent animation that I built was we have a search box at the top of the page.

[00:00:39]
And then when you tap on the search box, the page kind of fades into the search page, right. Which kind of looks like there's a search page that opens up on top of your current content. But actually 3Ds is just a mode with a fancy animation. So it will depend on the actual animation like how complex it is or how simple.

[00:00:59]
So a lot of animations will just be overlaid on top of your content.. So they like give the effect of something happening where actually like behind the scenes is kind of sleight of hand.
>> For network images, how do we handle high resolution images? Is receiving different URLs for different resolutions the only way?

[00:01:18]
>> Yes, so usually you would use like, there are a bunch of different image CDNs that basically give you the image base and associate you put in the URL should pretty common solution on the web as well I think. So usually what you would do or like what I would do is you get the pixel density of the device.

[00:01:43]
Which I think is in platform where you can get the pixel density of the device. And then you request the image based on the size that you need to render it to times the pixel density. And then basically, you get it so it would be just via different URLs.

[00:01:59]
So if you have user generated content, you need to make sure that when the user uploads the image, you do some processing on your back end to be able to support the different images. So if they upload a huge image, you don't want to just render it as is in your app.

[00:02:15]
>> I have question, why wouldn't we use free acquire code directly in the image source rather than defining a const outside of the component.
>> Absolutely no reason, feel free to do that. I think it's just a habit because it really requires we're unsupported until recently so my habit is to add the requires see at the top of the page but there's no reason to do that anymore.

[00:02:40]
>> And then can you use import syntax rather than required to load images?
>> No you can't, so, I actually had one other thing that I've just remembered that I wanted to share as a tip. If you get SVGs from your workplace or your designers, and you need to convert them into these SVGs using your app, a lot of the time the SVGs you get you get don't look as clean.

[00:03:05]
As this there's a lot of time there's like transitions and it's like gee like the group elements all over the place they don't really need we don't want to update them by hand. So there's a couple of tools out there that will help you and one of them the one I use is React Native SVGR which has this playground.

[00:03:27]
And basically so here's an example of an SVG element and this is pretty typical of something that you might receive from a designer. It has all this meta data from where it was generated and it's got a bunch of D elements and there's some like a bunch of translations that you don't want.

[00:03:44]
And here there's actually like gives you options if it will create the component for you. So if you wanna you could do React Native and whether you want to pass the properties so like. Here to the SVG or not and you can see that it hides it up so this whole component turns into this.

[00:04:04]
So usually what I do because I don't quite like the syntax of this is if I get an SVG, I will paste it into here, generate the React Native component and just copy this bit into my code. So one thing to note though for some reason, they all always add this XML NS property and this isn't a valid property in React Native SVG.

[00:04:29]
So after you copy it you'll have to remove it. But that's my this has saved me hours of my life.
>> So you mentioned tabs and drawers, as the main navigation, is there any other navigations or types of navigation.
>> Okay, so we have tabs, stacks, you have Talon navigation, you have stuck navigation, and then you have Moodles.

[00:04:56]
And so there's an example I have on GitHub. I have a demo project that has navigation setup which just started us. This is a template project that has a two tab layout with two models and a stack navigator so if you look at the navigation story here. So we've got the root stack, then we've got the bottom tabs, so you could have these two tabs.

[00:05:27]
And then we got on a home tab, we have a stack navigator inside it. So if you go to open second page here, it will open a page inside your home navigator. And then in the other tab, this is just a tab on its own. So the other tab looks exactly like our tab.

[00:05:44]
Tabs look like so we don't have anything nesting inside and then lastly we have a Moodle or you'll notice that this Moodle is adjacent to the bottom tabs rather than inside it. And that's because I want the moodle to appear over the bottom tabs and that's why we need to have a stack navigator at the very top level.

[00:06:05]
So you could put both of the bottom tabs navigator and the example module inside there. I need to update the Type Script types for navigation on here, but otherwise this is this you can use this for reference. So if you look at the template, so, screens, so this follows the same format as we did in our workshop.

[00:06:28]
So we have bottom tabs navigator, modal screen home tab, so if you go to root navigator will see that we have so root stack. So this is a stack navigator, and then it has two things inside. So you have the bottom tabs, which is most of your content, and then you have a modal which is like a blue screen modal.

[00:06:49]
So usually when I built apps, this is the format that I go with, so you have roof stack, you have a tab, and then all of your full screen models will be here so you might have like 20. And then obviously for each of the models, if the moodle itself has a stack navigator, so if you can navigate the screens within the moodle, you can do that.

[00:07:09]
So you can have the component be in itself a stack navigator. Yeah, and this is a template, so you can try it out if you just entered a new app using this template.