Complete the Notes view in React Native
In this final React Native lesson of the series we will finalize the Notes view component and squash a few bugs in the code.
[00:00] 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.
[00:23] 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.
[00:45] 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.
[01:03] 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.
[01:30] 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.
[01:54] 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.
[02:08] 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.
any plan on creating a course for flexbox?
I've thought about it. If no one does it in the next few months I'll give it a shot.
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.
Really great intro Tyler. Just the right amount of basics with common features most apps need. Thanks.
Great series, Tyler!
Thank you!
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.
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.
Great course. Great teacher. Thank you.
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
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
}
}```
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?
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
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 :)