Users-Demo-React-Native

An experimentation with react native that expands on the react-native 'movies' demo. This is a Work in Progress and I will be adding steps over time.

After going through the tutorial on the React Native site, I thought it would be fun to expand upon it a bit and build a small demo app for viewing users.

I'm using Random API's randomuser.me for generating random users as the data source for my ListView application. It's a pretty awesome resource for some quick fake data.

Running the existing project

If you want to see the final product. Follow the below instructions. If you want to go through the implementation check out the steps section.

1. Clone the repo
2. cd into the UsersDemo folder and run

   npm install
   

3. Navigate to the UsersDemo folder and open the UsersDemo.xcodeproj file.
4. Now once the project opens in xCode, simply select the device you want to run on and hit

   ⌘ + R
   

This will start a development server and the iOS simulator.

####Steps

1. Generate the tutorial project using

   react-native init AwesomeProject
   

2. Wrap the placeholder content in an IOS Navigation Controller using the NavigatorIOS Component

3. Replace placeholder view with a animated loader while the users list is fetched.

4. Create a basic object to fetch and store the data from the Random User API.

   • This object uses the RandomUser API url and fetches 100 users.
   • It has a getter and setter function for the data
   • The fetch function uses promises to set the data once the response is returned from the API.

5. Fetch the users data and render the results to a ListView

   • Added a componentDidMount function that fetches the user store then calls setState to set the result of the fetch to the UserList components dataSource
   • Added a temporary renderUser function to render a ListView row as a simple Text component containing the user's first name for now.

6. Create a row for each user with their picture, name, and address.

   • Added the UserRow Component
   • This componenet is used as the row template for each user that will be populating the ListView
   • Added a capitalized util to capitalize names and addresses.

7. Make each row 'selectable' using the TouchableHighlight Component

   • Added TouchableHighlight to the UserRow Component
   • Added an onPress function to temporarily alert the users's name

8. Navigate to a UserDetail View when a UserRow is selected.

   • Pass an onSelectRow function to the UserRow Component to navigate to a UserDetail View
   • use the Navigator property of the UserList to pass the firstName of the user as the title of the new view
   • Added a UserDetail Component to serve as the view for displaying a user's information.

9. Add the user's image to the UserDetail Component

   • Pass the user object as a property to the UserDetail Component
   • Add a container view to contain the image
   • Style the container and image

10. Add the user's name and address to the UserDetail Component

    • Add a new container to the UserDetail Component to hold the name and address.
    • Positioned the container using flexDirection: 'column' so it appears below the image.
    • Added some padding to the overall container to position it just below the navigation header.

11. Add a basic TabBarIOS Component for showing more info later.

    • Added a new InfoTabs Component that contains a TabBarIOS Component
    • Added some placeholder tabs for now that will later be used to show more detailed information about the user
    • Added some container views around the different components of the UserDetail Component

12. Add the proper tabs and icons to the InfoTabs Component

    • Added PNGs from Ionicons the icon font set from The Ioncic Frameword
    • Scaled the PNGs to support all iOS displays
      • 40 x 40 for 1x
      • 80 x 80 for 2x
      • 120 x 120 for 3x
    • Added the PNGs to the Images.xcassets via Xcode
    • Added references to them from the TabBarIOS.items

13. Add an onPress function to select the proper tab

    • Added an onPress function to the TabBarIOS.items in the InfoTabs Component that calls setState on the selectedTab state in order to change the selected tab appropriately

14. Add the detailed information for each Info Tab

    • Pass the user object as a property to the InfoTabs Component and add the propTypes property.
    • create a render function for all of the different Tabs
    • set the result of the render functions as the view for each TabBarIOS.Item
    • None of these are styled yet. That will come later.

15. Replace the font throughout the app and some style changes for the User Detail View.

    • Switch the font throughout the app to 'AvenirNext-Regular'
    • Moved the user detail info into a 'card'
      • Styled the card

16. Fix styles to fit all iPhone sizes.

• Added Gertjan Reynaert's nice npm module called react-native-device
• Moved UserDetail image out into a ResponsiveImage Component
• Added background image for the UserDetail view