React Native, v2

Wrapping Up

Kadi Kraman

Kadi Kraman

React Native, v2

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

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

Kadi reviews what was covered in the course, and points students to more exercises and additional resources to explore next.


Transcript from the "Wrapping Up" Lesson

>> And now we've reached the end of the very long list of things that we set out to do, which is pretty cool. I know it started off pretty slow, and then it kind of exponentially grew. And well, that's the case with everything. So just a recap on some of the things that we learned.

We learned about what is React Native and what problem is it solving. We learned about what's the difference between Expo and plain React Native. We looked at how we can debug our code. We had a very quick intro into React. We looked at how to style components using the style sheets, and without.

We looked at component-based architecture in React Native applications. We looked at how to display lists in a mobile optimized way using FlatLists and SectionLists. Looked at what navigation options are available for React Native, and we wired up React navigation. For the React Native-specific parts, we looked at how to actually install native modules.

We covered the main three React hooks. We looked at how to fetch data from network requests. We added a pull to refresh to our FlatLists. We looked at launching a modal, and we had an overview of how to build forms. So that is a huge amount we covered.

I'm very proud of us. It was actually very difficult for me to put together this course. Because as I was adding things, I found a million other things I wanted to add. But unfortunately, I can't keep everyone around for hours and hours on end. And so I've added just a couple of ideas that what you might want to look into that I really wanted to cover today, but it just didn't fit in.

One of the main things that I was really ashamed to have cut from this course was animation. Honestly, animation could be a workshop on it's own. Because you can't do CSS animations and React Native, animation is done using an animation prop that's built in. And you actually have to check the values that do the animation.

So there's actually a lot that goes into that, it's quite an advanced topic. And I couldn't really figure out a way to just have a small amount of animation in that in a meaningful way. So that's something to look into if you're interested. There's the animated API, which is built into React Native.

And if you're interested in pure native animations in a library that's like already existing, you can check out Lottie. Which is from, it's in React Native community now. It's by Airbnb, but basically it's very pretty animations in React Native. The other thing that I just really wanted to mention Is about images.

So React Native has an image component that's built in, but it's really not very optimal. And that's another one of the things that is in there because you should be able to display images. But Facebook themselves don't use it, so they don't really spend much time optimizing it.

So most React Native applications actually end up using something like React Native Fast Image. Because the image component that's built into React Native doesn't really do any caching, and it's not really optimal for sustained applications. The other thing we kinda looked into what we didn't actually add, is a bottom tab navigator.

Obviously most mobile applications will have bottom tab navigation. But we ran out of time and features to add it. So that's something to check out, and there's some documentation for it here. There's also React Hook that I actually use very often day to day. But I didn't really feel like there was any need to add a fourth one, cuz there was already an information overload.

So you should really check out useMemo, which is a really handy function for creating memoised values which are dynamic. There's also a couple of topics that I added here under extra credit that you could check out on your own time. If you're using, especially if you did this workup workshop with Expo, you could have a look at ejecting from Expo.

So basically what you do is you go to your Expo project and you run expo eject. And what this does is it converts your Expo project into a React Native project. So the folder structure will actually end up looking exactly like mine. So you'll have the Android folder, iOS folder, and you'll have to figure out how to manage the application yourself.

The other thing that you could look into his platform-specific code. So most of the time, we really want to just have our one code base stream. But sometimes it's just not possible. So there are a couple of really nice built-in ways that you can toggle things between platforms.

You can either have an individual parameter that's conditionally rendered. Or you can just have a whole file where, on Android picks up one, and on iOS the other. And finally, if you are serious about React Native, and you're going to go to production, there is some security concerns that you should probably look into.

Just to be aware of the common misconceptions. So here are some, this is actually a copy of some security documentation that I wrote for the React Native docs that is currently in a PR. But I've copied it here for convenience. And once he gets merged, I will just link to the official documentation.

Some other advanced topics that you might want to consider. You could look into CodePush. CodePush is basically a tool that allows you to do over-the-air updates for you deployed app. It's kind of what Expo does, but you manage it yourself. So you have your Native app in the App Store, and people have it on their phone.

And then rather than them having to go to the App Store and update, you can send the updated JavaScript bundle over the air to them. So it would be more like web update, which is pretty cool. I added two testing libraries to React Native. So Detox is the go-to library for interim testing.

You can write tests in JavaScript, so it's quite nice for very new developers. And then for unit testing, if you test anything with the actual React components, React Native Testing Library is pretty handy. And finally, for automating the building and releasing of your apps, Fastlane is a cool thing to check out.

Because it manages some of the more difficult things like credentials and keys on the store.
>> I noticed there's two different React Native testing libraries. There's one that has an owl for a logo and another one that's a whale. [LAUGH] You linked to the owl one, but did you have any opinion, or do you know that there's another one with the same name?

>> Do you mean the native testing library?
>> There's one at
>> Yeah, I think it's this one. So I have used React Native Testing Library, and I've had good results in there, which is why I clicked on this one. Thank you so much for taking the course.

Really my goal today was just to show you how I build things. My goal was to Google things, look at the documentation, and then just write things from scratch the way I write them day to day. So I hope it was useful for you, and you'll be building lots of awesome apps using these tools.

Thank you very much.

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