Code challenge

.buckconfig

@@ -0,0 +1,6 @@
+
+[android]
+  target = Google Inc.:Google APIs:23
+
+[maven_repositories]
+  central = https://repo1.maven.org/maven2

.eslintrc

@@ -0,0 +1,45 @@
+{
+  "env": {
+    "node": true,
+    "browser": true,
+    "es6": true,
+    "jest": true,
+    "react-native/react-native": true
+  },
+  "parser": "babel-eslint",
+  "plugins": ["react-native"],
+  "extends": ["airbnb", "plugin:prettier/recommended"],
+  "rules": {
+    "complexity": ["error", 7],
+    "react/jsx-closing-bracket-location": 0,
+    "react/jsx-closing-tag-location": 0,
+    "react/jsx-curly-spacing": 0,
+    "react/jsx-equals-spacing": 0,
+    "react/jsx-first-prop-new-line": 0,
+    "react/jsx-indent": 0,
+    "react/jsx-indent-props": 0,
+    "react/jsx-max-props-per-line": 0,
+    "react/jsx-one-expression-per-line": 0,
+    "react/jsx-tag-spacing": 0,
+    "react/jsx-wrap-multilines": 0,
+    "react/jsx-props-no-multi-spaces": 0,
+    "react/self-closing-comp": 0,
+    "no-use-before-define": 0,
+    "import/no-cycle": 0,
+    "import/no-extraneous-dependencies": 0,
+    "no-restricted-properties": [
+      0,
+      {
+        "object": "Math",
+        "property": "pow"
+      }
+    ],
+    "no-useless-constructor": 0,
+    "react-native/no-unused-styles": 2,
+    "react-native/split-platform-components": 0,
+    "react-native/no-inline-styles": 2,
+    "react-native/sort-styles": 0,
+    "react-native/no-color-literals": 2,
+    "react-native/no-raw-text": 0
+  }
+}

.flowconfig

@@ -0,0 +1,75 @@
+[ignore]
+; We fork some components by platform
+.*/*[.]android.js
+
+; Ignore "BUCK" generated dirs
+<PROJECT_ROOT>/\.buckd/
+
+; Ignore polyfills
+node_modules/react-native/Libraries/polyfills/.*
+
+; These should not be required directly
+; require from fbjs/lib instead: require('fbjs/lib/warning')
+node_modules/warning/.*
+
+; Flow doesn't support platforms
+.*/Libraries/Utilities/LoadingView.js
+
+[untyped]
+.*/node_modules/@react-native-community/cli/.*/.*
+
+[include]
+
+[libs]
+node_modules/react-native/Libraries/react-native/react-native-interface.js
+node_modules/react-native/flow/
+
+[options]
+emoji=true
+
+esproposal.optional_chaining=enable
+esproposal.nullish_coalescing=enable
+
+module.file_ext=.js
+module.file_ext=.json
+module.file_ext=.ios.js
+
+munge_underscores=true
+
+module.name_mapper='^react-native$' -> '<PROJECT_ROOT>/node_modules/react-native/Libraries/react-native/react-native-implementation'
+module.name_mapper='^react-native/\(.*\)$' -> '<PROJECT_ROOT>/node_modules/react-native/\1'
+module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> '<PROJECT_ROOT>/node_modules/react-native/Libraries/Image/RelativeImageStub'
+
+suppress_type=$FlowIssue
+suppress_type=$FlowFixMe
+suppress_type=$FlowFixMeProps
+suppress_type=$FlowFixMeState
+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native\\(_ios\\)?_\\(oss\\|fb\\)[a-z,_]*\\)?)\\)
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native\\(_ios\\)?_\\(oss\\|fb\\)[a-z,_]*\\)?)\\)?:? #[0-9]+
+suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
+
+[lints]
+sketchy-null-number=warn
+sketchy-null-mixed=warn
+sketchy-number=warn
+untyped-type-import=warn
+nonstrict-import=warn
+deprecated-type=warn
+unsafe-getters-setters=warn
+inexact-spread=warn
+unnecessary-invariant=warn
+signature-verification-failure=warn
+deprecated-utility=error
+
+[strict]
+deprecated-type
+nonstrict-import
+sketchy-null
+unclear-type
+unsafe-getters-setters
+untyped-import
+untyped-type-import
+
+[version]
+^0.105.0

.gitattributes

@@ -0,0 +1 @@
+*.pbxproj -text

.gitignore

@@ -0,0 +1,59 @@
+# OSX
+#
+.DS_Store
+
+# Xcode
+#
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+
+# Android/IntelliJ
+#
+build/
+.idea
+.gradle
+local.properties
+*.iml
+
+# node.js
+#
+node_modules/
+npm-debug.log
+yarn-error.log
+
+# BUCK
+buck-out/
+\.buckd/
+*.keystore
+!debug.keystore
+
+# fastlane
+#
+# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
+# screenshots whenever they are needed.
+# For more information about the recommended setup visit:
+# https://docs.fastlane.tools/best-practices/source-control/
+
+*/fastlane/report.xml
+*/fastlane/Preview.html
+*/fastlane/screenshots
+
+# Bundle artifact
+*.jsbundle
+
+# CocoaPods
+/ios/Pods/

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "printWidth": 100
+}

.watchmanconfig

@@ -0,0 +1 @@
+{}

QUESTIONS_ANSWERED.md

@@ -0,0 +1,18 @@
+## Please answer the following questions once you finish codding:
+
+A) Describe the strategy used to consume the API endpoints and the data management.
+
+- API was consumed in the simplest way. First of all I queried the first API (Cocktail_glass) the get the main
+  information, then I requested the details for each of the cocktails using the Id.
+
+B) Explain which library was used for the routing and why. Would you use the same for a consumer facing app targeting thousands of users? Why?
+
+- The library I used for routing is named `react-navigation` [check here](https://reactnavigation.org/). This library is easy to use and quite straight forward to setup also is highly used and have great support, other than that is what `React Native docs` recommends. I would use it for large applications without any complication.
+
+C) Have you used any strategy to optimize the performance of the list generated for the first feature?
+
+- The first strategy I used was implemeting `FlatList` over `ScrollView` due to `FlatList` component gives a better render performance when rendering lists, other than that, I implemented `getItemLayout`property to enhance a bit more the performance by allowing skipping the measurement of each Card rendered inside the `FlatList`.
+
+D) Would you like to add any further comments or observations?
+
+- Interesting challenge full of tricks by how API is designed.

README.md

@@ -1,107 +1,30 @@
 # RN-Code-Challenge
+React Native Solution for buoydevelopment challenge.
 
+ ## Before we start
 
-## Instructions:
+ Please make sure you have `node`, `npm`, `git`, `cocoapods` installed correctly. In case you don't have any of those installed and setup, please go to [nodejs.org](https://nodejs.org/en/) to download and install the **Recommended For Most Users** version, or go [here](https://git-scm.com/downloads) to download `git`. `cocoapods` can be set up following this [link](https://facebook.github.io/react-native/docs/integration-with-existing-apps).
 
-Please clone the repository, complete the exercise, and submit a Pull Request for us to review! If you have any questions, you can reach out directly here or leave comments on your PR which we will respond to. Remember, all instructions for running the application (including installing relevant libraries, etc.) should be included in the README. 
 
+ ## Setup
 
-## Delivery Steps: 
+ ### React Native
 
-1. Create a branch from `master` named `base` and push all the third-party code needed (Libraries, Frameworks, etc.).
-2. Create a branch from `base` named `code-challenge` and push your own code (Remember to update the Readme file providing any instructions on how to run the project if needed).
-3. Create a Pull Request from `code-challenge` to `base` for us to review.
+ Please refer the [React Native docs Getting Started guide](https://facebook.github.io/react-native/docs/getting-started) over the **React Native CLI Quickstart** tab. There, you can see all the detailed setup processs for `Android` and `iOS` platforms.
 
+ ### This Project
 
-## Please answer the following questions once you finish codding:
-
-A) Describe the strategy used to consume the API endpoints and the data management.
-
-B) Explain which library was used for the routing and why. Would you use the same for a consumer facing app targeting thousands of users? Why?
-
-C) Have you used any strategy to optimize the performance of the list generated for the first feature?
-
-D) Would you like to add any further comments or observations?
-
-
-## Overview:
-
-Implement a simple mobile cocktails catalogue (master / detail). The catalogue consists of a table view list of cocktails with their name, toppings and photo. Once the user taps on a specific row it will push a new screen with that drink’s details: Name, Photo, Ingredients and Preparation.
-
-
-## Requirements:
-
-1. Use the React Native CLI to create the application (The Expo CLI is not allowed).
-2. Use Redux as the state container over other options like React Context in order to manage the data flow on the app.
-
-
-## Features:
-
-**1. Cocktails list:**
-
-For each row of the list it will display the Cocktail name, photo and ingredients (See wireframe 1). 
-In the case where there are more than 2 ingredients, add a label that reads "y X ingredientes más" where `X` is the amount of extra ingredients.
-
-The API endpoint that has the list of drinks with Name and Photo is: 
-
-http://www.thecocktaildb.com/api/json/v1/1/filter.php?g=Cocktail_glass
-
-This returns a JSON list of cocktails, and the information needed in order to populate each row of the list.
-
+ Once the above parts are setup, you can go ahead and clone the repo using the following command in your terminal: 
 ```
-{
- 	strDrink,           → Cocktail name
-     	strDrinkThumb,  → Photo URL
-      	idDrink       → Cocktail ID
-}
+git clone https://github.com/jevvilla/RN-Code-Challenge.git
 ```
+#### NOTE: please make sure you are in the correct branch, `code-challenge` in this case.
 
-You'll need to decide the approach to get the ingredients data that is not present on this endpoint. You can comment that approach and the implications inside the code and what can be done to improve this.
-
-Wireframe 1:
-
-![screen shot 2018-02-02 at 12 53 57](https://user-images.githubusercontent.com/263229/35742087-40b1ce26-0818-11e8-91d7-5c2ea0d4a6aa.png)
-
-
-
-
-**2. Cocktail detail:**
-
-Once the user taps on a row from the list mentioned in the previous feature it will push a new screen with the selected cocktail’s details, where it will show it’s name, photo, ingredients (with the quantity on each case next to it) and instructions (See wireframe 2).
-
-The endpoint to be used for this is the following:
-
-http://www.thecocktaildb.com/api/json/v1/1/lookup.php?i=${idDrink} → Cocktail ID
-I.g.: http://www.thecocktaildb.com/api/json/v1/1/lookup.php?i=16108
-
-The endpoint returns a JSON with the cocktails info, the needed properties are:
-```
-{
-	strInstructions,  → instructions
-	strDrink,         → cocktail name
-	strDrinkThumb,    → photo URL
-	strIngredient1,   → ingredient 1
-	...
-	strIngredientN    → ingredient N
-}
-```
-
-Wireframe 2
-
-![screen shot 2018-02-02 at 12 53 37](https://user-images.githubusercontent.com/263229/35742155-63205b1c-0818-11e8-8b4b-608a46eaa718.png)
-
-
-
-
-**3. Bonus Points: (Optional)**
-
-A) Implement a filter by name functionality on the first screen that automatically filters the results while typing, only showing the rows that satisfy the criteria entered by the user.
-
-B) Include test coverage for the core features.
-
-
-
-Thank you and looking forward to seeing your great work!
-
+Then go to the project root (project folder), and run the following commands to get the app running:
 
+- `git checkout code-challenge` to be placed in the correct branch.
+- `npm install` - Install project dependencies.
+- `react-native run-ios` - Run the app locally.  By default this will run an iPhone X simulator.
+- `react-native run-android` - install to the single Android device connected (if more than one are connected, you must specify the device with `—deviceId` which can be gotten from `add devices`).
 
+Once `react-native run-ios` or `react-native run-android` finish up, you should be able to see app running.