ALL 24 React Native Components Explained In Less Than 9 Minutes

so this is going to be a video that i wish was created when i started react native i'm going to go over every single react native core component talk a little bit about what it is and then a little bit about how i use it i think this is going to be great for those of you guys who are new to react native but i think it will also be useful for those of you who are more experienced it might be a bit of a refresher and learn about maybe some components that you don't use regularly so let's start with the king of all react native components the fundamental building block of all your interfaces the view component the view component maps directly to the native view on whichever platform you're using you can use it directly or you can build you know custom views on top of it if you're familiar with web development this is the div of the react native mobile world the next component is the text component which is also a foundational component and you use it anytime you want to display any type of text within your app so you can't display text in a view it has to be in a text component in the text inside of a view you can use this directly or you can you know create your own kind of wrapper component around the text and that's typically what i do i have a generic you know main text component that has specific styles for my app that i want all the text to match and that's what i use the text input component is how users input text into your app and it comes with a lot of great properties like auto correction you know placeholder text things like that the text input value is always a string so if you need to get numbers from the user then you're going to have to parse that number from the string okay scroll view if you're building for the web scrolling is automatically applied to any content that's longer than the screen but that's not true on mobile so if you don't use a scroll view and you have a view that extends off the screen that extension off the screen is just not going to be accessible at all skull view is very customizable but it renders everything inside of it all at once so if you have a huge list of items inside your scroll view you're going to run into performance problems and that's when you want to use a flat list flat list is very customizable you pass in data and then you define how each item in the list is going to look and interact you have props for components for headers footers or you can show a component the list is empty the flat list will automatically update every time your data prop changes it's a shallow quality check if you need another way to update your flat list there's a prop called extra data and any time that prop changes that will also update your flat list flat list is good for most use cases but if you need better performance check out recycler list view from flipkart you also have section list which is very similar to flat list but then your list of data is organized into sections and each section can have a section header so a good example is a contact list where you have a big list of names but then you section it into alphabetical order so you'll have a section of a's and then a section header of like the letter a to group those together there's the activity indicator which basically just you know displays a loading indicator animation it's very limited you can only really customize it by saying two sizes small or large and then the color the image component is for showing an image image background just a basic way to you know display the whole background image if you worked on the web i'm sure you're familiar with background images keyboard avoiding view this can get tricky if you've never developed for mobile before when the keyboard opens up on the phone it covers a large surface area so you need to adjust your view so the input is still visible this functionality is already built into android but there's nothing like that in ios you have to handle it yourself the thing is this keyboard avoiding view doesn't work well with lists you're going to have to either use an open source library or implement your own keyboard avoiding view for lists the modal component ship with react native is a pretty basic component i doubt you'll end up ever using it because you'll probably use whatever modal is baked into the navigation library you choose so if you don't know react native doesn't come with a navigation library you have to pick one there's also open source modal libraries if you need something a little bit different refresh control use inside a scroll view or list so you can have pool to refresh safe area view adds extra padding around your views for things on ios like the camera notch or rounded corners for this just wrap your top level view in it status bar controls the status bar in your app you know just your basic boolean switch component i think typically you're going to build your own switch on top of this um that's what i do or if you use some kind of ui library they'll all have some type of customizable switch component in there so let's talk about handling touches touchable highlight allows you to handle user touches and when it's pressed it allows the the underlay color to show through i usually just use touch bowl basically i never really use touchable highlight touchable opacity also for handling user touches and then it has a built-in opacity dimming whenever the button is pressed this is what i have been using for a long time and sometimes i use this component directly but i also have a couple buttons that i built myself that i reuse throughout all the app and that's a nice way to get you know consistent style across all the different screens and components you're using there's also touchable without feedback so it has no built-in feedback it doesn't change the opacity it doesn't allow color to show through there's just no feedback whatsoever if you do use this component make sure you build some type of like feedback into it because uh you know all elements that respond to presses need to have some kind of visual feedback so there's the new pressable component which if you're just starting a new app it's probably better to use pressable over the three touchables i just mentioned the pressable component is one of the newest components from react native and i did a short video about that if you're interested you can check it out but basically it's going to replace the three existing touchable components there's a built-in button component it's it's super basic so if you just need something real quick to play around with but uh i can't imagine very many you know real world apps using the button component because it just doesn't allow much customization and then we have virtualized list i don't think you'll ever use this directly it's the base component for flat list and section list really all you need to know is the virtualization just improves the performance and memory consumption okay let's talk about some platform specific components so droid layout android pops a little menu from either the left side or the right side of the screen i think typically you'll probably use a drawer menu from within whatever navigation library you're using rather than using this directly then there's touchable native feedback which responds to touches on android and uses a kind of ripple effect you know and as with the other touchables i would just use pressable instead pressable actually has a property to enable the ripple effect on the pressable component i learned that from somebody commenting on one of my videos so that's awesome the last component is an ios only component called input accessory view and what this does is it it puts a view up on top of the keyboard so you can have like you know an extra input on top of the keyboard or a row of emojis or you know kind of just anything you want but it's only on ios and that's it guys that's all the react native components a little bit about what they are a little bit about how i've grown to use them over the past few years if you have any questions you know just let me know i'll try to answer them thanks for watching

Channel: Jimmy Cook

Views: 11,365

Rating: 4.9740262 out of 5

Keywords: react native, programming, coding, tutorial, app, app development, ios, android, cross-platform, guide, javascript

Id: -d3ti_YW-OM

Length: 8min 49sec (529 seconds)

Published: Fri Aug 14 2020

Reddit Comments

[u/boynamedtom]

SafeAreaView is also platform-specific to iOS and doesn't 'respect' padding, as it adds it's own. I've botched screen layouts in the past with it :cool_crying:

[u/kex_ari]

Awesome vid. Thanks for this.