Continue yourdetail view by adding all the elements needed to render it properly. Use material kit to give the view a similar look to the initial design.
- [Instructor] Okay, so we have a lot of elements…to add to this file here, so let's get to it.…So, the first thing I want you to do…is completely remove all this,…and then we'll start with the ScrollView.…And the ScrollView is exactly what it sounds like.…It allows us to scroll.…Perfect.…Okay, inside of our ScrollView,…we'll do one prop,…showsVerticalScrollIndicator.…So the second one on my autocomplete.…
And you're going to turn this into false.…So that basically shows or not the scroll on the side.…I don't particularly like it on that screen so I removed it.…So, you can put true if you want,…or simply remove the prop but that's just aesthetic.…We'll add an image.…And then let's just scrolls it right away.…Okay.…So, for the image, the same thing applies.…The one that we've used in the past.…So we need to go ahead and we'll use a different way…of loading the image on this one.…
So, we'll do a require,…and like so, we'll be able to load it.…Make sure you do the extension to it.…Perfect.…And then the style for that image.…
Author
Emmanuel Henri
Released
5/22/2017- Initializing React Native projects
- Projecting a folder structure
- Installing material kit and vector icons
- Coding a login form and a loader
- Setting up Firebase email auth
- Using the React Native debugger
- Creating a list view, a detailed view, and a menu
- Setting up Redux
- Coding the scroll on detail view
- Adding clickable buttons
- Setting up Firebase for the back end
- Creating the new add person form
- Completing functions
Skill Level Intermediate
Duration
Views
-
Introduction
-
Welcome49s
-
-
1. Project Setup and Back End
-
Project folder structure5m 40s
-
Initial Firebase setup5m 18s
-
2. Creating the Login
-
Create login form for user login13m 14s
-
Create our loader5m 41s
-
Render loader based on state3m 42s
-
Finalize login behaviors6m 34s
-
-
3. Redux and Main Views
-
Get started with Redux7m 11s
-
React Native debugger4m 46s
-
Create people list view7m 2s
-
Code the people item view11m 46s
-
Create tab menu11m 44s
-
Initial setup detail view5m 54s
-
Finalize detail view styles9m 34s
-
Debugging session8m 17s
-
-
4. CRUD Operations
-
CRUD: Removing a client10m 49s
-
CRUD: Setting up editing5m 46s
-
5. Company View and Final Touches
-
Code the company list query6m 20s
-
Create company list view6m 8s
-
Final touches11m 14s
-
-
Conclusion
-
Next steps1m 11s
-
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Coding the scroll on detail view