add detail screen

Drzaln · Jan 15, 2021 · f03b6a6 · f03b6a6
1 parent a6d6d69
commit f03b6a6
Show file tree

Hide file tree

Showing 9 changed files with 205 additions and 98 deletions.
diff --git a/App.js b/App.js
@@ -10,6 +10,8 @@ import MyTabBar from './src/components/MyTabBar/MyTabBar'
 import Live from './src/screens/Live/Live'
 import Statistic from './src/screens/Statistic/Statistic'
 import Blank from './src/screens/Blank/Blank'
+import Detail from './src/screens/Detail/Detail'
+import { timing } from 'react-native-reanimated'
 enableScreens()
 
 const App = () => {
@@ -27,12 +29,25 @@ const MyStack = () => {
 	return (
 		<Stack.Navigator
 			screenOptions={{
-				header: () => {
-					return <Header />
+				header: (props) => {
+					return <Header {...props} />
+				},
+				gestureEnabled: false,
+				transitionSpec: {
+					open: { animation: timing, config: { duration: 10 } },
+					close: { animation: timing, config: { duration: 10 } }
+				},
+				cardStyleInterpolator: ({ current: { progress } }) => {
+					return {
+						cardStyle: {
+							opacity: progress,
+						}
+					}
 				}
 			}}
 			headerMode='screen'>
 			<Stack.Screen name='Home' component={HomeTab} />
+			<Stack.Screen name='Detail' component={DetailTab} />
 		</Stack.Navigator>
 	)
 }
@@ -49,7 +64,7 @@ const HomeTab = () => {
 			removeClippedSubviews={true}
 			sceneContainerStyle={{ backgroundColor: '#030610' }}
 			tabBarOptions={{ scrollEnabled: true }}
-			tabBar={(props) => <MyTabBar {...props} />}>
+			tabBar={(props) => <MyTabBar mode='scroll' {...props} />}>
 			<Tab.Screen name='home' component={Home} />
 			<Tab.Screen name='news' component={News} />
 			<Tab.Screen name='live' component={Live} />
@@ -59,3 +74,22 @@ const HomeTab = () => {
 		</Tab.Navigator>
 	)
 }
+
+const DetailTab = () => {
+	return (
+		<Tab.Navigator
+			timingConfig={{ duration: 1 }}
+			swipeEnabled={false}
+			initialRouteName='home'
+			backBehavior='initialRoute'
+			removeClippedSubviews={true}
+			sceneContainerStyle={{ backgroundColor: '#030610' }}
+			tabBarOptions={{ scrollEnabled: true }}
+			tabBar={(props) => <MyTabBar {...props} />}>
+			<Tab.Screen name='serie a' component={Detail} />
+			<Tab.Screen name='ucl' component={Blank} />
+			<Tab.Screen name='coppa italia' component={Blank} />
+			<Tab.Screen name='super cup' component={Blank} />
+		</Tab.Navigator>
+	)
+}
diff --git a/src/assets/icons/Left.js b/src/assets/icons/Left.js
@@ -0,0 +1,15 @@
+import * as React from 'react'
+import Svg, { Path } from 'react-native-svg'
+
+const Left = (props) => {
+	return (
+		<Svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 31.494 31.494' {...props}>
+			<Path
+				d='M10.273 5.009a1.112 1.112 0 011.587 0 1.12 1.12 0 010 1.571l-8.047 8.047h26.554c.619 0 1.127.492 1.127 1.111s-.508 1.127-1.127 1.127H3.813l8.047 8.032c.429.444.429 1.159 0 1.587a1.112 1.112 0 01-1.587 0L.321 16.532a1.12 1.12 0 010-1.571l9.952-9.952z'
+				fill='#fafafa'
+			/>
+		</Svg>
+	)
+}
+
+export default Left
diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
@@ -1,18 +1,31 @@
 import React from 'react'
-import { View, Text } from 'react-native'
+import { View, Text, Pressable } from 'react-native'
+import Left from '../../assets/icons/Left'
 
-const Header = () => (
-	<View
-		style={{
-			justifyContent: 'center',
-			alignItems: 'center',
-			flexDirection: 'row',
-			backgroundColor: '#030610',
-			paddingVertical: 8
-		}}>
-		<Text style={{ fontFamily: 'JuventusFans-Bold', color: '#FAFAFA', fontSize: 30 }}>JUVENTUS</Text>
-		<Text style={{ fontFamily: 'Oswald-ExtraLight', color: '#FAFAFA', fontSize: 25 }}> TEAM</Text>
-	</View>
-)
+const Header = ({ previous, navigation }) => {
+	return (
+		<View
+			style={{
+				justifyContent: 'center',
+				alignItems: 'center',
+				flexDirection: 'row',
+				backgroundColor: '#030610',
+				paddingVertical: 8
+			}}>
+			{previous ? (
+				<Pressable
+					onPress={navigation.goBack}
+					hitSlop={{ top: 16, bottom: 16, left: 16, right: 16 }}
+					style={{ height: 20, width: 20, position: 'absolute', left: 16, top: 20 }}>
+					<Left />
+				</Pressable>
+			) : (
+				undefined
+			)}
+			<Text style={{ fontFamily: 'JuventusFans-Bold', color: '#FAFAFA', fontSize: 30 }}>JUVENTUS</Text>
+			<Text style={{ fontFamily: 'Oswald-ExtraLight', color: '#FAFAFA', fontSize: 25 }}> TEAM</Text>
+		</View>
+	)
+}
 
 export default Header
diff --git a/src/components/MyTabBar/MyTabBar.js b/src/components/MyTabBar/MyTabBar.js
@@ -3,7 +3,7 @@ import { View, Text, StatusBar } from 'react-native'
 import { ScrollView, TouchableOpacity } from 'react-native-gesture-handler'
 import Indicator from '../TopNavigation/Indicator'
 
-const MyTabBar = ({ state, navigation }) => {
+const MyTabBar = ({ state, navigation, mode }) => {
 	const [ measures, setMeasures ] = useState([])
 	const [ refresh, setRefresh ] = useState(new Date())
 	const isSelected = useRef()
@@ -13,8 +13,8 @@ const MyTabBar = ({ state, navigation }) => {
 		title: item.name,
 		route: item,
 		ref: createRef()
-    }))
-    
+	}))
+
 	useEffect(
 		() => {
 			setRefresh(new Date())
@@ -40,51 +40,106 @@ const MyTabBar = ({ state, navigation }) => {
 	)
 	return (
 		<View>
-			<StatusBar barStyle="light-content" backgroundColor="#030610" />
-			<ScrollView
-				ref={containerRef}
-				horizontal
-				overScrollMode="never"
-				showsHorizontalScrollIndicator={false}
-				showsVerticalScrollIndicator={false}
-				contentContainerStyle={{ backgroundColor: '#030610', paddingVertical: 16 }}>
-				{data.map((route, index) => {
-					const isFocused = state.index === index
-					if (state.index === index) {
-						isSelected.current = index
-					}
+			<StatusBar barStyle='light-content' backgroundColor='#030610' />
+			{mode === 'scroll' ? (
+				<ScrollView
+					ref={containerRef}
+					horizontal
+					overScrollMode='never'
+					showsHorizontalScrollIndicator={false}
+					showsVerticalScrollIndicator={false}
+					contentContainerStyle={{ backgroundColor: '#030610', paddingVertical: 16 }}>
+					{data.map((route, index) => {
+						const isFocused = state.index === index
+						if (state.index === index) {
+							isSelected.current = index
+						}
 
-					const onPress = useCallback(() => {
-						const event = navigation.emit({
-							type: 'tabPress',
-							target: route.route.key
+						const onPress = useCallback(() => {
+							const event = navigation.emit({
+								type: 'tabPress',
+								target: route.route.key
+							})
+
+							if (!isFocused && !event.defaultPrevented) {
+								navigation.navigate(route.route.name)
+							}
 						})
 
-						if (!isFocused && !event.defaultPrevented) {
-							navigation.navigate(route.route.name)
-						}
-					})
+						return (
+							<TouchableOpacity key={index} onPress={onPress}>
+								<View ref={route.ref} style={{ marginHorizontal: 16 }}>
+									<Text
+										style={{
+											fontFamily: 'Oswald-Regular',
+											color: isFocused ? '#FAFAFA' : '#3E4346',
+											fontSize: 16,
+											textTransform: 'uppercase'
+										}}>
+										{route.title}
+									</Text>
+								</View>
+							</TouchableOpacity>
+						)
+					})}
+					{measures && measures.length > 0 ? (
+						<Indicator measures={measures} data={data} selectedNav={isSelected.current} mode='underline' />
+					) : null}
+				</ScrollView>
+			) : (
+				<View
+					style={{
+						backgroundColor: '#030610',
+						paddingVertical: 16,
+						flexDirection: 'row',
+						justifyContent: 'center'
+					}}>
+					<View ref={containerRef} style={{ alignItems: 'center', flexDirection: 'row' }}>
+						{data.map((route, index) => {
+							const isFocused = state.index === index
+							if (state.index === index) {
+								isSelected.current = index
+							}
+
+							const onPress = useCallback(() => {
+								const event = navigation.emit({
+									type: 'tabPress',
+									target: route.route.key
+								})
+
+								if (!isFocused && !event.defaultPrevented) {
+									navigation.navigate(route.route.name)
+								}
+							})
 
-					return (
-						<TouchableOpacity key={index} onPress={onPress}>
-							<View ref={route.ref} style={{ marginHorizontal: 16 }}>
-								<Text
-									style={{
-										fontFamily: 'Oswald-Regular',
-										color: isFocused ? '#FAFAFA' : '#3E4346',
-										fontSize: 16,
-										textTransform: 'uppercase'
-									}}>
-									{route.title}
-								</Text>
-							</View>
-						</TouchableOpacity>
-					)
-				})}
-				{measures && measures.length > 0 ? (
-					<Indicator measures={measures} data={data} selectedNav={isSelected.current} mode="underline" />
-				) : null}
-			</ScrollView>
+							return (
+								<TouchableOpacity key={index} onPress={onPress}>
+									<View ref={route.ref} style={{ marginHorizontal: 16 }}>
+										<Text
+											style={{
+												fontFamily: 'Oswald-Regular',
+												color: isFocused ? '#FAFAFA' : '#3E4346',
+												fontSize: 16,
+												textTransform: 'uppercase'
+											}}>
+											{route.title}
+										</Text>
+									</View>
+								</TouchableOpacity>
+							)
+						})}
+						{measures && measures.length > 0 ? (
+							<Indicator
+								measures={measures}
+								data={data}
+								selectedNav={isSelected.current}
+								mode='underline'
+								style={{ bottom: -3 }}
+							/>
+						) : null}
+					</View>
+				</View>
+			)}
 		</View>
 	)
 }

diff --git a/src/components/Player/Player.js b/src/components/Player/Player.js
@@ -2,9 +2,9 @@ import React from 'react'
 import { View, Text, ImageBackground, Pressable } from 'react-native'
 import LinearGradient from 'react-native-linear-gradient'
 
-const Player = ({ data, index }) => {
+const Player = ({ data, index, onPress }) => {
 	return (
-		<Pressable onPress={() => console.log('pencet')} >
+		<Pressable onPress={onPress} >
 			<View style={{ width: 125, height: 200, marginLeft: index === 0 ? 70 : 16 }}>
 				<ImageBackground
 					style={{

diff --git a/src/components/TeamRole/TeamRole.js b/src/components/TeamRole/TeamRole.js
@@ -1,10 +1,9 @@
 import React from 'react'
-import { Text, View } from 'react-native'
 import { ScrollView } from 'react-native-gesture-handler'
 import Animated, { interpolate } from 'react-native-reanimated'
 import useWindowDimensions from 'react-native/Libraries/Utilities/useWindowDimensions'
 import Player from '../Player/Player'
-const TeamRole = ({ role, style, fontStyle, data, transition }) => {
+const TeamRole = ({ role, style, fontStyle, data, transition, onPress }) => {
 	const width = useWindowDimensions().width
 	const translateY = interpolate(transition, {
 		inputRange: [ 0, 1 ],
@@ -39,7 +38,7 @@ const TeamRole = ({ role, style, fontStyle, data, transition }) => {
 				{role}
 			</Animated.Text>
 			<Animated.View style={{ flexDirection: 'row', transform: [ { translateX } ] }}>
-				{data && data.length > 0 ? data.map((item, i) => <Player key={i} data={item} index={i} />) : null}
+				{data && data.length > 0 ? data.map((item, i) => <Player key={i} data={item} index={i} onPress={onPress} />) : null}
 			</Animated.View>
 		</ScrollView>
 	)

diff --git a/src/screens/Blank/Blank.js b/src/screens/Blank/Blank.js
@@ -1,22 +1,12 @@
 import React, { useMemo } from 'react'
-import { StyleSheet, View } from 'react-native'
+import { StyleSheet, Text, View } from 'react-native'
 import { ScrollView } from 'react-native-gesture-handler'
 import Svg, { Circle } from 'react-native-svg'
-import Animated, { interpolate, multiply, concat, set, useCode, block } from 'react-native-reanimated'
+import Animated, { interpolate, multiply, concat, set, useCode } from 'react-native-reanimated'
 import { clamp, timing, toRad, useValue } from 'react-native-redash/lib/module/v1'
 import AnimateableText from 'react-native-animateable-text'
-import { useFocusEffect } from '@react-navigation/native'
-
-const data = [
-	{
-		percentage: 75,
-		color: '#FFC93C',
-		max: 100
-	}
-]
 
 const Blank = () => {
-	const progress = 75
 	return (
 		<ScrollView
 			contentContainerStyle={{
@@ -29,8 +19,8 @@ const Blank = () => {
 			overScrollMode='never'
 			showsHorizontalScrollIndicator={false}
 			showsVerticalScrollIndicator={false}>
-			{/* <Text style={{ fontFamily: 'JuventusFans-Bold', color: '#3E4346', fontSize: 64 }}>J</Text> */}
-			<CircleComponent percent={progress} />
+			<Text style={{ fontFamily: 'JuventusFans-Bold', color: '#3E4346', fontSize: 64 }}>J</Text>
+			{/* <CircleComponent percent={progress} /> */}
 		</ScrollView>
 	)
 }
@@ -67,24 +57,8 @@ const CircleComponent = ({
 
 	//effect
 	useCode(() => [ set(progressAnimated, timing({ from: progressAnimated, to: percent, duration })) ], [ percent ])
-
 	useCode(() => [ set(progressSpin, timing({ from: progressSpin, to: percent })) ], [])
 
-	// useFocusEffect(
-	// 	React.useCallback(
-	// 		() => {
-	// 			block([set(progressAnimated, timing({ from: progressAnimated, to: percent, duration }))])
-	// 		},
-	// 		[ percent ]
-	// 	)
-	// )
-
-	// useFocusEffect(
-	// 	React.useCallback(() => {
-	// 		block([set(progressSpin, timing({ from: progressSpin, to: percent }))])
-	// 	}, [])
-	// )
-
 	// variable
 	const strokeDasharray = useMemo(() => `${radius * 2 * Math.PI} ${radius * 2 * Math.PI}`, [ radius ])
 	const alpha = interpolate(actualProgress, {