Lists challenge

.expo/packager-info.json

@@ -0,0 +1,10 @@
+{
+  "devToolsPort": 19002,
+  "expoServerPort": null,
+  "packagerPort": null,
+  "packagerPid": null,
+  "expoServerNgrokUrl": null,
+  "packagerNgrokUrl": null,
+  "ngrokPid": null,
+  "webpackServerPort": null
+}

.expo/settings.json

@@ -0,0 +1,7 @@
+{
+  "hostType": "lan",
+  "lanType": "ip",
+  "dev": true,
+  "minify": false,
+  "urlRandomness": "ge-4jp"
+}

.gitignore

@@ -0,0 +1,87 @@
+
+# Created by https://www.gitignore.io/api/node
+# Edit at https://www.gitignore.io/?templates=node
+
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# End of https://www.gitignore.io/api/node

.watchmanconfig

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

App.js

@@ -0,0 +1,21 @@
+import { createStackNavigator, createAppContainer } from 'react-navigation';
+import { StatusBar } from 'react-native'
+
+import ListScreen from './screens/ListScreen';
+import DetailScreen from './screens/DetailScreen';
+
+StatusBar.setBarStyle('light-content');
+
+const RootNavigator = createStackNavigator({
+  List: ListScreen,
+  Detail: DetailScreen
+}, {
+  defaultNavigationOptions: {
+    headerStyle: {
+      backgroundColor: '#2a3daa'
+    },
+    headerTintColor: '#FFF'
+  }
+});
+
+export default createAppContainer(RootNavigator);

app.json

@@ -0,0 +1,29 @@
+{
+  "expo": {
+    "name": "lists",
+    "slug": "lists",
+    "privacy": "public",
+    "sdkVersion": "32.0.0",
+    "platforms": [
+      "ios",
+      "android"
+    ],
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    }
+  }
+}

babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

components/Detail.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { View, Text, StyleSheet, Image } from 'react-native';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingHorizontal: 20,
+    backgroundColor: '#fff'
+  },
+  picture: {
+    height: 200,
+    width: 200,
+    alignSelf: 'center',
+    marginBottom: 10
+  },
+  text: {
+    marginVertical: 5,
+    fontSize: 18
+  }
+});
+
+const Detail = ({item}) => {
+  const pronounSubj = item.gender === 'male' ? 'He' : 'She';
+  const pronounPoss = item.gender === 'male' ? 'His' : 'Her';
+  const genderDisplay = item.gender === 'male' ? 'Male' : 'Female';
+
+  return (
+    <View style={styles.container}>
+      <Image style={styles.picture} source={{uri: item.picture}} />
+      <Text style={styles.text}>{item.name} is {genderDisplay}.</Text>
+      <Text style={styles.text}>{pronounSubj} lives at {item.address}.</Text>
+      <Text style={styles.text}>{pronounSubj} works at {item.company}.</Text>
+      <Text style={styles.text}>{pronounPoss} favourite film is {item.filmName}.</Text>
+    </View>
+  );
+};
+
+export default Detail;

components/List.js

@@ -0,0 +1,44 @@
+import React, { Component } from 'react';
+import { FlatList, StyleSheet } from 'react-native';
+import ListItem from './ListItem';
+import ListSeparator from './ListSeparator';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  }
+});
+
+class List extends Component {
+  constructor(props) {
+    super(props);
+    this.renderItem = this.renderItem.bind(this);
+  }
+
+  keyExtractor(item) {
+    return item.id;
+  }
+
+  renderSeparator() {
+    return <ListSeparator />;
+  }
+
+  renderItem({item}) {
+    const { onPress } = this.props;
+    return <ListItem item={item} onPress={onPress} />
+  }
+
+  render() {
+    const { items } = this.props;
+    return (
+      <FlatList
+        style={styles.container}
+        data={items}
+        renderItem={this.renderItem}
+        ItemSeparatorComponent={this.renderSeparator}
+        keyExtractor={this.keyExtractor} />
+    )
+  }
+}
+
+export default List;

components/ListItem.js

@@ -0,0 +1,40 @@
+import React, { Component } from 'react';
+import { TouchableHighlight, Text, StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({
+  container: {
+    height: 50,
+    paddingHorizontal: 10,
+    justifyContent: 'center',
+    backgroundColor: '#fff'
+  },
+  name: {
+    fontSize: 18
+  }
+});
+
+class ListItem extends Component {
+  constructor(props) {
+    super(props);
+    this.onPress = this.onPress.bind(this);
+  }
+
+  onPress() {
+    const { item, onPress } = this.props;
+    onPress(item);
+  }
+
+  render() {
+    const { item } = this.props;
+    return (
+      <TouchableHighlight
+        style={styles.container}
+        underlayColor="#e4e4e4"
+        onPress={this.onPress}>
+        <Text style={styles.name} numberOfLines={1}>{item.name}</Text>
+      </TouchableHighlight>
+    );
+  }
+}
+
+export default ListItem;

components/ListSeparator.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({
+  container: {
+    height: 1,
+    backgroundColor: '#ddd',
+    marginLeft: 10
+  }
+});
+
+const ListSeparator = () => (
+  <View style={styles.container} />
+);
+
+export default ListSeparator;