This lesson is for PRO members.

Unlock this lesson NOW!
Already subscribed? sign in

React Native: Complete the Notes view

2:38 React lesson by

In this final React Native lesson of the series we will finalize the Notes view component and squash a few bugs in the code.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

In this final React Native lesson of the series we will finalize the Notes view component and squash a few bugs in the code.

Avatar
Philip

A good series, thanks Tyler.
Can you point me in the direction of some good resources for continued react-native learning, specifically completing an app to a finished standard and deploying? Cheers :)

Avatar
Zach Guo

any plan on creating a course for flexbox?

Avatar
Tyler

I've thought about it. If no one does it in the next few months I'll give it a shot.

In reply to Zach Guo
Avatar
Amit

Great series Tyler!

I'd also love to see something on doing an actual deployment.

Doing more sophisticated touch gestures and accessing native components like the camera would also be great topics.

Avatar
Kelly

Really great intro Tyler. Just the right amount of basics with common features most apps need. Thanks.

Avatar
n7best

Great series, Tyler!

Avatar
Kamuela

Facebook seems to be explicitly recommending against NavigatorIOS now. What are your thoughts on continuing to use it? And also, I am managing state with Redux and wondering the best way to keep my routes part of app state.

Avatar
Tyler

I actually use (React Native Router Flux)[https://github.com/aksonov/react-native-router-flux] for my router implementation at my full time job. I like it a ton more than NavigatorIOS or Navigator. The reason I chose NavigatorIOS initially was because at the time Facebook wasn't partial to either router implementation.

In reply to Kamuela
Avatar
Alain Armand

Great course. Great teacher. Thank you.

Avatar
carllippert

Isn't renderRow supposed to take more arguments? I have been trying to implement renderSeparator instead of just having the separator as part of render row and ran into warnings about setting keys. I think because I am only passing one argument to renderRow and the separator then doesn't know when it should render. Does that sound right? Is there a very good reason to use renderSeparator instead anyways?

In reply to egghead.io
Avatar
Joe Seifi

Just finished this course, Thank you!

One gotcha is that you need to enable "Allow Arbitrary Loads" in your Xcode project to get the Firebase response to work now.

See http://stackoverflow.com/a/38587838/2055984

Avatar
Daniel

Since there is no sign-in for this application, you'll need to adjust the Firebase read/write rights to allow for anyone to be readable/writeable.

{
"rules": {
".read": true,
".write": true
}
}

Avatar
Iteam

How do I get this working on Android, what code should be in my index.android.js?
The NavigatorIOS will obviously not work, so I must substitute it. What's a recommended way?

Avatar
Ahmed Khaled A. Mohamed

This is my effort to extend the github notetaker app. I updated the code to support latest versions of React and React Native, I also extended the app to use react-navigation which the latest navigation library supporting both iOS and Android. I added Redux to manage the store and used Redux-Sagas to handle asynchronous fetch of data. I would appreciate it if you check it out and give it thumbs up if its helpful. I will continue extending to support more features.
https://github.com/ahmedkamohamed/react-native-navigation-redux-sagas

We finished our notes component. The very last thing we need to do is go back to our dashboard and tie it to this button. The first thing I'm going to do is I'm going to acquire our notes component. Then, in here, you might remember that our notes is expecting to receive userInfo and some notes.

What we need to do is we need to grab those notes before we take the user to this route. We're going to do api.getNotes. We're going to pass it the user name. Then, that will return us a promise with the response of the data. Then, what we're going to do is we're going to just check to make sure this is the thing.

We're going to say res=res or if that's not true, then we're just going to make an empty object. This will help us if we have no notes. It's not going to error out because our list view is expecting to receive an object whether that's empty or whether that's not. We just have that checked.

Then, what we can do is as we've always done. Go to our new component. The component is going to be, notes. The title is going to be, notes. The properties we're going to pass to it is, notes, which is our response, and userInfo which we're getting from the .props.userInfo.

Now that that's done, let's go ahead and double check that this is all working. I fixed a few bugs. We had a semicolon in this object right here and then React wasn't capitalized. Also, you'll notice, and I've done this quite a bit because I forgot to return something from render, so we're just going to throw this into here.

Now, let's check where we're at. We're going to recompile, search for the user name. Good so far. There we go. Let's go ahead and add first note.

There were go. That's our error. This needs to be renderRow and not just render. Now let's try it. We search for a username, a few notes. There we go. Our setting's working. We can add a new note. There we go.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?