From the course: Create a CRM Mobile Application with React Native (2019)

Create people list view - React Native Tutorial

From the course: Create a CRM Mobile Application with React Native (2019)

Start my 1-month free trial

Create people list view

- [Instructor] Over in the next few videos, we're going to start creating new views of our application, including a people list, people item, task bar, navigation, et cetera. So let's get to it. So the first thing we're going to do is get back to VS code, and in the components section or folder, create a brand-new component. So let's go ahead and create a new file, and we're going to call this one PeopleList.js. And then inside of that component, we're going to import react, and component. This is no different than working into our react component. And now we're going to need a few things from react-native, so I'm going to import View, StyleSheet, and then Flatlist, and then just a little tip. If you want to make sure that you're importing the right stuff here, always do the From first. So let's go and do react-native, and then what you can do, and let me just close the Explorer to get a little bit more screen estate, so if you're starting to work on something like StyleSheet, then you're going to see what's available inside of that particular library. So this is a little tip if you want to make sure you're importing the right stuff. So let's do for an example react-redux, which we're going to need, and then, here, you can do the, and then start typing. We have connect available, then we can use it. And then what we're going to do is import PeopleItem, which we'll create very soon, and we may actually copy a lot of the code that we have on this physical page here, so then, let's create our styles, and then use StyleSheet.create, which is a function, which takes an object, and then you create styles. But let's put that aside for a second, and then continue creating our class. PeopleList extends Component and then let's put the render Method, and then we're going to jump through that class to create the rest, because I want to make sure that I'm leveraging some of that code to quickly create the peopleItem as well. Okay, so we got that, and now because we're using redux, we need to map our State to the Props, like so. And this is something that comes from redux, we're going to leverage the state, which is a function, and then return the people and then grab state.people. So what's happening here, we're returning the state, the list of people that we got in our state, so if we go back to React Native Debugger, in our State, we have these people here. So what we're going to do is leverage the State, and then map our props of this particular component to the people in the state. Therefore now we can use it in this particular component. So this is how you use redux in an application so you don't have to pass down the props from the state or the top level state or the top level component, all the way down to its children. So now let's export default, and then connect with redux mapStateToProps to PeopleList, so we have them available here. So we just created this function here, but it's not executed yet. So now using our leveraging connect here from react redux, we're mapping the State to the Props, and running this function to PeopleList, and now we have them available in this component. So let's copy all that, so I'm going to highlight, Copy, and then quickly Create the other components, so let's go ahead and Create PeopleItem.js, and then Paste this here and then just change PeopleItem and then let's remove PeopleItem, like so, and we may not need the rest, but let's just use this for now. It's quite possible the application's going to crash because we haven't passed or done anything in here in PeopleItem, but I just wanted to create it to be able to use it, or leverage it in this particular Component here. So now, in our View, in which we're going to pass the styles.container, and we'll create that in a second. We're going to leverage Flatlist, and let's make it a little close in one, like so. A Flatlist is the React Native Component that takes a prop called data, and inside of data, we can pass this.props.people, which we already mapped with our connect function here, and then render, it takes another prop, which is renderIten and this basically returns an Item, multiple times as many times as there is Items in people. And we're going to do item, and then use PeopleItem, and then inside of that one, I'm going to just close this, we're going to pass people as a prop and pass item. And let me briefly explain what's happening here, before we move on. So, this Flatlist will return as many times as we have people in our list, so in this case, we have three people, and render, this component, PeopleItem, and then pass that single item here, inside of a people prop. So if we have three people, this is going to run three times, while this component's going to run three times, with the data that we have, from our State here. And this is how we're going to create a list with the Flatlist component. So I'm going to save this, most likely this is going to crash the application, and it's still working because we haven't yet put the peoples list inside of our main App component, so that's why it's working. Okay, so now, let's go and continue working on our peoples component, so the next one we're going to be working on the peopleItem view.

Contents