MovieScreen.tsx 1.48 KB
Newer Older
1
2
import { RouteProp } from '@react-navigation/native';
import { StackNavigationProp } from '@react-navigation/stack';
3
import React from 'react';
4
5
6
7
8
import { Image, View, Text, StyleSheet } from 'react-native';
import { useSelector } from 'react-redux';
import { StackParamList } from '../components/App';
import { RootState } from '../reducers';
import { Movie } from '../types/movies';
9

10
11
12
13
14
15
16
17
type MovieScreenRouteProp = RouteProp<StackParamList, 'Movie'>;
type MovieScreenNavigationProp = StackNavigationProp<StackParamList, 'Movie'>;
type Props = {
  navigation: MovieScreenNavigationProp;
  route: MovieScreenRouteProp;
};

// Detailed page about a movie
Thor-Herman's avatar
Thor-Herman committed
18
const MovieScreen = ({ route }: Props) => {
19
20
21
  const movie: Movie = useSelector(
    (state: RootState) => state.movies.byId[route.params.id] // Retrieves the current movie based on the navigation id
  );
22
23
  return (
    <View>
24
25
26
27
28
29
30
31
      <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>
      <Text>Genres: {movie.genre}</Text>
32
33
34
35
    </View>
  );
};

36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
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,
  },
});

Thor-Herman's avatar
Thor-Herman committed
56
export default MovieScreen;