Wrapping Up

[00:00:01]
>> Awesome that's it, we have reached the end. Thank you so much, for this course I hope you found something interesting in this course. So just a recap of things that we looked at, so we looked at using TypeScript with React Native. We did a recap of core components and React Hooks.

[00:00:19]
We added a bottom navigation bar, so you've added a bottom navigation bar. We looked at JavaScript earlier versus native libraries in React Native. We used React Context to store global app state. We learned how to persist data across app launches using async storage. We looked at a rendering images locally and remotely via URL.

[00:00:43]
We added SVGs in React Native for our bottom tabs. We added custom fonts. We created animations using layout animation as well as custom animations using Reanimated 2. We added an app icon and a splash screen. And we also did a whirlwind intro into data visualization. So where to next?

[00:01:00]
Well, we have only really scraped the surface when it comes to animations in React Native, and I think that's one of the most exciting parts. So now that you have the fundamentals and you have the docs, here's some things that you could try. You could try to group the items in the History tab by day, and then render the days using a draw, so that each day is a draw.

[00:01:23]
And then when you tap on it, it will expand to show the actual entries. You could create a component to fade or scale in, when an image is loaded by a URL. So this is a very common use case if you're loading something via URL, need to cool the onload event and then fade in so you don't have the white image while you're loading.

[00:01:44]
And you could try using an animated header for a scrollable page. So this will be using the animated gesture handler so when you scroll down on a page you could have a header pop up or change. Another thing that we didn't really touch on was haptic feedback. So haptic feedback is vibration.

[00:02:02]
And it's often used to make apps kind of nicer to use. You'll see a lot if you like a tweet, for example. And also sounds, so playing sounds when something good happens. So there are two libraries here that you could try using, so React Native haptic feedback and React Native sound.

[00:02:18]
So for example, you could add a haptic feedback effect when the user selects mute. And also, I've only given one example of using a victory chart in our app. But there are so many more charts available and different ways of displaying your data. So you can get creative and try visualizing your data, in a different kind of chart, maybe a bar chart.

[00:02:40]
And finally, thanks so much for taking my calls. I would be find it informative and helpful in your React Native journey.
>> Would you be able to use React Native for game development?
>> Yes [LAUGH]. So, it depends on the games, I think. So for like 3D platformers, you would use something like unity which you can run now on mobile apps.

[00:03:07]
But if it was maybe a gesture Extra boost app or you could definitely do it. One of my colleagues actually built an app, which is drag and drop based. So you could do things like for example you wanted to do a sudoku, that was in React Native or if you wanted to do something where you like drag items the right position, that would work.

[00:03:29]
So it's just like tools for the job. But if it was something like to do with 3D, like I personally don't know the tools to do it at the moment
>> About testing libraries? So, for end to end testing, detox is kind of the go to. So, for testing like normal JavaScript stuff, you would still use jest it will still work.

[00:03:54]
So, most of your testing on the front end would be using jest. But for end to end you, would use detox, detox.react native, there you go, and that's kind of the go to see still write your tests in JavaScript, but then you can run them random on CI and run them end to end.

[00:04:20]
>> Could you give an overview of authentication strategies for React Native?
>> Yes, so that's something I was hoping to cover in this course, but didn't quite get to. Okay, so with authentication, so one of the things is, Like, where do you authenticate and when. So if your app has a completely different view for users that are authenticated and then users that aren't authenticated, and what you would do is at the very root level, so here before you hide the splash screen, you would decide whether the user should see the logged in flow, or the logged out flow.

[00:05:08]
So, you could for example, do if you store your users token in 18 storage or secure storage, you would see, okay, if there is no token, they're probably not logged in, but they're definitely not logged in. So, show them the locked out view. Otherwise show them locked in view.

[00:05:26]
So, that would be one way of doing it. On the current app that I'm working on, it's a little bit frustrating that you have a, the app is usable if you're not logged in, but then you can choose to log in in the middle and then everything should still work.

[00:05:43]
Like the same way and the UI looks really similar. So the way we handled it is that we have an auth context. So an auth provider, that basically handles like whether you're logged in, what's the current user? Like what's state, and then it's handled on a global level.

[00:05:59]
>> If I have an SVG tag, can I add on click interactivity and stuff directly to the element or
>> So you can, I wouldn't recommend it. It's a little bit, so we actually like, again in a recent project, we have some complex SVG is going on where we need to tap in the middle of an SVG.

[00:06:22]
And on Android in particular, it created some unexpected behaviors, and the own press wasn't always toggled. So actually what we ended up doing, is we absolute positioned that pressable area on top of the SVG at the right position. So you will have the SVG, and then the button is absolute position on top of it that will handle the on press event, because we used to animate it.

[00:06:51]
And, yeah, it just wasn't working as we wanted but in general it is supported like there is an on press event on SVGs.
>> Any deployment pipeline or deployment tools React Native that we should be aware of? So I almost exclusively have been using App Center, which is Microsoft Epicenter, and basically it is, I will say that it is slow, especially for iOS I think the current current build for iOS it takes like 30 or 40 minutes, but Android it's like 15 minutes.

[00:07:27]
So it's not ideal however for like a paid, subscription it's like 30 dollars or 30 pounds a month, which is like affordable for a CI service for unlimited builds. And basically yeah, I would use Epicenter, most of time. There's they also have a free tier, but I think it's only 60 minutes a month, so it's not usually enough.

[00:07:52]
And I would always, always, always build on CI rather than locally. So even though you can obviously build locally, just to manage the certificates and build signing, both on iOS and Android, just to make sure that you have the right environment variables, it's just much safer to set it up once on the CI, and then you know you're having a consistent behavior.

[00:08:16]
You can also actually set this up fully on GitHub actions. So GitHub action support Max, so you can set up your pipeline to build fully on GitHub actions. So some of the projects in my company actually do that. So most of them are either GitHub actions or Epicenter.

[00:08:35]
>> Do you ever use a WebView or linking, especially with like payments, with PayPal, that kind of thing?
>> Yeah. React Native WebView is pretty awesome. And sometimes I mean, I think it depends like if you're doing something from scratch, and it's the company does their first app, they've never had anything else, and you have free rein to build everything from scratch.

[00:09:00]
Obviously, it's nice not to use WebViews, but a lot of the time especially for big companies, like not everything is available via an API. So you'll have elements or application that you'll have to render within a WebView. So it's not ideal because it can take you outside of the kind of flow that the user is posing, and also you don't have control over the styling of the WebView.

[00:09:24]
So it might look not the same as the rest of your app. But, sometimes you have to. And yeah, I've used React Native WebView quite a bit.
>> It looks like there's one last one about the path for upgrading React Native with new versions of Android and iOS.

[00:09:45]
Is that getting better, or is it still a pain?
>> It's not been a pain. I mean, you literally, I think you saw it at the very beginning, when we create a new project, we had an XCode update, which basically broke the template. So things like that will happen, but they usually like one small thing and it commutable sorted out super quickly.