React Native Tutorial Step 31 – Adding the Search Results Screen
What's the point of adding a Search Form if we can't show any results? Well, that's the topic of today's tutorial. We are going to add a SearchResults screen. FINALLY!
We need to make some additions to the styles.js first.
After that, we need to make the following changes to Search.js.
========================================================
src/containers/Search/Search/Search.js
========================================================
Okay, this is going to be scary because there are SO MANY changes here. But, let's go through them one by one:
Removed import statements from react-native, expo, ../../..services/api/constants, ../../../data/users/api.
Removed from import statements Label, View from native-base and Field from redux-form.
When defining our initial states in our constructor(), the following will now be empty strings: lf: "", dance: "", min_age: "", max_age: "".
Following handler functions added: onSocialChange(), onPerformanceChange(), onCompetitionChange(), and onTrainingChange().
getGoals() and submit() functions added for the search form.
Make sure you got that "Preferred Location" block.
Add the onPress() functions for the new handler functions you added in the goals Checkboxes.
In the Search button block get rid of the values parameter.
Get rid of the sanitizedInitialValues() function.
We're going to add some placeholder values for our pickers next, so here are all the changes:
For gender, use the placeholder Picker.Item label="I would like my partner to be:"
For body type, ethnic, drinker, smoker, and relationship status, use the placeholder Picker.Item label="No Preference"
JOIN OUR MAILING LIST TO GET THE FILE:
========================================================
src/containers/Search/Search/SearchResults.js
========================================================
OK, EASY CHANGES FOR Dances.js
========================================================
src/containers/User/Profile/Dances.js
========================================================
Like what we did in Search.js:
Removed import statements from react-native, expo, ../../..services/api/constants, ../../../data/users/api.
Removed from import statements Field from redux-form.
AND EASY CHANGES FOR Profile.js
========================================================
src/containers/User/Profile/Profile.js
========================================================
Like what we did in Search.js and Profile.js:
Removed import statements from react-native, expo, ../../..services/api/constants, ../../../data/users/api.
Removed from import statements Field from redux-form.
Finally, the last changes for today's tutorial...
========================================================
src/router.js
========================================================
As usual, since we added a new screen, we must be able to get to it. We're going to add SearchResults to the router.js right now to test it, but we'll remove it later because the only way to get to SearchResults should be through the Search form.
MAN, THAT WAS A LONGASS TUTORIAL! Thanks for keeping it together with me. I'll try to make the next one shorter! 😉
Don't forget to join the mailing list and our facebook group below if you need some programming help or some accountability partners (And access to our files used in this tutorial series)!
Accompanying medium article: / react-native-tutorial-step-31
Don't forget to like, comment, and subscribe!!!
========================================================
Reference Links
========================================================
None!
========================================================
Connect with me!
========================================================
Linkedin: / donaldlee50
Instagram: / donlee50
Twitter: / donaldlee50
Youtube: / coursehack
Mailing List: http://bit.ly/coursehack-mailing-list
Coursehack's Facebook Group: bit.ly/join-coursehack-facebook-group
========================================================
What You're Making - Dancingnomads App
========================================================
Web: https://dancingnomads.com
iOS App (help give it 5 stars?): http://bit.ly/dancingnomads-for-ios
Android App (help give it 5 stars?): http://bit.ly/dancingnomads-for-android
Don't forget to like, comment, and subscribe!