Check out a free preview of the full Intermediate React Native, v2 course

The "Wrapping Up" Lesson is part of the full, Intermediate React Native, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Kadi wraps up the course by sharing some resources for relevant React Native libraries and tips for building mobile applications. This lesson also discusses student questions about accessibility in mobile apps and strategies for managing client apps.

Preview
Close
Get $100 Off
Get $100 Off!

Transcript from the "Wrapping Up" Lesson

[00:00:00]
>> Kadi Kraman: All right, we have reached the end, congratulations everyone. I hope this has been interesting and insightful and has put you on the way to building your own production-ready apps with React Native. I was trying to figure out what to put in this final word section, and I'm I decided to just add links that came to mind as interesting things to look at next.

[00:00:27]
So if you learn to measure things and you're like, what should I look at next? This is a selection, so there's not a particular theme here, of React Native libraries and websites that might be interesting. So I've added the expo documentation, so we have a huge amount of documentation for various things that you can do in React Native, so in particular things that you can do with expo SDK libraries.

[00:00:54]
One thing to reference especially is under reference we have all the SDK libraries. So if you're wondering what's possible to do with React Native, then it's handy to know that these libraries exist. And similarly, I'd like to link to the official React Native documentation. So especially if you go to Guides or Components.

[00:01:22]
>> Kadi Kraman: So this is a really nice resource for everything that is built into React Native. So we covered a lot of it, but if you're wondering what else is built into React Native, this is a great resource to go through and see what exists and what properties exist.

[00:01:37]
Then we have React Native directory. So this is a place for searching for React Native apps that exist. So if you want to let's do video you can have video metadata video processing video player so it will show you like a handy how many downloads how many stars so it is a nice resource for finding React Native libraries.

[00:02:01]
Then we have Ignite. So now that you know how to build React Native apps, you might want to use a template instead. So Ignite is built by Infinite Red, who are a React Native consultancy in the US. They are absolute pros when it comes to React Native. And this is their template that they use for their own consultancy whenever they build projects.

[00:02:24]
So it's basically has all the usual suspects for like things that they usually use. It is using Expo under the hood as well or rather it is using Expo. So if you want to create a new project and you want to start with a template rather than from scratch then this might be something to look into.

[00:02:43]
Then I added a link to Maestro. So this is a nice UI testing library for React Native. So you might have heard of Detox, which is also an option, but Maestro is kind of a newer version and I think this is a something worth looking into if you need to do kind of end-to-end UI testing.

[00:03:03]
Then we have reanimated and react-navate-gesture-handler. So if you are looking to incorporate animations into your app, so especially things like swipe to delete or making your buttons larger. I think swipe to delete is a great example. Or creating your own image zoom component, then these two libraries used together are like a match made in heaven.

[00:03:28]
Then I had to link to react-native-vision-camera, which is just a cool new library that was recently released that you might want to check out. And there's also react-native-skia that lets you do 3D graphics in React Native. React-native-bootsplash lets you do animated splash animation, so rather than a static image, you can have it animate into your app.

[00:03:49]
The flash-list which is a more optimized list components if flat list isn't enough. Then there's native-wind, which is like tailwind but for React Native. So we built we used the built-in styles throughout this course, but now that you know the built-in styles, if you would like to step back and use like a tailwind-ish styling system, you could check out Native Wind.

[00:04:15]
And finally, tamagui, I thought was a good example of a styling library and a UI kit. So if you want to use some built-in components with styling, this might be something too worth checking out. Do you have any general best practices for deploying apps for clients to either store or how to manage client apps?

[00:04:34]
Kinda, for client apps make the clients get their own Apple developer and Google developer accounts, 100%. So if you're you could in theory publish something yourself and then transfer the app, but I've personally never done it before, and you just want the client to manage both the expense.

[00:04:55]
You want to make sure that they are creating the app using their own company accounts so they're doing a business account. So definitely get the client to create the accounts and give you the admin user so you can manage the apps.
>> Speaker 2: Regarding the privacy policy like for example does Google write the privacy policy for you or do you have to write your own privacy policy?

[00:05:20]
>> Kadi Kraman: You have to write you own. And I think it can be any URL, so I don't think they check that you own the website other than like a sanity check. So you can just do like a little website or maybe you had like a public notion page, I'm not sure that would work.

[00:05:38]
But it needs to be a published URL, so potentially you could do it on GitHub pages, I've never tried, but it needs to be a public URL, yes.
>> Speaker 2: Do you have any suggestions or techniques for sending out major or minor updates to the app after deployment? Like between EAS and Transporter, is one easier than the other for iOS updates?

[00:06:01]
>> Kadi Kraman: One is not easier than the other, that's all, they do the same thing, to be honest, under the hood. So something that we didn't cover here, but something that you can do, which you can't do with Native apps, is that you can actually deliver over-the-air updates to your apps if it's a JavaScript-only update.

[00:06:25]
So we have a library for that, CS updates, so you might have heard of Codebush from AppCenter from Microsoft. So it is like Codebush, basically, well it is the same kind of concept. So with React Native, because our app is a native app, a JavaScript bundle, then we are able to, in locally, we're developing as we're updating JavaScript bundle on the fly.

[00:06:50]
You can use a similar kinda thing in production, you can swap out the JavaScript bundle on the fly. And that's what ES update does. And this will be Pretty much instant, but it does come with a caveat around you then, as a developer are responsible for not pushing updates that will go against the app store's policy.

[00:07:11]
So technically you could push an update that completely changes your app UI, but if you do that, you are violating the policies for both Apple App and Play Store actually. And if the reviewer spots it, they're likely to ask you to remove all the dynamic updates from your app.

[00:07:32]
So it's kind of fine to use it for, like you mentioned, quick bug fixes if something is really wrong, but it shouldn't be used for like very large updates if you want to make sure you retain the ability to use it in the future.
>> Speaker 2: It's accessibility built in to React Native or are there any best practices for making sure a native app is accessible in the same way you would for a web app?

[00:07:57]
>> Kadi Kraman: That is a really great question. So there are accessibility features built into react native, but they're a little bit hidden. There is a library, React Native AMA. So AMA stands for accessible mobile applications, and it is the only library that I know of that is specifically for accessibility in React Native.

[00:08:24]
It has a bunch of documentation that you can use to reference to like understand what the good practices are, have this website here. You don't have to use this library necessarily, but this is a really good resource to show you what's possible. So for all pressable elements, for example, adding this accessible true accessibility label accessibility hint to make sure what gets read out throughout during a screen reader.

[00:09:01]
But then if you do wanna use this library, it basically wraps the existing components. So you would import these components from React Native AMA instead of React Native, and then it enforces you to write certain accessibility props. And it also highlights if you have a component that hasn't had direct accessibility props set.

[00:09:27]
I think that's pretty much it for me. Thank you very much for joining me on this course.
>> Audience: [APPLAUSE]

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now