Addind child props for list pages 💫

screens/FavoriteScreen.tsx

@@ -1,15 +1,13 @@
-import {FlatList, StyleSheet, SafeAreaView, Text, View, Image, TextInput, TouchableHighlight} from 'react-native';
+import {FlatList, StyleSheet, View, TextInput, TouchableHighlight} from 'react-native';
 import * as React from "react";
-import {FontAwesomeIcon} from "@fortawesome/react-native-fontawesome";
-import {faHeart} from "@fortawesome/free-solid-svg-icons";
 import {RootTabScreenProps} from "../types";
 import {useSafeAreaInsets} from "react-native-safe-area-context";
 import {useDispatch, useSelector} from 'react-redux';
 import {useEffect, useState} from 'react';
 import {getFavourite} from "../redux/actions/actions";
 import Movie from "../model/Movie";
-
 import {MovieListComponent} from "../components/MovieListComponent";
+import MovieFinderScreenList from "./MovieFinderScreenList";
 
 
 export default function FavoriteScreen({navigation}: RootTabScreenProps<'Favorite'>) {
@@ -125,15 +123,10 @@ export default function FavoriteScreen({navigation}: RootTabScreenProps<'Favorit
 
     };
 
+
     return (
-        <SafeAreaView style={styles.container}>
+        // @ts-ignore
-            <View style={styles.titlePage}>
+        <MovieFinderScreenList page={"Favorite"}>
-                <FontAwesomeIcon icon={faHeart} style={styles.icon} size={40} color="white"/>
-                <Text style={styles.h1}>Favourite</Text>
-            </View>
-            <Image
-                source={require('../assets/images/delimiter.png')} style={styles.delimiter}
-            />
 
             <View style={styles.searchSection}>
                 <TextInput style={styles.searchBar} onChangeText={(text) => searchFilterFunction(text)}
@@ -150,7 +143,7 @@ export default function FavoriteScreen({navigation}: RootTabScreenProps<'Favorit
                 // @ts-ignore
                 renderItem={({item}) => <TouchableHighlight onPress={() => navigation.navigate("Info", {"item": item})}><MovieListComponent movie={item}></MovieListComponent></TouchableHighlight>}
             />
-        </SafeAreaView>
+        </MovieFinderScreenList>
     );
 }
 

screens/MovieFinderScreenList.tsx

@@ -0,0 +1,57 @@
+import {Image, SafeAreaView, StyleSheet, Text, View} from "react-native";
+import {FontAwesomeIcon} from "@fortawesome/react-native-fontawesome";
+import {faClock, faHeart} from "@fortawesome/free-solid-svg-icons";
+import * as React from "react";
+import {useSafeAreaInsets} from "react-native-safe-area-context";
+
+
+type Props = {
+    page: string;
+    children : React.PropsWithChildren<{}>
+};
+export default function MovieFinderScreenList(props : Props){
+
+
+    const insets = useSafeAreaInsets();
+    const styles = StyleSheet.create({
+        container: {
+            flex: 1,
+            paddingTop: insets.top + 22,
+            backgroundColor: "#0E0E0E"
+        },
+        titlePage: {
+            height: 50,
+            justifyContent: "flex-start",
+            flexDirection: 'row',
+            paddingHorizontal: 20,
+            marginBottom: 15,
+            marginVertical: 5,
+            alignItems: "flex-end"
+        },
+        icon: {
+            marginBottom: -5,
+            marginRight: 20
+        },
+        delimiter: {
+            height: 2,
+            width: 400,
+            resizeMode: "stretch"
+        },
+        h1: {
+            color: "white",
+            fontSize: 30
+        }
+    })
+
+    return (
+        // @ts-ignore
+        <SafeAreaView style={styles.container}>
+            <View style={styles.titlePage}>
+                <FontAwesomeIcon icon={props.page=="Favorite"?faHeart:faClock} style={styles.icon} size={40} color="white"/>
+                <Text style={styles.h1}>Watch Later</Text>
+            </View>
+            <Image source={require('../assets/images/delimiter.png')} style={styles.delimiter}/>
+            {props.children}
+        </SafeAreaView>
+    );
+};

screens/WatchLaterScreen.tsx

@@ -1,7 +1,5 @@
-import {FlatList, StyleSheet, SafeAreaView, Text, View, Image, TextInput, TouchableHighlight} from 'react-native';
+import {FlatList, StyleSheet, View, TextInput, TouchableHighlight} from 'react-native';
 import * as React from "react";
-import {FontAwesomeIcon} from "@fortawesome/react-native-fontawesome";
-import {faClock} from "@fortawesome/free-solid-svg-icons";
 import {RootTabScreenProps} from "../types";
 import {useSafeAreaInsets} from "react-native-safe-area-context";
 import {useDispatch, useSelector} from 'react-redux';
@@ -9,6 +7,7 @@ import {useEffect, useState} from 'react';
 import {getWatchLater} from "../redux/actions/actions";
 import Movie from "../model/Movie";
 import {MovieListComponent} from "../components/MovieListComponent";
+import MovieFinderScreenList from "./MovieFinderScreenList";
 
 export default function WatchLaterScreen({navigation}: RootTabScreenProps<'WatchLater'>) {
 
@@ -122,15 +121,10 @@ export default function WatchLaterScreen({navigation}: RootTabScreenProps<'Watch
     };
 
 
+
     return (
-        <SafeAreaView style={styles.container}>
+        // @ts-ignore
-            <View style={styles.titlePage}>
+        <MovieFinderScreenList page={"Watch Later"}>
-                <FontAwesomeIcon icon={faClock} style={styles.icon} size={40} color="white"/>
-                <Text style={styles.h1}>Watch Later</Text>
-            </View>
-            <Image
-                source={require('../assets/images/delimiter.png')} style={styles.delimiter}
-            />
 
             <View style={styles.searchSection}>
                 <TextInput style={styles.searchBar} onChangeText={(text) => searchFilterFunction(text)}
@@ -147,6 +141,6 @@ export default function WatchLaterScreen({navigation}: RootTabScreenProps<'Watch
                 // @ts-ignore
                 renderItem={({item}) => <TouchableHighlight onPress={() => navigation.navigate("Info", {"item": item})}><MovieListComponent movie={item}></MovieListComponent></TouchableHighlight>}
             />
-        </SafeAreaView>
+        </MovieFinderScreenList>
     );
 }