FLAD_Dev
/
FLAD
2
2
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Realized Navigation tabbar and i structured the tree structure of images and files

Browse Source
pull/3/head
Emre KARTAL 2 years ago
parent 72dec22409
commit 4a2f62c594
6 changed files with 69 additions and 73 deletions
Show Stats Download Patch File Download Diff File

36
src/FLAD/App.tsx
Unescape View File

@ -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 (
/*<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', position : 'absolute', backgroundColor : '' }}>
@ -39,12 +41,7 @@ const onSwipe = (index: number, direction: 'left' | 'right') => {
))}
</View>*/
<View style={{backgroundColor: '#141414'}}>
<SafeAreaProvider>
<Navigation>
</Navigation>
</SafeAreaProvider>
</View>
<Navigation/>
@ -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"
},
});

5
src/FLAD/components/CardMusic.tsx
Unescape View File

@ -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 (
<View style={styles.container}>
<View style={styles.imageContainer}>
<Image source={require('../assets/jul.png')} style={styles.image}/>
<Image source={source} style={styles.image}/>
</View>
<View style={styles.textContainer}>
<Text style={styles.title}>{CBP.title}</Text>

16
src/FLAD/model/Music.ts
Unescape View File

@ -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;
}
}

54
src/FLAD/navigation/Navigation.tsx
Unescape View File

@ -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 (
<NavigationContainer>
<BottomTabNavigator.Navigator initialRouteName="Favorite">
<BottomTabNavigator.Screen name="Home" component={Home}
options={{
title: 'Home',
tabBarIcon: ({color}) => <TabBarIcon name="hear" color={color}/>,
}}/>
<BottomTabNavigator.Screen name="Favoris" component={Favorite}
options={{
title: 'Favoris',
tabBarIcon: ({color}) => <TabBarIcon name="hear" color={color}/>,
}}/>
</BottomTabNavigator.Navigator>
</NavigationContainer>
<NavigationContainer>
<Stack.Navigator initialRouteName="Home"
screenOptions={{
}}>
<Stack.Screen
name="Home"
component={FavoritePage}
options={{ headerShown: false }}
/>
<Stack.Screen
name="Favoris"
component={FavoritePage}
options={{ headerShown: false }}
/>
<Stack.Screen
name="Settings"
component={FavoritePage}
options={{ headerShown: false }}
/>
</Stack.Navigator>
</NavigationContainer>
)
}
}
function TabBarIcon(props: {
name: React.ComponentProps<typeof FontAwesome>['name'];
color: string;
}) {
return <FontAwesome size={30} {...props} />;
}

4
src/FLAD/package.json
Unescape View File

@ -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",

27
src/FLAD/screens/favoritePage.tsx
Unescape View File

@ -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 (
<View>
<View style={styles.body}>
<View style={styles.titleContainer}>
<Text style={styles.title}>Favoris</Text>
<Text style={styles.description}>Retrouvez ici vos musiques favorites</Text>
</View>
<ScrollView>
<ScrollView style={styles.scroll}>
<View>
<FlatList
data={MUSIC_LIST}
renderItem={({ item }) => (
<TouchableHighlight onPress={() => navigation.navigate("")}>
<CardMusic image="{item.image}" title="{item.title}" description="{item.bio}"/>
</TouchableHighlight>
//<TouchableHighlight onPress={() => navigation.navigate("")}>
<CardMusic image={item.image} title={item.title} description={item.bio}/>
//</TouchableHighlight>
)}
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,
}
});

Write Preview
Loading…
Cancel
Save