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

Responsive view ✅

Browse Source
pull/5/head
Emre KARTAL 2 years ago
parent dc71def851
commit 554688f21a
11 changed files with 140 additions and 101 deletions
Show Stats Download Patch File Download Diff File

17
src/FLAD/App.tsx
Unescape View File

@ -1,17 +1,24 @@
import Navigation from './navigation/Navigation';
import {SafeAreaProvider,useSafeAreaInsets} from 'react-native-safe-area-context';
import { StyleSheet,SafeAreaView } from 'react-native';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import StartNavigation from './navigation/StartNavigation';
export default function App() {
return (
<SafeAreaProvider>
{/* <Navigation/> */}
<StartNavigation/>
<StartNavigation/>
</SafeAreaProvider>
// <SafeAreaView style={styles.mainSafeArea}>
// {/* <Navigation/> */}
// </SafeAreaView>
);
}
const styles = StyleSheet.create({
mainSafeArea: {
flex: 1,
backgroundColor: "#141414",
}
});

9
src/FLAD/components/NextButton.tsx
Unescape View File

@ -3,6 +3,7 @@ import { View, StyleSheet, TouchableOpacity , Animated } from 'react-native';
import Svg, { G, Circle } from 'react-native-svg';
import { AntDesign } from '@expo/vector-icons';
// @ts-ignore
export default function NextButton({ percentage, scrollTo }) {
const size = 128;
const strokeWidth = 2;
@ -12,7 +13,7 @@ export default function NextButton({ percentage, scrollTo }) {
const progressAnimation = useRef(new Animated.Value(0)).current;
const progressRef = useRef(null);
// @ts-ignore
const animation = (toValue) => {
return Animated.timing(progressAnimation, {
toValue,
@ -31,12 +32,14 @@ export default function NextButton({ percentage, scrollTo }) {
const strokeDashoffset = circumFerence - (circumFerence * value.value) / 100;
if (progressRef?.current) {
// @ts-ignore
progressRef.current.setNativeProps({
strokeDashoffset,
});
}
},
// @ts-ignore
[percentage]
);
@ -54,7 +57,7 @@ export default function NextButton({ percentage, scrollTo }) {
<Circle stroke="#E6E7E8" fill="#141414" cx={center} cy={center} r={radius} strokeWidth={strokeWidth}/>
<Circle
ref={progressRef}
stroke="#3F2F78"
stroke="#b50909"
fill="#141414"
cx={center}
cy={center}
@ -79,7 +82,7 @@ const styles = StyleSheet.create({
},
button: {
position: 'absolute',
backgroundColor: '#3F2F78',
backgroundColor: '#b50909',
borderRadius: 100,
padding: 20
}

18
src/FLAD/components/Normalize.tsx
Unescape View File

@ -0,0 +1,18 @@
import { Dimensions, Platform, PixelRatio } from 'react-native';
const {
width: SCREEN_WIDTH,
height: SCREEN_HEIGHT,
} = Dimensions.get('window');
const scale = SCREEN_WIDTH / 480;
// @ts-ignore
export default function normalize(size) {
const newSize = size * scale
if (Platform.OS === 'ios') {
return Math.round(PixelRatio.roundToNearestPixel(newSize))
} else {
return Math.round(PixelRatio.roundToNearestPixel(newSize)) - 3
}
}

23
src/FLAD/components/Onboarding.tsx
Unescape View File

@ -3,6 +3,7 @@ import { View, StyleSheet, Text, FlatList, Animated, TouchableOpacity, ImageBack
import Modal from "react-native-modal";
import {useNavigation} from "@react-navigation/native";
import normalize from '../components/Normalize';
import OnboardingItem from './OnboardingItem';
import Paginator from './Paginator';
import NextButton from './NextButton';
@ -17,7 +18,7 @@ export default function Onboarding() {
const [isModalVisible, setIsModalVisible] = React.useState(false);
const handleModal = () => setIsModalVisible(() => !isModalVisible);
// @ts-ignore
const viewableItemsChanged = useRef(({ viewableItems }) => {
setCurrentIndex(viewableItems[0].index);
}).current;
@ -26,6 +27,7 @@ export default function Onboarding() {
const scrollTo = () => {
if(currentIndex < slides.length - 1) {
// @ts-ignore
slidesRef.current.scrollToIndex({ index: currentIndex + 1 });
} else {
setIsModalVisible(() => !isModalVisible);
@ -33,6 +35,7 @@ export default function Onboarding() {
};
return (
// @ts-ignore
<View style={styles.container}>
<View style={styles.balise}>
<FlatList
@ -67,12 +70,18 @@ export default function Onboarding() {
</View>
</TouchableOpacity>
<Image source={require("../assets/icons/Logo_White_Flad.png")} style={styles.imageLogo}/>
<TouchableOpacity style={styles.buttonConnection} onPress={() => {handleModal(); navigation.navigate('Login');}}>
<TouchableOpacity
style={styles.buttonConnection}
onPress={() => {handleModal();
// @ts-ignore
navigation.navigate('Login');
}}>
<Text style={styles.text}>CONTINUER AVEC SPOTIFY</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.buttonInscription} onPress={() => {handleModal(); navigation.navigate('Inscription');}}>
<Text style={styles.text}>S’INSCRIRE MAINTENANT</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button2Connection} onPress={() => {handleModal(); navigation.navigate('Login');}}>
<Text style={styles.text}>SE CONNECTER</Text>
</TouchableOpacity>
@ -92,9 +101,9 @@ const styles = StyleSheet.create({
backgroundColor: '#141414'
},
imageLogo: {
width: 280,
height: 140,
marginBottom: 100
width: normalize(324),
height: normalize(162),
marginBottom: '25%'
},
balise: {
flex: 1,
@ -141,7 +150,7 @@ const styles = StyleSheet.create({
right: 10,
color: 'gray',
fontWeight: 'bold',
fontSize: 15
fontSize: normalize(17)
},
buttonConnection: {
width: 262,
@ -168,7 +177,7 @@ const styles = StyleSheet.create({
text: {
fontWeight: 'bold',
color: 'white',
fontSize: 16
fontSize: normalize(18)
},
button2Connection: {
width: '100%',

13
src/FLAD/components/OnboardingItem.tsx
Unescape View File

@ -1,19 +1,18 @@
import React from 'react';
import { View, StyleSheet, Text, Image, useWindowDimensions } from 'react-native';
import normalize from '../components/Normalize';
import slides from '../data/slides';
// @ts-ignore
export default function Onboarding({ item }) {
const { width } = useWindowDimensions();
return (
<View style={[styles.container, { width }]}>
<Image source={item.image} style={[styles.image, { width, resizeMode: 'contain'}]} />
<Text style={styles.title}>{item.title}</Text>
<Text style={styles.description}>{item.description}</Text>
<Text style={styles.title}>{item.title}</Text>
<Text style={styles.description}>{item.description}</Text>
</View>
);
}
@ -21,7 +20,6 @@ export default function Onboarding({ item }) {
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'flex-start',
marginTop: -60
},
image: {
@ -29,7 +27,7 @@ const styles = StyleSheet.create({
},
title: {
fontWeight: '800',
fontSize: 28,
fontSize: normalize(32),
marginBottom: 10,
color: 'white',
textAlign: 'left',
@ -40,6 +38,7 @@ const styles = StyleSheet.create({
description: {
fontWeight: '300',
color: 'white',
fontSize: normalize(16),
textAlign: 'left',
paddingRight: 30,
paddingLeft: 20

24
src/FLAD/data/slides.tsx
Unescape View File

@ -1,20 +1,20 @@
export default [
{
id: '1',
title: 'Bienvenue sur Flad',
description: 'L\'application pour découvrir de nouvelle music et vous faires de nouveaux amis',
image: require('../assets/images/Board_Image.png')
id: '1',
title: 'Bienvenue sur Flad',
description: 'L\'application pour découvrir de nouvelles musiques et vous faire de nouveaux amis',
image: require('../assets/images/Board_Image.png')
},
{
id: '2',
title: 'Tous les jours de nouvelle music qui peut vous plaire',
description: 'L\'application apprend de vous et de vos amis pour vos suggérer des albums et séries',
image: require('../assets/images/Board_Image2.png')
id: '2',
title: 'Tous les jours de nouvelles musiques qui peuvent vous plaire',
description: 'L\'application apprends de vous et de vos amis pour vous suggérer des albums et des musics',
image: require('../assets/images/Board_Image2.png')
},
{
id: '3',
title: 'La music ça se partage',
description: 'Faites connaissances avec de nouvelles personnes et partagez vos critiques',
image: require('../assets/images/Board_Image3.png')
id: '3',
title: 'La musique ça se partage',
description: 'Faites connaissances avec de nouvelles personnes et partagez vos critiques',
image: require('../assets/images/Board_Image3.png')
}
]

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

@ -2,6 +2,7 @@ import React, {Component} from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer } from '@react-navigation/native';
import FavoriteNavigation from './FavoriteNavigation';
// @ts-ignore
import FontAwesome from 'react-native-vector-icons/FontAwesome';
export default function Navigation() {
@ -12,19 +13,19 @@ export default function Navigation() {
primary: 'rgb(255, 45, 85)',
card: 'rgb(35, 33, 35)',
border: 'rgb(35, 33, 35)',
text: 'rgb(255, 255, 255)',
text: 'rgb(138, 138, 138)',
}
};
return (
// @ts-ignore
<NavigationContainer theme={MyTheme}>
<BottomTabNavigator.Navigator
initialRouteName="Spots"
screenOptions={{
//tabBarShowLabel: false, //to remove the titles under the icons
tabBarStyle: {height: 60, position: 'absolute', bottom: 20, borderRadius: 90, marginHorizontal: 25},
tabBarIconStyle: { marginBottom: -20 },
tabBarLabelStyle: { bottom: '-70%' }
tabBarLabelStyle: { bottom: 5 }
}}>
<BottomTabNavigator.Screen name="Spots" component={FavoriteNavigation}
options={{

2
src/FLAD/package.json
Unescape View File

@ -34,6 +34,8 @@
"react-native-svg": "13.4.0",
"react-native-vector-icons": "^9.2.0",
"react-native-web": "~0.18.9",
"react-redux": "^8.0.5",
"redux": "^4.2.1",
"rive-react-native": "^3.0.41"
},
"devDependencies": {

57
src/FLAD/screens/InscriptionPage.tsx
Unescape View File

@ -1,7 +1,9 @@
import React, {Component, useState } from 'react';
import { View, Image, StyleSheet, Text, ImageBackground, Button, TextInput, TouchableWithoutFeedback, Keyboard, TouchableOpacity } from 'react-native';
import {useNavigation} from "@react-navigation/native";
import normalize from '../components/Normalize';
// @ts-ignore
const DismissKeyboard = ({ children }) => (
<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
{children}
@ -25,15 +27,15 @@ export default function InscriptionPage() {
</Text>
<Image source={require("../assets/icons/Logo_White_Flad.png")} style={styles.imageLogo}/>
<Text style={styles.text}>S'INSCRIRE</Text>
<View style={styles.containerInput}>
<View>
<TextInput style={[styles.input, styles.shadow]}/>
<Image source={require('../assets/icons/icons/User.png')} style={styles.iconUser} />
</View>
<View style={styles.containerInput}>
<View>
<TextInput style={[styles.input, styles.shadow]}/>
<Image source={require('../assets/icons/icons/lock.png')} style={styles.iconLock} />
</View>
<View style={styles.containerInput}>
<View>
<TextInput style={[styles.input, styles.shadow]}/>
<Image source={require('../assets/icons/icons/lock.png')} style={styles.iconLock} />
</View>
@ -44,10 +46,13 @@ export default function InscriptionPage() {
<TouchableOpacity style={[styles.button, styles.shadow]} onPress={() => console.log("Oui")}>
<Image source={require("../assets/icons/icons/next.png")} style={styles.buttonImage}/>
</TouchableOpacity>
<View style={styles.inscriptionText}>
<Text style={{fontSize: 16, color: 'white'}}>Tu as déjà un compte? </Text>
<TouchableOpacity onPress={() => navigation.navigate('Login')}>
<Text style={{fontSize: 16, color: '#406DE1', textDecorationLine: 'underline'}}>Se connecter</Text>
<View style={styles.connectionText}>
<Text style={{fontSize: normalize(18), color: 'white'}}>Tu as déjà un compte? </Text>
<TouchableOpacity
// @ts-ignore
onPress={() => navigation.navigate('Login')}
>
<Text style={{fontSize: normalize(18), color: '#406DE1', textDecorationLine: 'underline'}}>Se connecter</Text>
</TouchableOpacity>
</View>
</ImageBackground>
@ -60,34 +65,31 @@ const styles = StyleSheet.create ({
container: {
flex: 1
},
containerInput: {
justifyContent: 'center'
},
image: {
flex: 1,
justifyContent: 'center',
},
imageLogo: {
width: 280,
height: 140,
width: normalize(324),
height: normalize(162),
alignSelf: 'center',
marginBottom: 50,
marginTop: -20
},
button: {
marginTop: 40,
marginTop: '10%',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
alignSelf: 'center',
backgroundColor: 'white',
width: 86,
height: 86,
width: normalize(100),
height: normalize(100),
borderRadius: 21
},
buttonImage: {
width: 40,
height: 40
width: normalize(46),
height: normalize(46),
},
versionText: {
position: 'absolute',
@ -95,11 +97,11 @@ const styles = StyleSheet.create ({
right: 20,
color: 'gray',
fontWeight: 'bold',
fontSize: 15
fontSize: normalize(17)
},
text: {
fontWeight: 'bold',
fontSize: 25,
fontSize: normalize(29),
alignSelf: 'center',
color: 'white',
marginBottom: 15
@ -120,12 +122,11 @@ const styles = StyleSheet.create ({
shadowRadius: 3.84,
},
input: {
width: 300,
height: 42,
width: normalize(350),
height: normalize(50),
borderRadius: 30,
color: 'black',
backgroundColor: 'white',
fontSize: 15,
alignSelf: 'center',
marginBottom: 20,
paddingLeft: 50,
@ -135,24 +136,24 @@ const styles = StyleSheet.create ({
position: 'absolute',
width: 20,
height: 20,
left: '17%',
left: normalize(80),
bottom: '50%'
},
iconLock : {
position: 'absolute',
width: 20,
height: 20,
left: '17%',
left: normalize(80),
bottom: '50%'
},
inscriptionText: {
connectionText: {
flexDirection: 'row',
alignSelf: 'center',
bottom: -80
bottom: '-20%'
},
buttonSpotify: {
width: 300,
height: 42,
width: normalize(350),
height: normalize(50),
backgroundColor: '#24CF5F',
justifyContent: 'center',
alignItems: 'center',

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

@ -20,9 +20,9 @@ export default function favoritePage() {
<Text style={styles.title}>Favoris</Text>
<Text style={styles.description}>Retrouvez ici vos musiques favorites</Text>
</View>
<ScrollView style={styles.scroll}>
<ScrollView>
<View>
<FlatList
<FlatList style={{marginBottom: 80}}
data={MUSIC_LIST}
renderItem={({ item }) => (
//<TouchableHighlight onPress={() => navigation.navigate("")}>
@ -40,11 +40,12 @@ export default function favoritePage() {
const styles = StyleSheet.create({
body: {
flex: 1,
backgroundColor: "#141414"
justifyContent: 'center',
backgroundColor: "#141414",
},
titleContainer: {
marginTop: 20,
marginLeft: 20,
marginVertical: 60,
},
title: {
fontSize: 24,
@ -55,8 +56,6 @@ const styles = StyleSheet.create({
marginTop: 10,
fontSize: 18,
color: '#787878',
},
scroll: {
marginTop: -30
marginBottom: 20
}
});

56
src/FLAD/screens/loginPage.tsx
Unescape View File

@ -1,7 +1,9 @@
import React, {Component, useState } from 'react';
import { View, Image, StyleSheet, Text, ImageBackground, Button, TextInput, TouchableWithoutFeedback, Keyboard, TouchableOpacity } from 'react-native';
import {useNavigation} from "@react-navigation/native";
import normalize from '../components/Normalize';
// @ts-ignore
const DismissKeyboard = ({ children }) => (
<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
{children}
@ -25,11 +27,11 @@ export default function loginPage() {
</Text>
<Image source={require("../assets/icons/Logo_White_Flad.png")} style={styles.imageLogo}/>
<Text style={styles.text}>SE CONNECTER</Text>
<View style={styles.containerInput}>
<View>
<TextInput style={[styles.input, styles.shadow]}/>
<Image source={require('../assets/icons/icons/User.png')} style={styles.iconUser} />
</View>
<View style={styles.containerInput}>
<View>
<TextInput style={[styles.input, styles.shadow]}/>
<Image source={require('../assets/icons/icons/lock.png')} style={styles.iconLock} />
</View>
@ -41,9 +43,12 @@ export default function loginPage() {
<Image source={require("../assets/icons/Check.png")} style={styles.buttonImage}/>
</TouchableOpacity>
<View style={styles.inscriptionText}>
<Text style={{fontSize: 16, color: 'white'}}>Tu n'as pas de compte? </Text>
<TouchableOpacity onPress={() => navigation.navigate('Inscription')}>
<Text style={{fontSize: 16, color: '#406DE1', textDecorationLine: 'underline'}}>S'inscrire</Text>
<Text style={{fontSize: normalize(18), color: 'white'}}>Tu n'as pas de compte? </Text>
<TouchableOpacity
// @ts-ignore
onPress={() => navigation.navigate('Inscription')}
>
<Text style={{fontSize: normalize(18), color: '#406DE1', textDecorationLine: 'underline'}}>S'inscrire</Text>
</TouchableOpacity>
</View>
</ImageBackground>
@ -58,56 +63,51 @@ const styles = StyleSheet.create ({
container: {
flex: 1,
},
containerInput: {
justifyContent: 'center',
alignItems: 'flex-start',
},
image: {
flex: 1,
justifyContent: 'center',
},
imageLogo: {
width: 280,
height: 140,
width: normalize(324),
height: normalize(162),
alignSelf: 'center',
marginBottom: 100
marginBottom: '25%'
},
button: {
marginTop: 40,
marginTop: '10%',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
alignSelf: 'center',
backgroundColor: 'white',
width: 86,
height: 86,
width: normalize(100),
height: normalize(100),
borderRadius: 21
},
buttonImage: {
width: 40,
height: 40
width: normalize(46),
height: normalize(46),
},
iconUser : {
position: 'absolute',
width: 20,
height: 20,
left: '17%',
left: normalize(80),
bottom: '50%'
},
iconLock : {
position: 'absolute',
width: 20,
height: 20,
left: '17%',
left: normalize(80),
bottom: '50%'
},
input: {
width: 300,
height: 42,
width: normalize(350),
height: normalize(50),
borderRadius: 30,
color: 'black',
backgroundColor: 'white',
fontSize: 15,
alignSelf: 'center',
marginBottom: 20,
paddingLeft: 50,
@ -115,7 +115,7 @@ const styles = StyleSheet.create ({
},
text: {
fontWeight: 'bold',
fontSize: 25,
fontSize: normalize(29),
alignSelf: 'center',
color: 'white',
marginBottom: 15
@ -135,14 +135,14 @@ const styles = StyleSheet.create ({
right: 20,
color: 'gray',
fontWeight: 'bold',
fontSize: 15
fontSize: normalize(17)
},
rememberMeContainer: {
flexDirection: 'row',
alignItems: 'center',
alignSelf: 'center',
marginBottom: 20,
marginTop: 10
marginBottom: '5%',
marginTop: normalize(10)
},
checkbox: {
width: 20,
@ -154,7 +154,7 @@ const styles = StyleSheet.create ({
},
rememberMeText: {
fontWeight: 'bold',
fontSize: 17,
fontSize: normalize(19),
color: 'white'
},
checkboxChecked: {
@ -163,6 +163,6 @@ const styles = StyleSheet.create ({
inscriptionText: {
flexDirection: 'row',
alignSelf: 'center',
bottom: -80
bottom: '-20%'
}
})
Write Preview
Loading…
Cancel
Save