README.md

@@ -59,11 +59,11 @@ Le projet de tp utilise un modèle de flux de travail Git pour organiser le dév
 ## Avancés du projet
 * [x] Partie 0 - Project creation
 * [x] Partie 1 - Project organisation
-* [ ] Partie 2 - Typescript types
-* [ ] Partie 3 - Screens
-* [ ] Partie 4 - Components
-* [ ] Partie 5 - FlatList
-* [ ] Partie 6 - Safe Area
+* [X] Partie 2 - Typescript types
+* [X] Partie 3 - Screens
+* [X] Partie 4 - Components
+* [X] Partie 5 - FlatList
+* [X] Partie 6 - Safe Area
 * [ ] Partie 7 - Navigation
 * [ ] Partie 8 - Hooks
 * [ ] Partie 9 - Redux Store

src/tp-react-native/App.tsx

@@ -1,28 +1,7 @@
-import { StatusBar } from 'expo-status-bar';
-import { StyleSheet, Text, View } from 'react-native';
-import { customJokeStub } from './data/stub/CustomJokeStub';
-import { sampleJokeStub } from './data/stub/SampleJokeStub';
+import HomePage from './screens/HomeScreen';
 
-import './types/extension'
 export default function App() {
   return (
-    <View style={styles.container}>   
-    
-      <Text>CustomJoke</Text>
-       {customJokeStub.displayDescription().map((t) =><Text key={t} >{t}</Text>)}
-       
-       <Text>SampleJoke</Text>
-        {sampleJokeStub.displayDescription().map((t) =><Text key={t} >{t}</Text>)}
-      <StatusBar style="auto" />
-    </View>
+    <HomePage />
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});

src/tp-react-native/assets/Theme.ts

@@ -0,0 +1,5 @@
+export const indigoColor = "rgba(14, 14, 44, 1)";
+export const purpleColor = "rgba(74, 74, 104, 1)";
+export const darksalmonColor = "rgba(233, 150, 122, 1)";
+export const greyColor = "rgba(140, 140, 161, 1)";
+export const whiteColor = "rgba(239, 239, 253, 1)";

src/tp-react-native/components/JokeListItem.tsx

@@ -0,0 +1,77 @@
+import {StyleSheet, Text, View, FlatList, Image} from 'react-native';
+import {SampleJoke} from "../model/SampleJoke";
+import {CustomJoke} from "../model/CustomJoke";
+import {darksalmonColor, whiteColor, greyColor, indigoColor} from "../assets/Theme";
+
+type JokeListItemProps = {
+    jokes: CustomJoke[] | SampleJoke[];
+};
+
+export default function JokeListItem(props: JokeListItemProps) {
+    const renderItem = ({ item }: { item: CustomJoke | SampleJoke }) => (
+        <View style={styles.rowContainer}>
+            <View style={styles.color}/>
+            <Image source={{ uri: item.image }} style={styles.image} />
+            <View style={styles.columnContainer}>
+                <Text style={styles.text}>{item.id}</Text>
+                <Text style={styles.text}>{item.description()}</Text>
+                <View style={styles.bottomContainer}>
+                    <Text style={styles.text}>{item.type}</Text>
+                </View>
+            </View>
+        </View>
+    );
+
+    return (
+        <FlatList
+            data={props.jokes}
+            keyExtractor={(item) => item.id.toString()}
+            renderItem={renderItem}
+        />
+    );
+}
+
+const styles = StyleSheet.create({
+    rowContainer: {
+        flexDirection: "row",
+        marginHorizontal: "5%",
+        marginBottom:7,
+        marginTop:7,
+        paddingVertical: 10,
+        backgroundColor: indigoColor,
+        width:'90%',
+        height:150,
+        justifyContent: 'space-between',
+        alignItems: 'center',
+    },
+    color: {
+        flex: 0,
+        backgroundColor: darksalmonColor,
+        height: 150,
+        width:15,
+    },
+    image: {
+        width: '40%',
+        height: 150,
+        flex: 1
+    },
+    columnContainer: {
+        flexDirection: "column",
+        marginLeft: 20,
+        marginRight: 20,
+        width: '60%',
+        flex: 2,
+        justifyContent: 'space-between',
+    },
+    text: {
+        color:whiteColor,
+        paddingBottom: 7,
+        paddingTop: 7,
+    },
+    bottomContainer: {
+        backgroundColor: greyColor,
+        width:"auto",
+        height: 15,
+        borderRadius: 5
+    }
+});

src/tp-react-native/data/stub/CustomJokeStub.ts

@@ -1,3 +1,13 @@
+/**
+ * @file CustomJokeStub.ts
+ * @brief Exemple d'utilisation de la classe JokeFactory pour créer des blagues personnalisées.
+ */
+
 import { JokeFactory } from '../../model/JokeFactory';
 
-export const customJokeStub = JokeFactory.createCustomJokes('[{"id":"1", "type":"custom", "setup":"one", "punchline":"y\'en a pas", "image":"Jackson"},{"id":"2", "type":"custom", "setup":"two","punchline":"y\'en a pas", "image":"Jackson"}]'); 
+/**
+ * @brief Stub de blagues personnalisées créées à l'aide de la classe JokeFactory.
+ * @constant
+ * @type {CustomJoke[]}
+ */
+export const customJokeStub = JokeFactory.createCustomJokes('[{"id":"1", "type":"custom", "setup":"one", "punchline":"y\'en a pas", "image":"https://placekitten.com/200/300"},{"id":"2", "type":"custom", "setup":"two","punchline":"y\'en a pas", "image":"https://placekitten.com/200/300"},{"id":"3", "type":"Default", "setup":"three","punchline":"y\'en toujours a pas ;)", "image":"https://placekitten.com/200/300"},{"id":"4", "type":"custom bro", "setup":"four","punchline":"y\'en toujours toujours ap", "image":"https://placekitten.com/200/300"}]');

src/tp-react-native/data/stub/SampleJokeStub.ts

@@ -1,2 +1,13 @@
+/**
+ * @file SampleJokeStub.ts
+ * @brief Exemple d'utilisation de la classe JokeFactory pour créer des blagues simples.
+ */
+
 import { JokeFactory } from '../../model/JokeFactory';
-export const sampleJokeStub = JokeFactory.createCustomJokes('[{"id":"1", "type":"custom", "setup":"one", "punchline":"y\'en a pas", "image":"Jackson"},{"id":"2", "type":"custom", "setup":"two","punchline":"y\'en a pas", "image":"Jackson"}]');
+
+/**
+ * @brief Stub de blagues simples créées à l'aide de la classe JokeFactory.
+ * @constant
+ * @type {SampleJoke[]}
+ */
+export const sampleJokeStub = JokeFactory.createSampleJokes('[{"id":1, "type":"custom", "setup":"one", "punchline":"y\'en a pas", "image":"https://placekitten.com/200/300"},{"id":2, "type":"custom", "setup":"two","punchline":"y\'en a pas", "image":"https://placekitten.com/200/300"}]');

src/tp-react-native/model/CustomJoke.ts

@@ -1,17 +1,51 @@
+/**
+ * @file CustomJoke.ts
+ * @brief Définition de la classe CustomJoke.
+ */
+
 import { Joke } from './Joke';
 
+/**
+ * @class
+ * @brief Représente une blague personnalisée avec un identifiant unique.
+ * @extends Joke
+ */
 export class CustomJoke extends Joke {
-    private _id:string;
+    private _id: string;
+
+    /**
+     * @brief Constructeur de la classe CustomJoke.
+     * @param {string} id - L'identifiant unique de la blague.
+     * @param {string} type - Le type de la blague.
+     * @param {string} setup - La partie préliminaire de la blague.
+     * @param {string} punchline - La chute de la blague.
+     * @param {string} image - L'URL de l'image associée à la blague.
+     */
     constructor(id: string, type: string, setup: string, punchline: string, image: string) {
         super(type, setup, punchline, image); // Assuming Joke class has these properties
         this._id = id;
     }
-    public get id():string {
+
+    /**
+     * @brief Obtient l'identifiant de la blague.
+     * @return {string} L'identifiant de la blague.
+     */
+    get id(): string {
         return this._id;
     }
-    public set id(id:string) {
+
+    /**
+     * @brief Modifie l'identifiant de la blague.
+     * @param {string} id - Le nouvel identifiant de la blague.
+     */
+    set id(id: string) {
         this._id = id;
     }
+
+    /**
+     * @brief Obtient une description textuelle de la blague.
+     * @return {string} La description de la blague.
+     */
     description(): string {
         return `ID: ${this.id}, Setup: ${this.setup}, Punchline: ${this.punchline}`;
     }

src/tp-react-native/model/Joke.ts

@@ -1,9 +1,25 @@
+/**
+ * @file Joke.ts
+ * @brief Définition de la classe abstraite Joke.
+ */
+
+/**
+ * @class
+ * @brief Classe abstraite représentant une blague.
+ */
 export abstract class Joke {
     private _type: string;
     private _setup: string;
     private _punchline: string;
     private _image: string;
 
+    /**
+     * @brief Constructeur de la classe Joke.
+     * @param {string} type - Le type de la blague.
+     * @param {string} setup - La partie préliminaire de la blague.
+     * @param {string} punchline - La chute de la blague.
+     * @param {string} image - L'URL de l'image associée à la blague.
+     */
     constructor(type: string, setup: string, punchline: string, image: string) {
         this._type = type;
         this._setup = setup;
@@ -11,33 +27,82 @@ export abstract class Joke {
         this._image = image;
     }
 
-    public get type() {
+    /**
+     * @brief Obtient le type de la blague.
+     * @return {string} Le type de la blague.
+     */
+    get type() {
         return this._type;
     }
-    public get setup():string {
+
+    /**
+     * @brief Obtient la partie préliminaire de la blague.
+     * @return {string} La partie préliminaire de la blague.
+     */
+    get setup(): string {
         return this._setup;
     }
-    public get punchline():string {
+
+    /**
+     * @brief Obtient la chute de la blague.
+     * @return {string} La chute de la blague.
+     */
+    get punchline(): string {
         return this._punchline;
     }
-    public get image():string {
+
+    /**
+     * @brief Obtient l'URL de l'image associée à la blague.
+     * @return {string} L'URL de l'image associée à la blague.
+     */
+    get image(): string {
         return this._image;
     }
-    public set type(theType:string) {
+
+    /**
+     * @brief Modifie le type de la blague.
+     * @param {string} theType - Le nouveau type de la blague.
+     */
+    set type(theType: string) {
         this._type = theType;
     }
+
+    /**
+     * @brief Modifie la partie préliminaire de la blague.
+     * @param {string} theSetup - La nouvelle partie préliminaire de la blague.
+     */
     public set setup(theSetup: string) {
         this._setup = theSetup;
     }
-    public set punchline(thePunchline:string) {
+
+    /**
+     * @brief Modifie la chute de la blague.
+     * @param {string} thePunchline - La nouvelle chute de la blague.
+     */
+    public set punchline(thePunchline: string) {
         this._punchline = thePunchline;
     }
-    public set image(theImage:string) {
+
+    /**
+     * @brief Modifie l'URL de l'image associée à la blague.
+     * @param {string} theImage - Le nouvel URL de l'image associée à la blague.
+     */
+    public set image(theImage: string) {
         this._image = theImage;
     }
+
+    /**
+     * @brief Obtient un résumé de la blague.
+     * @return {string} Un résumé de la blague.
+     */
     public summary(): string {
-        return this.punchline.substring(0,24) + "...";
+        return this.punchline.substring(0, 24) + "...";
     }
+
+    /**
+     * @brief Obtient une description textuelle de la blague.
+     * @return {string} Une description textuelle de la blague.
+     */
     public description(): string {
         return this.type + this.summary;
     }

src/tp-react-native/model/JokeFactory.ts

@@ -1,7 +1,21 @@
+/**
+ * @file JokeFactory.ts
+ * @brief Définition de la classe JokeFactory.
+ */
+
 import { CustomJoke } from "./CustomJoke";
 import { SampleJoke } from "./SampleJoke";
 
+/**
+ * @class
+ * @brief Fabrique de blagues permettant de créer des instances de blagues à partir de données JSON.
+ */
 export class JokeFactory {
+    /**
+     * @brief Crée des instances de blagues personnalisées à partir d'un tableau JSON.
+     * @param {string} jsonArray - Tableau JSON représentant les blagues personnalisées.
+     * @return {CustomJoke[]} Tableau d'instances de blagues personnalisées.
+     */
     public static createCustomJokes(jsonArray: string): CustomJoke[] {
         const jsonObjects: any[] = JSON.parse(jsonArray);
         const customJokes: CustomJoke[] = [];
@@ -20,6 +34,11 @@ export class JokeFactory {
         return customJokes;
     }
 
+    /**
+     * @brief Crée des instances de blagues d'échantillon à partir d'un tableau JSON.
+     * @param {string} jsonArray - Tableau JSON représentant les blagues d'échantillon.
+     * @return {SampleJoke[]} Tableau d'instances de blagues d'échantillon.
+     */
     public static createSampleJokes(jsonArray: string): SampleJoke[] {
         const jsonObjects: any[] = JSON.parse(jsonArray);
         const sampleJokes: SampleJoke[] = [];

src/tp-react-native/model/SampleJoke.ts

@@ -1,17 +1,51 @@
+/**
+ * @file SampleJoke.ts
+ * @brief Définition de la classe SampleJoke.
+ */
+
 import { Joke } from "./Joke";
 
+/**
+ * @class
+ * @brief Classe représentant une blague d'échantillon.
+ * @extends Joke
+ */
 export class SampleJoke extends Joke {
-    private _id:number;
+    private _id: number;
+
+    /**
+     * @brief Constructeur de la classe SampleJoke.
+     * @param {number} id - L'identifiant de la blague d'échantillon.
+     * @param {string} type - Le type de la blague.
+     * @param {string} setup - La partie préliminaire de la blague.
+     * @param {string} punchline - La chute de la blague.
+     * @param {string} image - L'URL de l'image associée à la blague.
+     */
     constructor(id: number, type: string, setup: string, punchline: string, image: string) {
         super(type, setup, punchline, image); // Assuming Joke class has these properties
         this._id = id;
     }
-    public get id():number {
+
+    /**
+     * @brief Obtient l'identifiant de la blague d'échantillon.
+     * @return {number} L'identifiant de la blague d'échantillon.
+     */
+    get id(): number {
         return this._id;
     }
-    public set id(id:number) {
+
+    /**
+     * @brief Modifie l'identifiant de la blague d'échantillon.
+     * @param {number} id - Le nouvel identifiant de la blague d'échantillon.
+     */
+    set id(id: number) {
         this._id = id;
     }
+
+    /**
+     * @brief Obtient une description textuelle de la blague d'échantillon.
+     * @return {string} Une description textuelle de la blague d'échantillon.
+     */
     description(): string {
         return `ID: ${this.id}, Setup: ${this.setup}, Punchline: ${this.punchline}`;
     }

src/tp-react-native/package-lock.json

@@ -8,11 +8,14 @@
       "name": "tp-react-native",
       "version": "1.0.0",
       "dependencies": {
+        "@react-navigation/bottom-tabs": "^6.5.11",
+        "@react-navigation/native": "^6.1.9",
         "@types/react": "~18.2.45",
         "expo": "~50.0.3",
         "expo-status-bar": "~1.11.1",
         "react": "18.2.0",
         "react-native": "0.73.2",
+        "react-native-gesture-handler": "^2.14.1",
         "typescript": "^5.3.0"
       },
       "devDependencies": {
@@ -2008,6 +2011,17 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@egjs/hammerjs": {
+      "version": "2.0.17",
+      "resolved": "https://registry.npmjs.org/@egjs/hammerjs/-/hammerjs-2.0.17.tgz",
+      "integrity": "sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==",
+      "dependencies": {
+        "@types/hammerjs": "^2.0.36"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/@expo/bunyan": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@expo/bunyan/-/bunyan-4.0.0.tgz",
@@ -5850,6 +5864,100 @@
         "react-native": "*"
       }
     },
+    "node_modules/@react-navigation/bottom-tabs": {
+      "version": "6.5.11",
+      "resolved": "https://registry.npmjs.org/@react-navigation/bottom-tabs/-/bottom-tabs-6.5.11.tgz",
+      "integrity": "sha512-CBN/NOdxnMvmjw+AJQI1kltOYaClTZmGec5pQ3ZNTPX86ytbIOylDIITKMfTgHZcIEFQDymx1SHeS++PIL3Szw==",
+      "dependencies": {
+        "@react-navigation/elements": "^1.3.21",
+        "color": "^4.2.3",
+        "warn-once": "^0.1.0"
+      },
+      "peerDependencies": {
+        "@react-navigation/native": "^6.0.0",
+        "react": "*",
+        "react-native": "*",
+        "react-native-safe-area-context": ">= 3.0.0",
+        "react-native-screens": ">= 3.0.0"
+      }
+    },
+    "node_modules/@react-navigation/core": {
+      "version": "6.4.10",
+      "resolved": "https://registry.npmjs.org/@react-navigation/core/-/core-6.4.10.tgz",
+      "integrity": "sha512-oYhqxETRHNHKsipm/BtGL0LI43Hs2VSFoWMbBdHK9OqgQPjTVUitslgLcPpo4zApCcmBWoOLX2qPxhsBda644A==",
+      "dependencies": {
+        "@react-navigation/routers": "^6.1.9",
+        "escape-string-regexp": "^4.0.0",
+        "nanoid": "^3.1.23",
+        "query-string": "^7.1.3",
+        "react-is": "^16.13.0",
+        "use-latest-callback": "^0.1.7"
+      },
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
+    "node_modules/@react-navigation/core/node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@react-navigation/core/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
+    "node_modules/@react-navigation/elements": {
+      "version": "1.3.21",
+      "resolved": "https://registry.npmjs.org/@react-navigation/elements/-/elements-1.3.21.tgz",
+      "integrity": "sha512-eyS2C6McNR8ihUoYfc166O1D8VYVh9KIl0UQPI8/ZJVsStlfSTgeEEh+WXge6+7SFPnZ4ewzEJdSAHH+jzcEfg==",
+      "peerDependencies": {
+        "@react-navigation/native": "^6.0.0",
+        "react": "*",
+        "react-native": "*",
+        "react-native-safe-area-context": ">= 3.0.0"
+      }
+    },
+    "node_modules/@react-navigation/native": {
+      "version": "6.1.9",
+      "resolved": "https://registry.npmjs.org/@react-navigation/native/-/native-6.1.9.tgz",
+      "integrity": "sha512-AMuJDpwXE7UlfyhIXaUCCynXmv69Kb8NzKgKJO7v0k0L+u6xUTbt6xvshmJ79vsvaFyaEH9Jg5FMzek5/S5qNw==",
+      "dependencies": {
+        "@react-navigation/core": "^6.4.10",
+        "escape-string-regexp": "^4.0.0",
+        "fast-deep-equal": "^3.1.3",
+        "nanoid": "^3.1.23"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
+    "node_modules/@react-navigation/native/node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@react-navigation/routers": {
+      "version": "6.1.9",
+      "resolved": "https://registry.npmjs.org/@react-navigation/routers/-/routers-6.1.9.tgz",
+      "integrity": "sha512-lTM8gSFHSfkJvQkxacGM6VJtBt61ip2XO54aNfswD+KMw6eeZ4oehl7m0me3CR9hnDE4+60iAZR8sAhvCiI3NA==",
+      "dependencies": {
+        "nanoid": "^3.1.23"
+      }
+    },
     "node_modules/@segment/loosely-validate-event": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@segment/loosely-validate-event/-/loosely-validate-event-2.0.0.tgz",
@@ -5898,6 +6006,11 @@
         "@sinonjs/commons": "^3.0.0"
       }
     },
+    "node_modules/@types/hammerjs": {
+      "version": "2.0.45",
+      "resolved": "https://registry.npmjs.org/@types/hammerjs/-/hammerjs-2.0.45.tgz",
+      "integrity": "sha512-qkcUlZmX6c4J8q45taBKTL3p+LbITgyx7qhlPYOdOHZB7B31K0mXbP5YA7i7SgDeEGuI9MnumiKPEMrxg8j3KQ=="
+    },
     "node_modules/@types/istanbul-lib-coverage": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.6.tgz",
@@ -6866,6 +6979,18 @@
         "node": ">=6"
       }
     },
+    "node_modules/color": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
+      "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
+      "dependencies": {
+        "color-convert": "^2.0.1",
+        "color-string": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=12.5.0"
+      }
+    },
     "node_modules/color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -6879,6 +7004,31 @@
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
       "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
     },
+    "node_modules/color-string": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
+      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+      "dependencies": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
+    "node_modules/color/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
     "node_modules/colorette": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.4.0.tgz",
@@ -7116,6 +7266,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/decode-uri-component": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.2.tgz",
+      "integrity": "sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==",
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
     "node_modules/deep-extend": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
@@ -7651,6 +7809,11 @@
       "resolved": "https://registry.npmjs.org/expo-status-bar/-/expo-status-bar-1.11.1.tgz",
       "integrity": "sha512-ddQEtCOgYHTLlFUe/yH67dDBIoct5VIULthyT3LRJbEwdpzAgueKsX2FYK02ldh440V87PWKCamh7R9evk1rrg=="
     },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
+    },
     "node_modules/fast-glob": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
@@ -7746,6 +7909,14 @@
         "node": ">=8"
       }
     },
+    "node_modules/filter-obj": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/filter-obj/-/filter-obj-1.1.0.tgz",
+      "integrity": "sha512-8rXg1ZnX7xzy2NGDVkBVaAy+lSlPNwad13BtgSlLuxfIslyt5Vg64U7tFcCt4WS1R0hvtnQybT/IyCkGZ3DpXQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/finalhandler": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
@@ -8079,6 +8250,19 @@
         "node": ">=8"
       }
     },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
+    "node_modules/hoist-non-react-statics/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "node_modules/hosted-git-info": {
       "version": "3.0.8",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-3.0.8.tgz",
@@ -11110,6 +11294,23 @@
         "qrcode-terminal": "bin/qrcode-terminal.js"
       }
     },
+    "node_modules/query-string": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/query-string/-/query-string-7.1.3.tgz",
+      "integrity": "sha512-hh2WYhq4fi8+b+/2Kg9CEge4fDPvHS534aOOvOZeQ3+Vf2mCFsaFBYj0i+iXcAq6I9Vzp5fjMFBlONvayDC1qg==",
+      "dependencies": {
+        "decode-uri-component": "^0.2.2",
+        "filter-obj": "^1.1.0",
+        "split-on-first": "^1.0.0",
+        "strict-uri-encode": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/queue": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/queue/-/queue-6.0.2.tgz",
@@ -11199,6 +11400,18 @@
         }
       }
     },
+    "node_modules/react-freeze": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/react-freeze/-/react-freeze-1.0.3.tgz",
+      "integrity": "sha512-ZnXwLQnGzrDpHBHiC56TXFXvmolPeMjTn1UOm610M4EXGzbEDR7oOIyS2ZiItgbs6eZc4oU/a0hpk8PrcKvv5g==",
+      "peer": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">=17.0.0"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -11257,6 +11470,46 @@
         "react": "18.2.0"
       }
     },
+    "node_modules/react-native-gesture-handler": {
+      "version": "2.14.1",
+      "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.14.1.tgz",
+      "integrity": "sha512-YiM1BApV4aKeuwsM6O4C2ufwewYEKk6VMXOt0YqEZFMwABBFWhXLySFZYjBSNRU2USGppJbfHP1q1DfFQpKhdA==",
+      "dependencies": {
+        "@egjs/hammerjs": "^2.0.17",
+        "hoist-non-react-statics": "^3.3.0",
+        "invariant": "^2.2.4",
+        "lodash": "^4.17.21",
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
+    "node_modules/react-native-safe-area-context": {
+      "version": "4.8.2",
+      "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-4.8.2.tgz",
+      "integrity": "sha512-ffUOv8BJQ6RqO3nLml5gxJ6ab3EestPiyWekxdzO/1MQ7NF8fW1Mzh1C5QE9yq573Xefnc7FuzGXjtesZGv7cQ==",
+      "peer": true,
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
+    "node_modules/react-native-screens": {
+      "version": "3.29.0",
+      "resolved": "https://registry.npmjs.org/react-native-screens/-/react-native-screens-3.29.0.tgz",
+      "integrity": "sha512-yB1GoAMamFAcYf4ku94uBPn0/ani9QG7NdI98beJ5cet2YFESYYzuEIuU+kt+CNRcO8qqKeugxlfgAa3HyTqlg==",
+      "peer": true,
+      "dependencies": {
+        "react-freeze": "^1.0.0",
+        "warn-once": "^0.1.0"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/react-native/node_modules/promise": {
       "version": "8.3.0",
       "resolved": "https://registry.npmjs.org/promise/-/promise-8.3.0.tgz",
@@ -11740,6 +11993,19 @@
         "node": ">= 5.10.0"
       }
     },
+    "node_modules/simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
+      "dependencies": {
+        "is-arrayish": "^0.3.1"
+      }
+    },
+    "node_modules/simple-swizzle/node_modules/is-arrayish": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
+    },
     "node_modules/sisteransi": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
@@ -11818,6 +12084,14 @@
         "node": "*"
       }
     },
+    "node_modules/split-on-first": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-1.1.0.tgz",
+      "integrity": "sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/sprintf-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
@@ -11893,6 +12167,14 @@
         "node": ">= 0.10.0"
       }
     },
+    "node_modules/strict-uri-encode": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz",
+      "integrity": "sha512-QwiXZgpRcKkhTj2Scnn++4PKtWsH0kpzZ62L2R6c/LUVYv7hVnZqcg2+sMuT6R7Jusu1vviK/MFsu6kNJfWlEQ==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/string_decoder": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
@@ -12522,6 +12804,14 @@
       "resolved": "https://registry.npmjs.org/url-join/-/url-join-4.0.0.tgz",
       "integrity": "sha512-EGXjXJZhIHiQMK2pQukuFcL303nskqIRzWvPvV5O8miOfwoUb9G+a/Cld60kUyeaybEI94wvVClT10DtfeAExA=="
     },
+    "node_modules/use-latest-callback": {
+      "version": "0.1.9",
+      "resolved": "https://registry.npmjs.org/use-latest-callback/-/use-latest-callback-0.1.9.tgz",
+      "integrity": "sha512-CL/29uS74AwreI/f2oz2hLTW7ZqVeV5+gxFeGudzQrgkCytrHw33G4KbnQOrRlAEzzAFXi7dDLMC9zhWcVpzmw==",
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -12577,6 +12867,11 @@
         "makeerror": "1.0.12"
       }
     },
+    "node_modules/warn-once": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/warn-once/-/warn-once-0.1.1.tgz",
+      "integrity": "sha512-VkQZJbO8zVImzYFteBXvBOZEl1qL175WH8VmZcxF2fZAoudNhNDvHi+doCaAEdU2l2vtcIwa2zn0QK5+I1HQ3Q=="
+    },
     "node_modules/wcwidth": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",

src/tp-react-native/package.json

@@ -10,12 +10,15 @@
     "web": "expo start --web"
   },
   "dependencies": {
+    "@react-navigation/bottom-tabs": "^6.5.11",
+    "@react-navigation/native": "^6.1.9",
+    "@types/react": "~18.2.45",
     "expo": "~50.0.3",
     "expo-status-bar": "~1.11.1",
     "react": "18.2.0",
     "react-native": "0.73.2",
-    "typescript": "^5.3.0",
-    "@types/react": "~18.2.45"
+    "react-native-gesture-handler": "^2.14.1",
+    "typescript": "^5.3.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0"

src/tp-react-native/screens/HomeScreen.tsx

@@ -0,0 +1,44 @@
+import { StatusBar } from 'expo-status-bar';
+import { StyleSheet, Text, View } from 'react-native';
+import { customJokeStub } from '../data/stub/CustomJokeStub';
+import { sampleJokeStub } from '../data/stub/SampleJokeStub';
+import { SafeAreaView } from 'react-native'
+import JokeListItem from "../components/JokeListItem";
+import '../types/extension';
+import {darksalmonColor, indigoColor, purpleColor} from "../assets/Theme";
+
+export default function HomeScreen() {
+    const allJokes = [...customJokeStub, ...sampleJokeStub];
+return (
+    <>
+        <SafeAreaView style={styles.topSafeArea}/>
+        <SafeAreaView style={styles.container}>
+            <View style={styles.title}>
+                <Text style={styles.centered}>Catalogue</Text>
+            </View>
+            <StatusBar style="light" />
+             <JokeListItem jokes={allJokes}/>
+        </SafeAreaView>
+    </>
+)
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: purpleColor,
+    },
+    centered: {
+        color:darksalmonColor,
+        fontSize:24,
+        textAlign: "center",
+        paddingBottom:20,
+    },
+    title: {
+        backgroundColor: indigoColor
+    },
+    topSafeArea: {
+        flex: 0,
+        backgroundColor: indigoColor
+    }
+});