forked from lucas.delanier/MovieFinder
parent
2530644edf
commit
46a85f06e3
@ -0,0 +1,5 @@
|
|||||||
|
# Default ignored files
|
||||||
|
/shelf/
|
||||||
|
/workspace.xml
|
||||||
|
# Editor-based HTTP Client requests
|
||||||
|
/httpRequests/
|
@ -0,0 +1,12 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<module type="WEB_MODULE" version="4">
|
||||||
|
<component name="NewModuleRootManager">
|
||||||
|
<content url="file://$MODULE_DIR$">
|
||||||
|
<excludeFolder url="file://$MODULE_DIR$/temp" />
|
||||||
|
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
|
||||||
|
<excludeFolder url="file://$MODULE_DIR$/tmp" />
|
||||||
|
</content>
|
||||||
|
<orderEntry type="inheritedJdk" />
|
||||||
|
<orderEntry type="sourceFolder" forTests="false" />
|
||||||
|
</component>
|
||||||
|
</module>
|
@ -0,0 +1,8 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="ProjectModuleManager">
|
||||||
|
<modules>
|
||||||
|
<module fileurl="file://$PROJECT_DIR$/.idea/MoovieFinderTS.iml" filepath="$PROJECT_DIR$/.idea/MoovieFinderTS.iml" />
|
||||||
|
</modules>
|
||||||
|
</component>
|
||||||
|
</project>
|
@ -0,0 +1,6 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="VcsDirectoryMappings">
|
||||||
|
<mapping directory="" vcs="Git" />
|
||||||
|
</component>
|
||||||
|
</project>
|
After Width: | Height: | Size: 5.7 KiB |
After Width: | Height: | Size: 7.2 KiB |
After Width: | Height: | Size: 6.1 KiB |
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
@ -0,0 +1,88 @@
|
|||||||
|
import {FlatList, StyleSheet, SafeAreaView, Text, View, Image, TextInput} from 'react-native';
|
||||||
|
import * as React from "react";
|
||||||
|
import {BadgeFilm} from "./HomeScreen";
|
||||||
|
import { FontAwesomeIcon} from "@fortawesome/react-native-fontawesome";
|
||||||
|
import { faHeart} from "@fortawesome/free-solid-svg-icons";
|
||||||
|
|
||||||
|
|
||||||
|
export default function FavoriteScreen({ navigation }: RootTabScreenProps<'Favorite'>) {
|
||||||
|
return (
|
||||||
|
<SafeAreaView style={styles.container}>
|
||||||
|
<View style={{height: 50, justifyContent: "flex-start",flexDirection: 'row', paddingHorizontal:20, marginBottom: 15,marginVertical:5, alignItems:"flex-end"}} >
|
||||||
|
<FontAwesomeIcon icon={faHeart} style={{marginBottom: -5, marginRight: 20}} size={50} color="white" />
|
||||||
|
<Text style={{color: "white", fontSize:30}}>Favorite</Text>
|
||||||
|
</View>
|
||||||
|
<Image
|
||||||
|
source={require('../assets/images/delimiter.png')} style={{height: 2, width: 400, resizeMode:"fit"}}
|
||||||
|
/>
|
||||||
|
<View style={{height:40, width:400, backgroundColor:"grey", borderRadius:20, marginVertical:10, alignSelf:"center"}}>
|
||||||
|
<TextInput style={{width:300, height:40, marginHorizontal:20}} ></TextInput>
|
||||||
|
</View>
|
||||||
|
<FlatList
|
||||||
|
data={[
|
||||||
|
{key: 'Devin'},
|
||||||
|
{key: 'Dan'},
|
||||||
|
{key: 'Dominic'},
|
||||||
|
{key: 'Jackson'},
|
||||||
|
{key: 'James'},
|
||||||
|
{key: 'Joel'},
|
||||||
|
{key: 'John'},
|
||||||
|
{key: 'Jillian'},
|
||||||
|
{key: 'Jimmy'},
|
||||||
|
{key: 'Julie'},
|
||||||
|
]}
|
||||||
|
renderItem={({item}) => <ListWidget name={item.key} ></ListWidget>}
|
||||||
|
/>
|
||||||
|
</SafeAreaView>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
container: {
|
||||||
|
flex: 1,
|
||||||
|
paddingTop: 22,
|
||||||
|
backgroundColor: "#232323"
|
||||||
|
},
|
||||||
|
item: {
|
||||||
|
padding: 10,
|
||||||
|
fontSize: 18,
|
||||||
|
height: 44,
|
||||||
|
color: "white"
|
||||||
|
},
|
||||||
|
filmCard: {
|
||||||
|
width: 70,
|
||||||
|
height: 100,
|
||||||
|
borderRadius: 8,
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
type ListWidgetProps = {
|
||||||
|
name : String
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
export function ListWidget(props: ListWidgetProps) {
|
||||||
|
return (
|
||||||
|
<View style={{height: 100, borderRadius: 20, justifyContent: "flex-start", flexDirection: 'row', paddingHorizontal:20, marginVertical:5}} >
|
||||||
|
<Image
|
||||||
|
style={styles.filmCard}
|
||||||
|
source={{
|
||||||
|
uri: 'https://fr.web.img4.acsta.net/pictures/21/11/16/10/01/4860598.jpg',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<View style={{height: 100, borderRadius: 20, justifyContent: "flex-start", flexDirection: 'column', paddingLeft:10}} >
|
||||||
|
<Text style={{color: "white", fontWeight:"bold", fontSize:25}}>{props.name}</Text>
|
||||||
|
<Text style={{color: "grey", fontWeight:"bold", fontSize:17}}>{props.name}</Text>
|
||||||
|
<View style={{marginVertical:10}}>
|
||||||
|
<BadgeFilm name={"Science-Ficton"}/>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
|
||||||
|
);
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,172 @@
|
|||||||
|
import * as React from 'react';
|
||||||
|
import {Button,TouchableOpacity,ScrollView,View, Text, StyleSheet, Image, ImageBackground, SafeAreaView} from 'react-native';
|
||||||
|
import {RootStackScreenProps} from "../types.js";
|
||||||
|
import Rive from 'rive-react-native';
|
||||||
|
import {useRef} from "react";
|
||||||
|
import {RiveViewManager} from "rive-react-native/lib/typescript/Rive.js";
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
background: {
|
||||||
|
backgroundColor: 'black',
|
||||||
|
height: '100%',
|
||||||
|
},
|
||||||
|
|
||||||
|
container:{
|
||||||
|
flex: 1,
|
||||||
|
},
|
||||||
|
filmCard: {
|
||||||
|
width: 310,
|
||||||
|
height: 450,
|
||||||
|
justifyContent:'center',
|
||||||
|
marginLeft:'auto',
|
||||||
|
marginRight:'auto',
|
||||||
|
borderRadius: 15,
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
image: {
|
||||||
|
position: 'absolute',
|
||||||
|
shadowColor: "#000",
|
||||||
|
shadowOffset: {
|
||||||
|
width: 0,
|
||||||
|
height: 6,
|
||||||
|
},
|
||||||
|
shadowOpacity: 0.39,
|
||||||
|
shadowRadius: 8.30,
|
||||||
|
flex: 1,
|
||||||
|
paddingTop: 230,
|
||||||
|
alignSelf: 'center',
|
||||||
|
elevation: 13,
|
||||||
|
},
|
||||||
|
backgroundImage: {
|
||||||
|
flex: 1,
|
||||||
|
resizeMode: 'cover', // or 'stretch'
|
||||||
|
},
|
||||||
|
child: {
|
||||||
|
flex: 1,
|
||||||
|
backgroundColor: 'rgba(0,0,0,0.5)',
|
||||||
|
},
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
export default function App({ navigation }: RootStackScreenProps<'Home'>) {
|
||||||
|
const riveRef = useRef();
|
||||||
|
return (
|
||||||
|
<SafeAreaView style={styles.background}>
|
||||||
|
|
||||||
|
<ImageBackground blurRadius={20}
|
||||||
|
style={{
|
||||||
|
position: 'absolute',
|
||||||
|
width: "120%",
|
||||||
|
height: "120%",
|
||||||
|
justifyContent: "center",
|
||||||
|
alignItems: "center",
|
||||||
|
opacity: 0.28
|
||||||
|
}}
|
||||||
|
source={{
|
||||||
|
uri: 'https://fr.web.img4.acsta.net/pictures/21/11/16/10/01/4860598.jpg',
|
||||||
|
}}
|
||||||
|
></ImageBackground>
|
||||||
|
<View style={styles.image}>
|
||||||
|
<Image
|
||||||
|
style={styles.filmCard}
|
||||||
|
source={{
|
||||||
|
uri: 'https://fr.web.img4.acsta.net/pictures/21/11/16/10/01/4860598.jpg',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
<View style={{height:35, marginTop: 10, marginBottom: 15}}>
|
||||||
|
<ScrollView
|
||||||
|
horizontal={true}
|
||||||
|
showsHorizontalScrollIndicator={false}>
|
||||||
|
<BadgeGenre name={"cc"} isSelected={false}></BadgeGenre>
|
||||||
|
<BadgeGenre name={"cc"} isSelected={false}></BadgeGenre>
|
||||||
|
<BadgeGenre name={"cc"} isSelected={false}></BadgeGenre>
|
||||||
|
<BadgeGenre name={"cc"} isSelected={true}></BadgeGenre>
|
||||||
|
<BadgeGenre name={"cc"} isSelected={false}></BadgeGenre>
|
||||||
|
<BadgeGenre name={"cc"} isSelected={false}></BadgeGenre>
|
||||||
|
<BadgeGenre name={"cc"} isSelected={false}></BadgeGenre>
|
||||||
|
<BadgeGenre name={"cc"} isSelected={false}></BadgeGenre>
|
||||||
|
<BadgeGenre name={"cc"} isSelected={false}></BadgeGenre>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</ScrollView>
|
||||||
|
</View>
|
||||||
|
<View style={{ flexDirection: 'column', alignSelf: 'flex-start', alignItems: 'flex-start', paddingHorizontal: 30, flex: 1 }}>
|
||||||
|
|
||||||
|
<View style={{ flexDirection: 'row', alignSelf: 'flex-start', justifyContent: 'flex-start', width: "100%"}}>
|
||||||
|
<BadgeFilm name={"Science-fiction"}></BadgeFilm>
|
||||||
|
<BadgeFilm name={"Science-fiction"}></BadgeFilm>
|
||||||
|
<BadgeFilm name={"9:11"}></BadgeFilm>
|
||||||
|
</View>
|
||||||
|
<View>
|
||||||
|
<Text numberOfLines={1} style={{color: "white", fontSize: 28, fontWeight: "bold", paddingTop: 5}}>SPIDER-MAN No Way Home</Text>
|
||||||
|
</View>
|
||||||
|
<Text style={{color: "grey", fontSize: 20, fontWeight: "bold"}}>Jean-Marc généreux</Text>
|
||||||
|
</View>
|
||||||
|
<View style={{ flexDirection: 'row' ,alignItems: 'center', justifyContent: "space-evenly", paddingHorizontal: 30, height: 130}}>
|
||||||
|
<TouchableOpacity>
|
||||||
|
<Image
|
||||||
|
source={require('../assets/images/WatchLater.png')} style={{height: 70, width: 70, resizeMode:"fit"}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
</TouchableOpacity>
|
||||||
|
<TouchableOpacity>
|
||||||
|
<Image
|
||||||
|
source={require('../assets/images/Generate.png')} style={{height: 90, width: 90, resizeMode:"fit"}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
</TouchableOpacity>
|
||||||
|
<TouchableOpacity>
|
||||||
|
<Image
|
||||||
|
source={require('../assets/images/Favorite.png')} style={{height: 70, width: 70, resizeMode:"fit"}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
</SafeAreaView>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
type BadgeGenreProps = {
|
||||||
|
name : String
|
||||||
|
isSelected: Boolean
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
export function BadgeGenre(props: BadgeGenreProps) {
|
||||||
|
if(props.isSelected==false){
|
||||||
|
return (
|
||||||
|
<View style={{paddingHorizontal: 20, marginHorizontal: 5,height: 35, backgroundColor: '#2E2E2E', borderRadius: 20, justifyContent: "center"}} >
|
||||||
|
<Text style={{color: "white"}}>{props.name}</Text>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
);
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
return (
|
||||||
|
<View style={{paddingHorizontal: 20, marginHorizontal: 5,height: 35, backgroundColor: '#5C5C5C', borderRadius: 20, borderWidth: 1, borderColor: "white" ,justifyContent: "center"}} >
|
||||||
|
<Text style={{color: "white"}}>{props.name}</Text>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
type BadgeFilmProps = {
|
||||||
|
name : String
|
||||||
|
|
||||||
|
}
|
||||||
|
export function BadgeFilm(props: BadgeFilmProps) {
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View style={{paddingHorizontal: 15, marginHorizontal: 5,height: 30, backgroundColor: '#8906B8', borderRadius: 15, justifyContent: "center"}} >
|
||||||
|
<Text style={{color: "white", fontSize: 12, fontWeight:"bold"}}>{props.name}</Text>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
);
|
||||||
|
|
||||||
|
|
||||||
|
}
|
@ -1,35 +0,0 @@
|
|||||||
import { StatusBar } from 'expo-status-bar';
|
|
||||||
import { Platform, StyleSheet } from 'react-native';
|
|
||||||
|
|
||||||
import EditScreenInfo from '../components/EditScreenInfo';
|
|
||||||
import { Text, View } from '../components/Themed';
|
|
||||||
|
|
||||||
export default function ModalScreen() {
|
|
||||||
return (
|
|
||||||
<View style={styles.container}>
|
|
||||||
<Text style={styles.title}>Modal</Text>
|
|
||||||
<View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
|
|
||||||
<EditScreenInfo path="/screens/ModalScreen.tsx" />
|
|
||||||
|
|
||||||
{/* Use a light status bar on iOS to account for the black space above the modal */}
|
|
||||||
<StatusBar style={Platform.OS === 'ios' ? 'light' : 'auto'} />
|
|
||||||
</View>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
|
||||||
container: {
|
|
||||||
flex: 1,
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
fontSize: 20,
|
|
||||||
fontWeight: 'bold',
|
|
||||||
},
|
|
||||||
separator: {
|
|
||||||
marginVertical: 30,
|
|
||||||
height: 1,
|
|
||||||
width: '80%',
|
|
||||||
},
|
|
||||||
});
|
|
@ -1,32 +0,0 @@
|
|||||||
import { StyleSheet } from 'react-native';
|
|
||||||
|
|
||||||
import EditScreenInfo from '../components/EditScreenInfo';
|
|
||||||
import { Text, View } from '../components/Themed';
|
|
||||||
import { RootTabScreenProps } from '../types';
|
|
||||||
|
|
||||||
export default function TabOneScreen({ navigation }: RootTabScreenProps<'TabOne'>) {
|
|
||||||
return (
|
|
||||||
<View style={styles.container}>
|
|
||||||
<Text style={styles.title}>Tab One</Text>
|
|
||||||
<View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
|
|
||||||
<EditScreenInfo path="/screens/TabOneScreen.tsx" />
|
|
||||||
</View>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
|
||||||
container: {
|
|
||||||
flex: 1,
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
fontSize: 20,
|
|
||||||
fontWeight: 'bold',
|
|
||||||
},
|
|
||||||
separator: {
|
|
||||||
marginVertical: 30,
|
|
||||||
height: 1,
|
|
||||||
width: '80%',
|
|
||||||
},
|
|
||||||
});
|
|
@ -1,31 +0,0 @@
|
|||||||
import { StyleSheet } from 'react-native';
|
|
||||||
|
|
||||||
import EditScreenInfo from '../components/EditScreenInfo';
|
|
||||||
import { Text, View } from '../components/Themed';
|
|
||||||
|
|
||||||
export default function TabTwoScreen() {
|
|
||||||
return (
|
|
||||||
<View style={styles.container}>
|
|
||||||
<Text style={styles.title}>Tab Two</Text>
|
|
||||||
<View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
|
|
||||||
<EditScreenInfo path="/screens/TabTwoScreen.tsx" />
|
|
||||||
</View>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
|
||||||
container: {
|
|
||||||
flex: 1,
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
fontSize: 20,
|
|
||||||
fontWeight: 'bold',
|
|
||||||
},
|
|
||||||
separator: {
|
|
||||||
marginVertical: 30,
|
|
||||||
height: 1,
|
|
||||||
width: '80%',
|
|
||||||
},
|
|
||||||
});
|
|
@ -0,0 +1,95 @@
|
|||||||
|
import {FlatList, StyleSheet, SafeAreaView, Text, View, Image, TextInput} from 'react-native';
|
||||||
|
import * as React from "react";
|
||||||
|
import {BadgeFilm} from "./HomeScreen";
|
||||||
|
import { FontAwesomeIcon} from "@fortawesome/react-native-fontawesome";
|
||||||
|
import { faClock} from "@fortawesome/free-solid-svg-icons";
|
||||||
|
import LinearGradient from 'react-native-linear-gradient';
|
||||||
|
|
||||||
|
export default function WatchLaterScreen({ navigation }: RootTabScreenProps<'WatchLater'>) {
|
||||||
|
return (
|
||||||
|
<SafeAreaView style={styles.container}>
|
||||||
|
<View style={{height: 50, justifyContent: "flex-start",flexDirection: 'row', paddingHorizontal:20, marginBottom: 15,marginVertical:5, alignItems:"flex-end"}} >
|
||||||
|
<FontAwesomeIcon icon={faClock} style={{marginBottom: -5, marginRight: 20}} size={50} color="white" />
|
||||||
|
|
||||||
|
<Text style={{color: "white", fontSize:30}}>Watch Later</Text>
|
||||||
|
</View>
|
||||||
|
<Image
|
||||||
|
source={require('../assets/images/delimiter.png')} style={{height: 2, width: 400, resizeMode:"fit"}}
|
||||||
|
/>
|
||||||
|
<View style={{height:40, width:400, backgroundColor:"grey", borderRadius:20, marginVertical:10, alignSelf:"center"}}>
|
||||||
|
<TextInput style={{width:300, height:40, marginHorizontal:20}} ></TextInput>
|
||||||
|
</View>
|
||||||
|
<FlatList
|
||||||
|
data={[
|
||||||
|
{key: 'Devin'},
|
||||||
|
{key: 'Dan'},
|
||||||
|
{key: 'Dominic'},
|
||||||
|
{key: 'Jackson'},
|
||||||
|
{key: 'James'},
|
||||||
|
{key: 'Joel'},
|
||||||
|
{key: 'John'},
|
||||||
|
{key: 'Jillian'},
|
||||||
|
{key: 'Jimmy'},
|
||||||
|
{key: 'Julie'},
|
||||||
|
]}
|
||||||
|
renderItem={({item}) => <ListWidget name={item.key} ></ListWidget>}
|
||||||
|
/>
|
||||||
|
</SafeAreaView>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
container: {
|
||||||
|
flex: 1,
|
||||||
|
paddingTop: 22,
|
||||||
|
backgroundColor: "#232323"
|
||||||
|
},
|
||||||
|
linearGradient: {
|
||||||
|
flex: 1,
|
||||||
|
paddingLeft: 15,
|
||||||
|
paddingRight: 15,
|
||||||
|
borderRadius: 5
|
||||||
|
},
|
||||||
|
item: {
|
||||||
|
padding: 10,
|
||||||
|
fontSize: 18,
|
||||||
|
height: 44,
|
||||||
|
color: "white"
|
||||||
|
},
|
||||||
|
filmCard: {
|
||||||
|
width: 70,
|
||||||
|
height: 100,
|
||||||
|
borderRadius: 8,
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
type ListWidgetProps = {
|
||||||
|
name : String
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
export function ListWidget(props: ListWidgetProps) {
|
||||||
|
return (
|
||||||
|
<View style={{height: 100, borderRadius: 20, justifyContent: "flex-start", flexDirection: 'row', paddingHorizontal:20, marginVertical:5}} >
|
||||||
|
<Image
|
||||||
|
style={styles.filmCard}
|
||||||
|
source={{
|
||||||
|
uri: 'https://fr.web.img4.acsta.net/pictures/21/11/16/10/01/4860598.jpg',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<View style={{height: 100, borderRadius: 20, justifyContent: "flex-start", flexDirection: 'column', paddingLeft:10}} >
|
||||||
|
<Text style={{color: "white", fontWeight:"bold", fontSize:25}}>{props.name}</Text>
|
||||||
|
<Text style={{color: "grey", fontWeight:"bold", fontSize:17}}>{props.name}</Text>
|
||||||
|
<View style={{marginVertical:10}}>
|
||||||
|
<BadgeFilm name={"Science-Ficton"}/>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
|
||||||
|
);
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in new issue