Commit 8c20e1d3 authored by Peter Skaar Nordby's avatar Peter Skaar Nordby
Browse files

Merge branch '17-forbedre-animasjon-til-filmvisning' into 'master'

Resolve "Forbedre animasjon til filmvisning"

Closes #17

See merge request !16
parents 9ab798e3 c927d850
import React, { useEffect, useState } from "react";
import { Image, StyleSheet, Text, View } from "react-native";
import { AirbnbRating } from "react-native-ratings";
import { MovieEntity } from "../store/ducks/movies/types";
import { Dimensions } from "react-native";
import { useThemeColor } from "./Themed";
import React, { useEffect, useState } from 'react';
import { Image, StyleSheet, Text, View } from 'react-native';
import { AirbnbRating } from 'react-native-ratings';
import { MovieEntity } from '../store/ducks/movies/types';
import { Dimensions } from 'react-native';
import { useThemeColor } from './Themed';
import { useNavigation } from '@react-navigation/native';
interface MovieCardProps {
movie: MovieEntity;
}
const window = Dimensions.get("window");
const screen = Dimensions.get("screen");
const window = Dimensions.get('window');
const screen = Dimensions.get('screen');
/**
* Movie Card component
*/
......@@ -27,14 +28,24 @@ const MovieCard = (props: MovieCardProps): JSX.Element => {
};
useEffect(() => {
Dimensions.addEventListener("change", ({ window, screen }) => {
Dimensions.addEventListener('change', ({ window, screen }) => {
setDimensions({ window, screen });
});
}, []);
const navigation = useNavigation();
const navigateToMovie = () => {
navigation.navigate('Movie', {
movieTitle: movie.title,
movieID: movie.id,
});
};
return (
<View
style={[styles.card, { backgroundColor: useThemeColor({}, "component") }]}
style={[styles.card, { backgroundColor: useThemeColor({}, 'component') }]}
onTouchEnd={navigateToMovie}
>
<Image
source={{
......@@ -43,9 +54,7 @@ const MovieCard = (props: MovieCardProps): JSX.Element => {
style={[styles.poster, { width: iw(), height: ih() }]}
/>
<View style={[styles.cardInfo, { maxWidth: iw() }]}>
<Text
style={[styles.titleText, { color: useThemeColor({}, "inputText") }]}
>
<Text style={[styles.titleText, { color: useThemeColor({}, 'inputText') }]}>
{movie.title}
</Text>
<AirbnbRating
......@@ -64,32 +73,32 @@ const styles = StyleSheet.create({
poster: {
borderTopLeftRadius: 5,
borderTopRightRadius: 5,
resizeMode: "contain",
resizeMode: 'contain',
maxWidth: 300,
},
card: {
flex: 1 / 2,
display: "flex",
justifyContent: "center",
alignItems: "center",
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
marginHorizontal: 4,
marginVertical: 4,
borderRadius: 5,
textAlign: "center",
textAlign: 'center',
shadowColor: "#171717",
shadowColor: '#171717',
shadowOffset: { width: -2, height: 4 },
shadowOpacity: 0.2,
shadowRadius: 3,
elevation: 1,
},
titleText: {
textAlign: "center",
fontWeight: "bold",
textAlign: 'center',
fontWeight: 'bold',
},
cardInfo: {
padding: 4,
textAlign: "center",
textAlign: 'center',
minHeight: 75,
},
});
......
......@@ -3,40 +3,28 @@
* https://reactnavigation.org/docs/getting-started
*
*/
import { FontAwesome, MaterialIcons } from "@expo/vector-icons";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import {
DarkTheme,
DefaultTheme,
NavigationContainer,
} from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import * as React from "react";
import { ColorSchemeName, Pressable } from "react-native";
import { useDispatch } from "react-redux";
import Colors from "../constants/Colors";
import useColorScheme from "../hooks/useColorScheme";
import MovieScreen from "../screens/MovieScreen";
import MovieTableScreen from "../screens/MovieTableScreen";
import NotFoundScreen from "../screens/NotFoundScreen";
import Profile from "../screens/Profile";
import { signOut } from "../store/ducks/auth/actions";
import {
RootStackParamList,
RootTabParamList,
RootTabScreenProps,
} from "../types";
import LinkingConfiguration from "./LinkingConfiguration";
import { FontAwesome, MaterialIcons } from '@expo/vector-icons';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { DarkTheme, DefaultTheme, NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import * as React from 'react';
import { ColorSchemeName, Pressable } from 'react-native';
import { useDispatch } from 'react-redux';
import Colors from '../constants/Colors';
import useColorScheme from '../hooks/useColorScheme';
import MovieScreen from '../screens/MovieScreen';
import MovieTableScreen from '../screens/MovieTableScreen';
import NotFoundScreen from '../screens/NotFoundScreen';
import Profile from '../screens/Profile';
import { signOut } from '../store/ducks/auth/actions';
import { RootStackParamList, RootTabParamList, RootTabScreenProps } from '../types';
import LinkingConfiguration from './LinkingConfiguration';
export default function Navigation({
colorScheme,
}: {
colorScheme: ColorSchemeName;
}) {
export default function Navigation({ colorScheme }: { colorScheme: ColorSchemeName }) {
return (
<NavigationContainer
linking={LinkingConfiguration}
theme={colorScheme === "dark" ? DarkTheme : DefaultTheme}
theme={colorScheme === 'dark' ? DarkTheme : DefaultTheme}
>
<RootNavigator />
</NavigationContainer>
......@@ -52,20 +40,15 @@ const Stack = createNativeStackNavigator<RootStackParamList>();
function RootNavigator() {
return (
<Stack.Navigator>
<Stack.Screen name='Root' component={BottomTabNavigator} options={{ headerShown: false }} />
<Stack.Screen name='NotFound' component={NotFoundScreen} options={{ title: 'Oops!' }} />
<Stack.Screen
name="Root"
component={BottomTabNavigator}
options={{ headerShown: false }}
/>
<Stack.Screen
name="NotFound"
component={NotFoundScreen}
options={{ title: "Oops!" }}
/>
<Stack.Screen
name="Movie"
name='Movie'
component={MovieScreen}
options={({ route }) => ({ title: route.params.movieTitle })}
options={({ route }) => ({
title: route.params.movieTitle,
animation: 'slide_from_right',
})}
/>
</Stack.Navigator>
);
......@@ -83,34 +66,29 @@ const BottomTabNavigator = () => {
const colorScheme = useColorScheme();
return (
<BottomTab.Navigator
initialRouteName="Movies"
initialRouteName='Movies'
screenOptions={{
tabBarActiveTintColor: Colors[colorScheme].tint,
}}
>
<BottomTab.Screen
name="Movies"
name='Movies'
component={MovieTableScreen}
options={{
title: "Movies",
title: 'Movies',
tabBarIcon: ({ color }) => (
<MaterialIcons
name="movie"
size={30}
style={{ marginBottom: -3 }}
color={color}
/>
<MaterialIcons name='movie' size={30} style={{ marginBottom: -3 }} color={color} />
),
}}
/>
<BottomTab.Screen
name="Profile"
name='Profile'
component={Profile}
options={{
title: "Profile",
title: 'Profile',
tabBarIcon: ({ color }) => (
<MaterialIcons
name="person-outline"
name='person-outline'
size={30}
style={{ marginBottom: -3 }}
color={color}
......@@ -124,7 +102,7 @@ const BottomTabNavigator = () => {
})}
>
<FontAwesome
name="sign-out"
name='sign-out'
size={25}
color={Colors[colorScheme].text}
style={{ marginRight: 15 }}
......
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