Commit 29c9e1fa authored by Thor-Herman's avatar Thor-Herman
Browse files

Style MoviePage #11 #5

parent 60e39e09
import { RouteProp } from '@react-navigation/native';
import { StackNavigationProp } from '@react-navigation/stack';
import { Image, Item } from 'native-base';
import React from 'react';
import { View, Text } from 'react-native';
import { Image, View, Text, StyleSheet } from 'react-native';
import { useSelector } from 'react-redux';
import { StackParamList } from '../components/App';
import { RootState } from '../reducers';
......@@ -15,15 +14,44 @@ type Props = {
route: MovieScreenRouteProp;
};
const MoviePage = ({navigation, route}: Props) => {
const movie: Movie = useSelector((state: RootState) => state.movies.byId[route.params.id]);
// Detailed page about a movie
const MoviePage = ({ route }: Props) => {
const movie: Movie = useSelector(
(state: RootState) => state.movies.byId[route.params.id] // Retrieves the current movie based on the navigation id
);
return (
<View>
<Text>{movie.id}</Text>
<View style={styles.imageView}>
<Image source={{ uri: movie.image }} style={styles.image} />
</View>
<Text style={styles.title}>
{movie.title} ({movie.year})
</Text>
<Text>{movie.description}</Text>
<Image source={{ uri: movie.image }} />
<Text>Genres: {movie.genre}</Text>
</View>
);
};
const styles = StyleSheet.create({
title: {
fontSize: 20,
paddingTop: 5,
paddingBottom: 5,
},
imageView: {
paddingLeft: 0,
paddingRight: 10,
paddingTop: 10,
margin: 0,
},
image: {
height: 300,
resizeMode: 'contain',
padding: 0,
margin: 0,
},
});
export default MoviePage;
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment