If you want to render text on the screen, you have to make use of this component. So if we go into our app, you'll see the Vue here, which has a style on it, and we have a nested Text component here. We also have this status bar, which we won't take a look at here, so let me just remove it. And also note that I renamed app.js to jsx, just because it has better support for Emmet. And I also added this prettier.rc file, so I have prettier installed. So let me just save that. Let me hide this, since we're mostly working in the app.jsx file. So for styling, you have to make use of this CSS and JS syntax.

Let me hide this, since we're mostly working in the app.jsx file. So for styling, you have to make use of this CSS and JS syntax. As you can see, this Vue has a styles.container object, which is defined down here. And for the CSS properties, since we're within an object, you have to define them in CamelCase. So as you can see, these properties, backgroundColor, alignItems, and justifyContent are all defined in CamelCase. You can also define inline styles. So if I work to style this text using an inline style, you can just add an object in here. So let's just say color: 'red'. Cool.

So let's say 60, and that should work. If I were to spell it correctly. Cool. So we'll have a lot of practice with styling in CSS, as we are going to style every screen that you saw in the demo app. Let's go ahead and take a look at some of the other components. Let's start with a button here. Pretty self-explanatory. So let's take a look at the example here. So for the button component specifically, they render differently on iOS and Android,

So let's take a look at the example here. So for the Button component specifically, they render differently on iOS and Android, and use the OS default styles. So this is how it looks on Android, even though web is selected, it's similar to how Android looks. And on iOS, it's just colored text. So let's take a look at one of the examples here, let's just grab this and paste it into our code. Let's put it underneath the text here. So we have a title and an onPressListener.

And it looks like there's also some styles. So let's grab the styles. It's right here. They're centering the text and giving it a background color. So let's add that underneath our container. And it also has this onPress handler. You can do it in line like this. But in this case, let's just add a function up here. onPress, let's say alert again, alert, Touchable, Opacity, pressed. Okay.

Okay, let me just reload the app. Okay, now that's installed. We can make use of any SVG that we want. So let me just grab one from Heroicons. Let's just grab, say, doesn't matter actually. Let me just grab one of them here. There is an option for JSX here, but I'm just going to copy the SVG code. And then we can make use of this tool here. Where is it? Right here, react-svgr to convert it correctly.

New file, say, icon-settings.jsx, paste that in. Let's go ahead and import this. Actually, let's just use it here, icon-settings. Okay. And let's make sure to import that. Will this work? There it is. That should have imported it. It did not, so let me just do it manually. Import icon-settings from icon-settings.

It did not, so let me just do it manually. Import icon-settings from icon-settings. Okay. Sorry, should be ./. And we have to change the function name as well. icon-settings, that's why it wasn't recognizing it in my auto-complete. And one more name change down here. Hopefully, this works. So, yeah, that's not rendering correctly because I think we have to add a width and a height.

Let's just add it to our code manually as this one has too many options. So let's just say pressable underneath our touchableOpacity. Pressable. Okay. And let's share the style with our button. So we can say styles.button. And let's also grab the text component here. And let's put it here. Let's say pressable. Okay.

Let's say pressable. Okay. And let's take one of those events. So let's say onPressIn. Let's do both actually. onPressIn and onPressOut. So I'm just going to add them in line here. So let me say onPressIn equals. And for now, we'll just console.log something. Pressing in.

Long press. Okay, let's try this out. Make sure to import pressable. Okay, there it is. So let me just wrap this in a view. Like I said, I make views to wrap other components. I wrapped it in the wrong place. It should be around this whole thing. So let's try that again. view.

So you'll see I'm going to press it right here. And you'll see it still reacts to those clicks or those presses in this case. So yeah, definitely make use of this component. If you need more control. Okay, let's take a look at text input. Which is the equivalent of input type="text" in the browser. So let's just grab this here. This text input. Let's try this out in our application here. Let's put it underneath this view.

Let's try this out in our application here. Let's put it underneath this view. Actually, I'll make another view here. Paste that in. Let's make sure to import text input. Okay, so let's add the styles first. The ones that are here. It's called input. So I'm just going to copy and paste this into our styles. Okay, and we have to add a piece of state for our text.

So I'm just going to copy and paste this into our styles. Okay, and we have to add a piece of state for our text. So it's called text here and I'm going to change this to setText. So let's add text and setText to our state. Let's just say const text = setText and we'll make use of useState here. useState and it's set to an empty string by default. And now as we update our text, this text or this piece of state should be updated as well. Let me just change the width on this text input here. Let me just say width: 300.

Let me just change the width on this text input here. Let me just say width 300. Okay. And it does work cool. Let me just add a text component here underneath. So you can see the input binding working. So we'll say text and we'll say text here. Okay. There we go. You can see a change here change here.

Just go to my device here and then you can scan the QR code and then it will run in the Expo Go app. So back to our app. Let's just paste this data in. Put it right here or underneath the text. Okay, and let's grab the FlatList component here right here. Okay, let's put it underneath our View here. Actually, let's make another one. Okay, so the data it's rendering is this array of data. We just paste it in the renderItem is how each item renders which we'll add in a second. And the keyExtractor is the unique ID.

We just paste it in the renderItem is how each item renders which we'll add in a second. And the key extractor is the unique ID. So let's add this renderItem method. So it's right here. And you can see it's making use of this item component in here, but I'm just going to do it directly in the renderItem method, which I will paste here. So instead of using the item component, we'll just define our own in here. So let's get rid of this. Let's just say view and then within view we'll have text.

So let's get rid of this. Let's just say view and then within view we'll have text. So in this case, we just want to render the title. So item.title. Okay, those that render we have to import flatList. FlatList. So import this from React Native. Try that again. And there is our list. So yeah, pretty simple example,

So I'm going to make use of the Reddit API here. If you're not familiar with the Reddit API, just go to any subreddit. Let's go to aww. And if you add .json to the end, you'll get a list of the posts in JSON format. And I have this plug-in here which allows you to highlight it. So let's quickly do this with a flat list and I'll just make use of fetch here. So we have to add a new piece of state to hold the results from the server. So let's do that. Let's add one called results. And we'll say setResults.

So let's do that. Let's add one called results. And we'll say setResults. And it will be null by default or an empty array actually. Okay, so let's change our flatListData array to results. Okay, that should be empty. Now let's go into our useEffect hook which will run when the screen renders and this is where we'll make our network request. So we'll put it here. useEffect. And let's make sure to import that as well. Okay, you don't need this return.

And let's make sure to import that as well. Okay, you don't need this return and we want it to run when the screen renders and let's just do it directly in here. So we'll make use of fetch. We'll grab that endpoint. So it's reddit.com/r/aww.json. We have to do .then response. We have to change it to JSON. And then let's say results from server. And we're going to set results. And the key I'm interested in,

And then let's say results from server. And we're going to set results. And the key I'm interested in, I already know. So I already inspected this data coming back here. And what we're interested in is the results from server.data.children. Okay, so children are all of the posts. As you can see, it's an array here. And now in our renderItem method, we can change this to item.data.title. Again, if you look here, this is, or one of these is the item. We have data and we have a title somewhere here.

Again, if you look here, this is, or one of these is the item. We have data and we have a title somewhere here. And there you can see the title. So if I did this correctly and save, hopefully this pulls from the Reddit API and it does. Cool. So again, you can style this however you like. If you want to add some padding here or some margin, we can do that here. Let's just say marginTop. Let's just say 10. Cool. And let's also put some padding on the actual flatList. flatList. Let's just add another inline style here.