From 72dec224092ff819eafa0919c3618144ac8b6ec6 Mon Sep 17 00:00:00 2001 From: Emre KARTAL Date: Wed, 1 Feb 2023 11:50:05 +0100 Subject: [PATCH 1/2] Add Navigation and FlatList for Favorite Page --- src/FLAD/App.tsx | 7 +++- src/FLAD/app.json | 8 ++-- src/FLAD/assets/{ => icons}/adaptive-icon.png | Bin src/FLAD/assets/{ => icons}/favicon.png | Bin src/FLAD/assets/{ => icons}/icon.png | Bin src/FLAD/assets/{ => icons}/splash.png | Bin src/FLAD/assets/{ => images}/jul.png | Bin src/FLAD/assets/{ => images}/pnl.png | Bin src/FLAD/{FakeData => data}/data.ts | 0 src/FLAD/model/Music.ts | 35 ++++++++++++++++++ src/FLAD/navigation/Navigation.tsx | 29 +++++++++++++++ src/FLAD/{pages => screens}/favoritePage.tsx | 22 ++++++++--- src/FLAD/{pages => screens}/spot.tsx | 0 13 files changed, 89 insertions(+), 12 deletions(-) rename src/FLAD/assets/{ => icons}/adaptive-icon.png (100%) rename src/FLAD/assets/{ => icons}/favicon.png (100%) rename src/FLAD/assets/{ => icons}/icon.png (100%) rename src/FLAD/assets/{ => icons}/splash.png (100%) rename src/FLAD/assets/{ => images}/jul.png (100%) rename src/FLAD/assets/{ => images}/pnl.png (100%) rename src/FLAD/{FakeData => data}/data.ts (100%) create mode 100644 src/FLAD/model/Music.ts create mode 100644 src/FLAD/navigation/Navigation.tsx rename src/FLAD/{pages => screens}/favoritePage.tsx (52%) rename src/FLAD/{pages => screens}/spot.tsx (100%) diff --git a/src/FLAD/App.tsx b/src/FLAD/App.tsx index 3ce817b..c7e5d6f 100644 --- a/src/FLAD/App.tsx +++ b/src/FLAD/App.tsx @@ -1,7 +1,7 @@ import { StatusBar } from 'expo-status-bar'; import { useState, useTransition } from 'react'; import { Animated, StyleSheet, Text, View } from 'react-native'; -import FavoritePage from './pages/favoritePage'; +import FavoritePage from './screens/favoritePage'; import { cards as cardArray } from './FakeData/data' @@ -40,7 +40,10 @@ const onSwipe = (index: number, direction: 'left' | 'right') => { */ - + + + + diff --git a/src/FLAD/app.json b/src/FLAD/app.json index 7d22ae5..3474fa8 100644 --- a/src/FLAD/app.json +++ b/src/FLAD/app.json @@ -4,10 +4,10 @@ "slug": "FLAD", "version": "1.0.0", "orientation": "portrait", - "icon": "./assets/icon.png", + "icon": "./assets/icons/icon.png", "userInterfaceStyle": "light", "splash": { - "image": "./assets/splash.png", + "image": "./assets/icons/splash.png", "resizeMode": "contain", "backgroundColor": "#141414" }, @@ -22,12 +22,12 @@ }, "android": { "adaptiveIcon": { - "foregroundImage": "./assets/adaptive-icon.png", + "foregroundImage": "./assets/icons/adaptive-icon.png", "backgroundColor": "#FFFFFF" } }, "web": { - "favicon": "./assets/favicon.png" + "favicon": "./assets/icons/favicon.png" } } } diff --git a/src/FLAD/assets/adaptive-icon.png b/src/FLAD/assets/icons/adaptive-icon.png similarity index 100% rename from src/FLAD/assets/adaptive-icon.png rename to src/FLAD/assets/icons/adaptive-icon.png diff --git a/src/FLAD/assets/favicon.png b/src/FLAD/assets/icons/favicon.png similarity index 100% rename from src/FLAD/assets/favicon.png rename to src/FLAD/assets/icons/favicon.png diff --git a/src/FLAD/assets/icon.png b/src/FLAD/assets/icons/icon.png similarity index 100% rename from src/FLAD/assets/icon.png rename to src/FLAD/assets/icons/icon.png diff --git a/src/FLAD/assets/splash.png b/src/FLAD/assets/icons/splash.png similarity index 100% rename from src/FLAD/assets/splash.png rename to src/FLAD/assets/icons/splash.png diff --git a/src/FLAD/assets/jul.png b/src/FLAD/assets/images/jul.png similarity index 100% rename from src/FLAD/assets/jul.png rename to src/FLAD/assets/images/jul.png diff --git a/src/FLAD/assets/pnl.png b/src/FLAD/assets/images/pnl.png similarity index 100% rename from src/FLAD/assets/pnl.png rename to src/FLAD/assets/images/pnl.png diff --git a/src/FLAD/FakeData/data.ts b/src/FLAD/data/data.ts similarity index 100% rename from src/FLAD/FakeData/data.ts rename to src/FLAD/data/data.ts diff --git a/src/FLAD/model/Music.ts b/src/FLAD/model/Music.ts new file mode 100644 index 0000000..3bb59d6 --- /dev/null +++ b/src/FLAD/model/Music.ts @@ -0,0 +1,35 @@ +export class Music { + private _name: string; + private _bio: string; + private _image: ImageSource; + + constructor(title: string, bio: string, image: any) { + this._title = name; + this._bio = bio; + this._image = image; + } + + get title(): string { + return this._title; + } + + set title(value: string) { + this._title = value; + } + + get bio(): string { + return this._latitude; + } + + set bio(value: string) { + this._latitude = value; + } + + get image(): any { + return this._image; + } + + set image(value: any) { + this._image = value; + } +} diff --git a/src/FLAD/navigation/Navigation.tsx b/src/FLAD/navigation/Navigation.tsx new file mode 100644 index 0000000..27c7179 --- /dev/null +++ b/src/FLAD/navigation/Navigation.tsx @@ -0,0 +1,29 @@ +import React, {Component} from 'react'; +import { NavigationContainer } from 'react-native'; + +export default function Navigation() { + const BottomTabNavigator = createBottomTabNavigator(); + return ( + + + , + }}/> + , + }}/> + + + ) +} + +function TabBarIcon(props: { + name: React.ComponentProps['name']; + color: string; +}) { + return ; +} \ No newline at end of file diff --git a/src/FLAD/pages/favoritePage.tsx b/src/FLAD/screens/favoritePage.tsx similarity index 52% rename from src/FLAD/pages/favoritePage.tsx rename to src/FLAD/screens/favoritePage.tsx index 2ab49db..2027e11 100644 --- a/src/FLAD/pages/favoritePage.tsx +++ b/src/FLAD/screens/favoritePage.tsx @@ -5,6 +5,11 @@ import CardMusic from '../components/CardMusic'; export default function favoritePage() { + export const MUSIC_LIST : Music[] = [ + new Music("La pharmacie", "Jul",require("../assets/Images/jul.png")), + new Music("Deux frères", "PNL", require("../assets/images/pnl.png")), + new Music("Blanka", "PNL", require("../assets/images/pnl.png")), + ] return ( @@ -12,12 +17,17 @@ export default function favoritePage() { Retrouvez ici vos musiques favorites - - - - - - + + ( + navigation.navigate("")}> + + + )} + keyExtractor={(item: Music) => item.title } + /> + ); diff --git a/src/FLAD/pages/spot.tsx b/src/FLAD/screens/spot.tsx similarity index 100% rename from src/FLAD/pages/spot.tsx rename to src/FLAD/screens/spot.tsx -- 2.36.3 From 4a2f62c594cd3887bc28f85435d69e099c730946 Mon Sep 17 00:00:00 2001 From: Emre Date: Thu, 2 Feb 2023 16:52:51 +0100 Subject: [PATCH 2/2] Realized Navigation tabbar and i structured the tree structure of images and files --- src/FLAD/App.tsx | 36 ++++---------------- src/FLAD/components/CardMusic.tsx | 5 +-- src/FLAD/model/Music.ts | 16 ++++----- src/FLAD/navigation/Navigation.tsx | 54 +++++++++++++++++------------- src/FLAD/package.json | 4 ++- src/FLAD/screens/favoritePage.tsx | 27 ++++++++++----- 6 files changed, 69 insertions(+), 73 deletions(-) diff --git a/src/FLAD/App.tsx b/src/FLAD/App.tsx index c7e5d6f..29da08e 100644 --- a/src/FLAD/App.tsx +++ b/src/FLAD/App.tsx @@ -2,9 +2,11 @@ import { StatusBar } from 'expo-status-bar'; import { useState, useTransition } from 'react'; import { Animated, StyleSheet, Text, View } from 'react-native'; import FavoritePage from './screens/favoritePage'; -import { cards as cardArray } from './FakeData/data' +import { cards as cardArray } from './data/data' +import Navigation from './navigation/Navigation'; +import { NavigationContainer } from '@react-navigation/native'; +import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; - export default function App() { // const [currentCard, setCurrentCard] = useState(cardArray); // const aIndex = useTransition(currentCard) @@ -24,7 +26,7 @@ const onSwipe = (index: number, direction: 'left' | 'right') => { }; // const [currentCard, setCurrentCard] = useState(0); - +const Stack = createBottomTabNavigator(); return ( /* @@ -39,12 +41,7 @@ const onSwipe = (index: number, direction: 'left' | 'right') => { ))} */ - - - - - - + @@ -68,23 +65,4 @@ const onSwipe = (index: number, direction: 'left' | 'right') => { ); } -const styles = StyleSheet.create({ - container: { - flex: 1, - backgroundColor: '#fff', - alignItems: 'center', - justifyContent: 'center' - }, - card: { - borderRadius : 8, - shadowRadius : 20, - shadowColor : '#' - }, - image: { - width: 320, - height: 440, - borderRadius: 18, - resizeMode : "cover", - placeholder: "assets/images/loadingPlaceholder.gif" - }, -}); \ No newline at end of file + diff --git a/src/FLAD/components/CardMusic.tsx b/src/FLAD/components/CardMusic.tsx index 81d49d7..833cd28 100644 --- a/src/FLAD/components/CardMusic.tsx +++ b/src/FLAD/components/CardMusic.tsx @@ -2,16 +2,17 @@ import React, {Component} from 'react'; import { Animated, StyleSheet, Text, View, FlatList , Image} from 'react-native'; type CustomCardMusic = { //Props - image: any; + image: ImageSource; title: string; description: string; } export default function CardMusic(CBP: CustomCardMusic) { + const source = typeof CBP.image === 'string' ? { uri: CBP.image } : CBP.image; return ( - + {CBP.title} diff --git a/src/FLAD/model/Music.ts b/src/FLAD/model/Music.ts index 3bb59d6..db657b8 100644 --- a/src/FLAD/model/Music.ts +++ b/src/FLAD/model/Music.ts @@ -1,10 +1,10 @@ -export class Music { - private _name: string; +export default class Music { + private _title: string; private _bio: string; private _image: ImageSource; - constructor(title: string, bio: string, image: any) { - this._title = name; + constructor(title: string, bio: string, image: ImageSource) { + this._title = title; this._bio = bio; this._image = image; } @@ -18,18 +18,18 @@ export class Music { } get bio(): string { - return this._latitude; + return this._bio; } set bio(value: string) { - this._latitude = value; + this._bio = value; } - get image(): any { + get image(): ImageSource { return this._image; } - set image(value: any) { + set image(value: ImageSource) { this._image = value; } } diff --git a/src/FLAD/navigation/Navigation.tsx b/src/FLAD/navigation/Navigation.tsx index 27c7179..b53d1bc 100644 --- a/src/FLAD/navigation/Navigation.tsx +++ b/src/FLAD/navigation/Navigation.tsx @@ -1,29 +1,35 @@ import React, {Component} from 'react'; -import { NavigationContainer } from 'react-native'; +import { NavigationContainer } from '@react-navigation/native'; +import Home from '../screens/spot'; +import FavoritePage from '../screens/favoritePage'; +import { createStackNavigator } from '@react-navigation/stack'; +import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; -export default function Navigation() { - const BottomTabNavigator = createBottomTabNavigator(); +export default function StackNavigation() { + const Stack = createBottomTabNavigator(); return ( - - - , - }}/> - , - }}/> - - + + + + + + + ) -} + } -function TabBarIcon(props: { - name: React.ComponentProps['name']; - color: string; -}) { - return ; -} \ No newline at end of file diff --git a/src/FLAD/package.json b/src/FLAD/package.json index fc5c653..385a984 100644 --- a/src/FLAD/package.json +++ b/src/FLAD/package.json @@ -9,8 +9,10 @@ "web": "expo start --web" }, "dependencies": { - "@react-navigation/native": "^6.1.2", + "@react-navigation/bottom-tabs": "^6.5.4", + "@react-navigation/native": "^6.1.3", "@react-navigation/native-stack": "^6.9.8", + "@react-navigation/stack": "^6.3.12", "expo": "~47.0.12", "expo-cli": "^6.2.1", "expo-status-bar": "~1.4.2", diff --git a/src/FLAD/screens/favoritePage.tsx b/src/FLAD/screens/favoritePage.tsx index 2027e11..35b2a88 100644 --- a/src/FLAD/screens/favoritePage.tsx +++ b/src/FLAD/screens/favoritePage.tsx @@ -1,29 +1,32 @@ import React, {Component} from 'react'; -import { Animated, StyleSheet, Text, View, FlatList, ScrollView } from 'react-native'; +import { Animated, StyleSheet, Text, View, FlatList, ScrollView, TouchableHighlight } from 'react-native'; import Card from '../components/Card'; import CardMusic from '../components/CardMusic'; - +import Music from '../model/Music' export default function favoritePage() { - export const MUSIC_LIST : Music[] = [ - new Music("La pharmacie", "Jul",require("../assets/Images/jul.png")), + const MUSIC_LIST : Music[] = [ + new Music("La pharmacie", "Jul",require("../assets/images/jul.png")), new Music("Deux frères", "PNL", require("../assets/images/pnl.png")), + new Music("Stratos", "Kekra", "https://images.genius.com/ddc9cadedd1d4cef0860aaa85af9cd46.705x705x1.png"), + new Music("Autobahn", "Sch", "https://images.genius.com/83b6c98680d38bde1571f6b4093244b5.1000x1000x1.jpg"), + new Music("Freeze Raël", "Freeze Corleone", "https://intrld.com/wp-content/uploads/2020/08/freeze-corleone-la-menace-fanto%CC%82me.png"), new Music("Blanka", "PNL", require("../assets/images/pnl.png")), ] return ( - + Favoris Retrouvez ici vos musiques favorites - + ( - navigation.navigate("")}> - - + // navigation.navigate("")}> + + // )} keyExtractor={(item: Music) => item.title } /> @@ -34,6 +37,9 @@ export default function favoritePage() { }; const styles = StyleSheet.create({ + body: { + backgroundColor: "#141414" + }, titleContainer: { marginLeft: 20, marginVertical: 50, @@ -48,4 +54,7 @@ const styles = StyleSheet.create({ fontSize: 18, color: '#787878', }, + scroll: { + marginBottom: 120, + } }); -- 2.36.3