React Native Tutorial Step 30 – Adding Location Fields
Today, we will need to set up our locations, because what's the point of a dance partners app if we don't know where everybody is?
Let's get started.
========================================================
assets/styles.js
========================================================
// Add this
fixedLabel: {
marginLeft: 0
},
========================================================
src/Containers/Search/Search/Search.js
========================================================
Here's what needs to change here:
Delete import * as config from '../../../services/config'
Delete import defaultImage from '../../../assets/profile120x120.png'
Add city and country as new states to keep track of and move the gender state under the country state.
Add a new onCountryChange() handler for the new country state.
Delete all code above the return() in the render function, so that return() is the first line in the render function.
Delete the View block containing {profilePicture}
Add Preferred Location block (for city and country) with a Picker for country and an Input field for city.
========================================================
src/containers/User/Profile/Profile.js
========================================================
And the changes here:
Added address1, address2, city, zip_code, and country to the states.
Add a new onCountryChange() handler for the new country state.
Change from user. → this.state. for address1, address2, city, zip_code, and country in this.props.updateUserAttempt.
Add Your Location block with a Picker for country and an Input field for address1, address2, city, and zip_code.
We define our change handlers within the Input fields for address1, address2, city, and zip_code to reduce the number of handler functions we have to write.
Alright, that's all for today! Quite a bit of coding we've done! You're not burned out yet, are you? 😉
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-30
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!