feat: refactor header image + footer image is added

index.ts

@@ -1,7 +1,3 @@
-/**
- * @format
- */
-
 import {AppRegistry} from 'react-native';
 import {name as appName} from './app.json';
 import App from './src/presentation/screens/App';

jest.config.ts

@@ -9,4 +9,5 @@ export default {
   collectCoverage: true,
   collectCoverageFrom: ['src/**/*.{ts,tsx}'],
   transformIgnorePatterns: [`node_modules/(?!${esModules})`],
+  moduleFileExtensions: ['js', 'ts', 'tsx'],
 };

src/presentation/components/Header.tsx

@@ -47,22 +47,24 @@ const styles = StyleSheet.create({
     backgroundColor: 'orange',
   },
   contentContainer: {
-    flex: 1,
+    flex: 3,
     flexDirection: 'row',
     alignItems: 'stretch',
   },
   icon: {
-    width: 100,
-    height: 100,
+    flex: 1,
+    width: '100%',
+    height: '100%',
     resizeMode: 'contain',
   },
   iconContainer: {
+    flex: 0.5,
     justifyContent: 'center',
     alignItems: 'center',
     marginHorizontal: 8,
   },
   titleContainer: {
-    flex: 1,
+    flex: 1.5,
     flexDirection: 'column',
     justifyContent: 'center',
     marginHorizontal: 16,

src/presentation/components/__tests__/__snapshots__/Header.spec.tsx.snap

@@ -12,7 +12,7 @@ exports[`Header tests should render correctly 1`] = `
     style={
       {
         "alignItems": "stretch",
-        "flex": 1,
+        "flex": 3,
         "flexDirection": "row",
       }
     }
@@ -21,6 +21,7 @@ exports[`Header tests should render correctly 1`] = `
       style={
         {
           "alignItems": "center",
+          "flex": 0.5,
           "justifyContent": "center",
           "marginHorizontal": 8,
         }
@@ -34,9 +35,10 @@ exports[`Header tests should render correctly 1`] = `
         }
         style={
           {
-            "height": 100,
+            "flex": 1,
+            "height": "100%",
             "resizeMode": "contain",
-            "width": 100,
+            "width": "100%",
           }
         }
       />
@@ -44,7 +46,7 @@ exports[`Header tests should render correctly 1`] = `
     <View
       style={
         {
-          "flex": 1,
+          "flex": 1.5,
           "flexDirection": "column",
           "justifyContent": "center",
           "marginHorizontal": 16,

src/presentation/screens/BusStopInfoScreen.tsx

@@ -1,4 +1,4 @@
-import {ActivityIndicator, StyleSheet, Text, View} from 'react-native';
+import {ActivityIndicator, Image, StyleSheet, Text, View} from 'react-native';
 import Container from '../components/Container';
 import Header from '../components/Header';
 import useDevices from '../../infraestructure/hooks/useDevices';
@@ -53,7 +53,10 @@ const BusStopInfoScreen = () => {
         status={status}
       />
       <View style={styles.footerContainer}>
-        {/* {TODO: implement footer} */}
+        <Image
+          source={require('../../../resources/images/footer.jpg')}
+          style={styles.image}
+        />
       </View>
     </Container>
   );
@@ -81,7 +84,12 @@ const styles = StyleSheet.create({
   },
   footerContainer: {
     flex: 1,
-    backgroundColor: 'grey',
+  },
+  image: {
+    flex: 1,
+    width: '100%',
+    height: '100%',
+    resizeMode: 'contain',
   },
 });
 

src/presentation/screens/__tests__/__snapshots__/BusStopInfoScreen.spec.tsx.snap

@@ -68,7 +68,7 @@ exports[`BusStopInfoScreen tests should render the screen with status success 1`
       style={
         {
           "alignItems": "stretch",
-          "flex": 1,
+          "flex": 3,
           "flexDirection": "row",
         }
       }
@@ -77,6 +77,7 @@ exports[`BusStopInfoScreen tests should render the screen with status success 1`
         style={
           {
             "alignItems": "center",
+            "flex": 0.5,
             "justifyContent": "center",
             "marginHorizontal": 8,
           }
@@ -90,9 +91,10 @@ exports[`BusStopInfoScreen tests should render the screen with status success 1`
           }
           style={
             {
-              "height": 100,
+              "flex": 1,
+              "height": "100%",
               "resizeMode": "contain",
-              "width": 100,
+              "width": "100%",
             }
           }
         />
@@ -100,7 +102,7 @@ exports[`BusStopInfoScreen tests should render the screen with status success 1`
       <View
         style={
           {
-            "flex": 1,
+            "flex": 1.5,
             "flexDirection": "column",
             "justifyContent": "center",
             "marginHorizontal": 16,
@@ -2572,10 +2574,25 @@ exports[`BusStopInfoScreen tests should render the screen with status success 1`
   <View
     style={
       {
-        "backgroundColor": "grey",
         "flex": 1,
       }
     }
-  />
+  >
+    <Image
+      source={
+        {
+          "testUri": "../../../resources/images/footer.jpg",
+        }
+      }
+      style={
+        {
+          "flex": 1,
+          "height": "100%",
+          "resizeMode": "contain",
+          "width": "100%",
+        }
+      }
+    />
+  </View>
 </View>
 `;