Basic React Native Components

[00:00:00]
>> First off, let's look at what a component looks like. If you're already familiar with React, this will be super familiar with you. But if you're less familiar with React or you've never used it, we're just going to recap. This is an example of a React component as you will find them on the web.

[00:00:18]
Let's look at this in detail. First, we have the React input with the other constant function, and then we got an export. Notice that here we're using a div. And this looks suspiciously like HTML on the web, it's actually what's called JSX, which stands for JavaScript and XML.

[00:00:36]
But you can pretty much think of it as HTML that you can write JavaScript in. It's really handy because you can make your code completely dynamic. The React import, you'll notice that we're not actually using React inside this component anywhere. But as a rule of thumb, if you're using anything that has these tiny braces, just JSX, they'll have to import React.

[00:01:02]
Now let's look at the corresponding React Native components. They're actually pretty similar. But one thing that you might notice as a difference is that we have these new components view and text, which we import directly from React Native. Now, one difference between React and React Native is that whereas in React we have some JSX elements that are the same as HTML elements like the p tag or div or span or button.

[00:01:34]
We'll have them available just magically globally. Whereas in React Native, every single thing has to be imported. The other thing we'll notice is that we've used a view here for a container. And then, we have this text component which doesn't exist on the web. In React Native, whenever you want to display any text, it has to be wrapped inside a text elements otherwise, you'll get error.

[00:01:58]
If you've done old timey programming, where you had this MVC patterns, and you might be used to thinking of views as these one big container component or a single page. This is not actually the case, you can pretty much think of use to be equivalent to divs on the web.

[00:02:17]
You can use them for containing things, for positioning, for anything. You don't need to worry about using too many div elements as well. Because React Native, in a compile step, automatically compresses two divs that don't have any visible styles. Now we're going to introduce three components, we've got our view which is basically like a div.

[00:02:42]
We've got a scroll view, which is a div, but it scrolls. So content doesn't automatically scroll in React Native. If there's anything that needs to have the scroll action, need to use a scroll view instead of a view. And finally, a text, a text component is used for displaying any text and or text.

[00:03:00]
If you don't use a text element, you put some text and you get an error. Right, well let's get coding. So regardless of whether your using Expo or not, go into your App.js. And then just delete everything and you get an error. I'm gonna start from scratch. First thing we do is we import React.

[00:03:24]
This is basically the first thing you do in every single React component. Now, what we're going to do is we're going to import the React Native elements that we're going to use. We're going to import view and text from react-native. Now I always use constant functions, especially nowadays when there's no need for cost functions.

[00:03:49]
So let's do a new const called App. So this is basically the template for a const. And now the next thing I usually do is I also export it, export default App. Right, so now we've got a little template, but nothing, still rendering, and that's because we haven't actually added anything visible here.

[00:04:15]
Let's do a return, and let's return a view. Inside that view, you can see that there's already no error which is great. We'll add a text, with some Hello world! Now, notice that this text gets bended way at the top of the screen. This is not what we want.

[00:04:41]
And you might be tempted to add some padding at the top of the screen to get around this. But that's actually not a great thing to do. Because this will work on this iPhone 11 emulate, what we have but what about if you're using Android? Let's see how this looks on Android as well.

[00:04:58]
Yeah, so in Android, it doesn't actually look that bad because the screen starts from the top. But thankfully, there is a component that helps us get around this it's called SafeAreaView. So let's import the SafeAreaView as well. And then let's just wrap the whole thing, oops, in a SafeAreaView, cool.

[00:05:25]
And you'll notice that the content automatically gets rendered just below our notification bar. And in Android, it already worked so there's no change. And you know how I said that you have to use a text element to display text? Now let's see what happens if you don't. React Native will immediately tell you that you're doing something wrong.

[00:05:53]
The error messages in React Native are actually really good. So if you end up getting an error, just reading the error message usually guides you to the solution.