Added images to list detail screen

SteveGreenley · Apr 5, 2021 · 4921e75 · 4921e75
1 parent c5c2e44
commit 4921e75
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 16 deletions.
diff --git a/assets/placeholder-woman-silhouette-on-gray-background.jpg b/assets/placeholder-woman-silhouette-on-gray-background.jpg
diff --git a/src/screens/detail-screen.js b/src/screens/detail-screen.js
@@ -1,13 +1,29 @@
 import React from 'react';
-import { View, Text } from 'react-native';
+import { View, Text, Image, StyleSheet } from 'react-native';
 import { useNavigation } from 'react-navigation-hooks';
+import { useDimensions } from '@react-native-community/hooks';
 
 const DetailScreen = (props) => {
   const { getParam } = useNavigation();
-  const item = getParam('item');
+  const name = getParam('name');
+  const imageUrl = getParam('imageUrl');
+  const { width, height } = useDimensions().window;
+
+  console.log('!!! imageUrl',imageUrl);
   return (
     <View style={styles.container}>
-      <Text style={styles.itemText}>{item}</Text>
+      <View style={StyleSheet.absoluteFill}>
+        <Image
+          style={{ width, height  }}
+          source={{ uri: imageUrl }}
+          resizeMode="cover"
+        />
+      </View>
+      <View style={{ ...StyleSheet.absoluteFill, justifyContent: 'flex-end' }}>
+        <View style={styles.textContainer}>
+          <Text style={styles.itemText}>{name}</Text>
+        </View>
+      </View>
     </View>
   );
 };
@@ -18,8 +34,15 @@ const styles = {
     justifyContent: 'space-around',
     alignItems: 'center'
   },
+  textContainer: {
+    backgroundColor: 'rgba(255,255,255,0.5)',
+    margin: 20,
+    padding: 10,
+    borderRadius: 16,
+    alignItems: 'center'
+  },
   itemText: {
-    fontSize: 40
+    fontSize: 40,
   }
 };
 

diff --git a/src/screens/list-screen.js b/src/screens/list-screen.js
@@ -7,15 +7,15 @@ import { useNavigation } from 'react-navigation-hooks';
 const { width } = Dimensions.get('window');
 
 const items = [
-  'Mary',
-  'Patricia',
-  'Jennifer',
-  'Linda',
-  'Elizabeth',
-  'Barbara',
-  'Susan',
-  'Jessica',
-  'Sarah'
+  { name: 'Mary', imageUrl: 'https://static.wikia.nocookie.net/disney/images/5/5c/Mary_Poppins_-_Julie_Andrews.jpg/revision/latest?cb=20160212083150' },
+  { name: 'Patricia', imageUrl: 'https://www.celebrityspeakersbureau.com/wp-content/uploads/2015/03/Patricia-Arquette.jpg' },
+  { name: 'Jennifer', imageUrl: 'https://www.celebrityspeakersbureau.com/wp-content/uploads/2013/06/jennifer-aniston.jpg' },
+  { name: 'Linda', imageUrl: 'https://www.thewrap.com/wp-content/uploads/2018/08/linda.jpg' },
+  { name: 'Elizabeth', imageUrl: 'https://upload.wikimedia.org/wikipedia/commons/0/0d/Queen_Elizabeth_II_of_New_Zealand_%28cropped%29.jpg' },
+  { name: 'Barbara', imageUrl: 'https://upload.wikimedia.org/wikipedia/commons/8/80/Barbara_Windsor_Maryebone_Tree.JPG' },
+  { name: 'Susan', imageUrl: 'https://upload.wikimedia.org/wikipedia/commons/a/a1/Susan_Sarandon%2C_Festival_de_Sitges_2017_%28cropped%29.jpg' },
+  { name: 'Jessica', imageUrl: 'https://www.indiewire.com/wp-content/uploads/2021/03/AP21084701999083.jpg?w=780' },
+  { name: 'Sarah', imageUrl: 'https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Sarah_Silverman_DNC_July_2016.jpg/220px-Sarah_Silverman_DNC_July_2016.jpg' },
 ];
 
 const ListScreen = (props) => {
@@ -25,13 +25,13 @@ const ListScreen = (props) => {
       <ScrollView>
         {items.map((item) => (
           <TouchableOpacity
-            key={item}
+            key={item.name}
             style={styles.listItem}
             onPress={()=>{
-              navigate('Detail', { item });
+              navigate('Detail', { name: item.name, imageUrl: item.imageUrl });
             }}
           >
-            <Text style={styles.itemText}>{item}</Text>
+            <Text style={styles.itemText}>{item.name}</Text>
             <Icon
               name="chevron-right"
               type="material-community"