Using local data to show cards

skantus · Apr 8, 2020 · 3dd75d3 · 3dd75d3
1 parent 79bdd6c
commit 3dd75d3
Show file tree

Hide file tree

Showing 8 changed files with 9 additions and 12 deletions.
diff --git a/global.d.ts b/global.d.ts
@@ -8,7 +8,7 @@ type NavigationProps = {
 interface Card {
   id: number | string;
   title: string;
-  imageUri: string;
+  imageUri: ImageURISource;
   description: string;
   items?: CardItem[];
 }

diff --git a/src/api/data/data.ts b/src/api/data/data.ts
@@ -2,34 +2,31 @@ const data = [
   {
     id: 1,
     title: 'BEATSMUSIC',
-    imageUri:
-      'https://static.stereogum.com/uploads/2014/01/Beats-Music-logo-640x423.jpg',
+    imageUri: require('src/images/1.jpg'),
     description: 'Music',
   },
   {
     id: 2,
     title: 'STARBOY',
-    imageUri:
-      'https://i.pinimg.com/originals/3a/f0/e5/3af0e55ea66ea69e35145fb108b4a636.jpg',
+    imageUri: require('src/images/2.jpg'),
     description: 'The weeknd',
   },
   {
     id: 3,
-    title: 'MOSAIC',
-    imageUri:
-      'https://filmmusicreporter.com/wp-content/uploads/2018/05/mosaic.jpg',
-    description: 'Music for live',
+    title: 'HEADER',
+    imageUri: require('src/images/3.jpg'),
+    description: 'Anthem of love',
   },
   {
     id: 4,
     title: 'FINDING NEVERLAND',
-    imageUri: 'https://m.media-amazon.com/images/I/81qxkUUs5dL._SS500_.jpg',
+    imageUri: require('src/images/4.jpg'),
     description: 'The album',
   },
   {
     id: 5,
     title: 'BARABAS',
-    imageUri: 'https://f4.bcbits.com/img/a2939269798_10.jpg',
+    imageUri: require('src/images/5.jpg'),
     description: 'Elevator music dance',
   },
 ];

diff --git a/src/components/common/Card/Card.tsx b/src/components/common/Card/Card.tsx
@@ -21,7 +21,7 @@ const Card = (props: Props) => {
     <ScaleAndOpacity isHidden={isHidden} animateOnDidMount={animateOnDidMount}>
       <TouchableOpacity onPress={onPressed} disabled={!props.onPress}>
         <ImageBackground
-          source={{uri: item?.imageUri}}
+          source={item?.imageUri}
           style={styles.container}
           imageStyle={styles.image}>
           <Text style={styles.title}>{item?.title}</Text>

diff --git a/src/images/1.jpg b/src/images/1.jpg
diff --git a/src/images/2.jpg b/src/images/2.jpg
diff --git a/src/images/3.jpg b/src/images/3.jpg
diff --git a/src/images/4.jpg b/src/images/4.jpg
diff --git a/src/images/5.jpg b/src/images/5.jpg