Created
June 29, 2023 11:22
-
-
Save catalinmiron/971d1b2e36384acb1974fecf5c93bcd6 to your computer and use it in GitHub Desktop.
Boilerplate for React Native Stack cards animation https://youtube.com/live/js5rZMxDU5k?feature=share
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export default [ | |
{ | |
id: '0fa08fa5-6d45-4d56-86e0-8fd56632dfd4', | |
role: 'Subcontractor', | |
type: 'Excavator', | |
from: '10:52 AM', | |
to: '9:40 PM', | |
duration: 2, | |
distance: 19.7, | |
}, | |
{ | |
id: 'f8f798bb-c7bd-4080-9bc6-aa4cabfab482', | |
role: 'Surveyor', | |
type: 'Crawler', | |
from: '11:45 AM', | |
to: '4:08 PM', | |
duration: 0, | |
distance: 55.2, | |
}, | |
{ | |
id: '068de8c4-1b87-4051-9885-ee28a48cd274', | |
role: 'Surveyor', | |
type: 'Scraper', | |
from: '9:04 AM', | |
to: '9:17 PM', | |
duration: 5, | |
distance: 1.9, | |
}, | |
{ | |
id: '269b6feb-7768-41d2-b030-2be94082a974', | |
role: 'Construction Expeditor', | |
type: 'Dragline', | |
from: '11:23 AM', | |
to: '7:58 PM', | |
duration: 5, | |
distance: 38.4, | |
}, | |
{ | |
id: 'c6ba0009-6a6f-45b0-98cd-730c9c0fd9b0', | |
role: 'Surveyor', | |
type: 'Dragline', | |
from: '11:25 AM', | |
to: '8:11 PM', | |
duration: 3, | |
distance: 33.4, | |
}, | |
{ | |
id: 'ab915f69-ce68-411b-abee-1f5d984af4e2', | |
role: 'Engineer', | |
type: 'Compactor', | |
from: '10:22 AM', | |
to: '5:37 PM', | |
duration: 4, | |
distance: 46.4, | |
}, | |
{ | |
id: '34d383d9-0f41-4c5c-b7fc-9d644b56956c', | |
role: 'Construction Worker', | |
type: 'Bulldozer', | |
from: '10:50 AM', | |
to: '4:10 PM', | |
duration: 4, | |
distance: 82.2, | |
}, | |
{ | |
id: '23ccaf32-7a0b-4652-84e2-5941770006ea', | |
role: 'Architect', | |
type: 'Dragline', | |
from: '9:34 AM', | |
to: '2:42 PM', | |
duration: 3, | |
distance: 60.9, | |
}, | |
{ | |
id: 'a2c6ba5a-5ead-4a8c-8170-7fbcf7cc74e7', | |
role: 'Estimator', | |
type: 'Grader', | |
from: '9:17 AM', | |
to: '6:57 PM', | |
duration: 4, | |
distance: 41.0, | |
}, | |
{ | |
id: '0374d4ca-6db9-4f96-b6b0-48d5365640c6', | |
role: 'Electrician', | |
type: 'Excavator', | |
from: '11:37 AM', | |
to: '8:09 PM', | |
duration: 1, | |
distance: 87.5, | |
}, | |
{ | |
id: '9c01c773-47b9-47a3-af6d-63f7050d334b', | |
role: 'Supervisor', | |
type: 'Dump Truck', | |
from: '1:00 PM', | |
to: '8:57 PM', | |
duration: 4, | |
distance: 61.0, | |
}, | |
{ | |
id: 'b48e2d3f-9036-4b30-bde4-11822bcf3b7d', | |
role: 'Electrician', | |
type: 'Skid-Steer', | |
from: '12:31 PM', | |
to: '3:31 PM', | |
duration: 0, | |
distance: 13.6, | |
}, | |
{ | |
id: '3ae4a618-0992-42da-bf1e-2bd654966705', | |
role: 'Supervisor', | |
type: 'Dragline', | |
from: '8:49 AM', | |
to: '6:33 PM', | |
duration: 5, | |
distance: 19.5, | |
}, | |
{ | |
id: '77ffe17d-d8e1-463d-a52b-614a5a86bdc9', | |
role: 'Construction Worker', | |
type: 'Skid-Steer', | |
from: '11:47 AM', | |
to: '2:34 PM', | |
duration: 3, | |
distance: 73.0, | |
}, | |
{ | |
id: '65eabab9-ae70-43cd-82e1-defb4ba90661', | |
role: 'Construction Expeditor', | |
type: 'Skid-Steer', | |
from: '8:08 AM', | |
to: '6:15 PM', | |
duration: 0, | |
distance: 97.5, | |
}, | |
{ | |
id: '583b0a0b-525e-4913-9c1d-a723efc729c1', | |
role: 'Engineer', | |
type: 'Backhoe', | |
from: '12:52 PM', | |
to: '8:22 PM', | |
duration: 3, | |
distance: 97.6, | |
}, | |
{ | |
id: '04fc95ec-dc61-4cdb-9a10-d7fd7c051e82', | |
role: 'Electrician', | |
type: 'Dragline', | |
from: '8:16 AM', | |
to: '2:22 PM', | |
duration: 3, | |
distance: 29.0, | |
}, | |
{ | |
id: '3911163d-4f64-436a-96ff-8014e5c9947f', | |
role: 'Electrician', | |
type: 'Dump Truck', | |
from: '10:57 AM', | |
to: '4:53 PM', | |
duration: 5, | |
distance: 67.4, | |
}, | |
{ | |
id: '4112aae1-eb2d-47fb-8c16-fd4849c31ec1', | |
role: 'Estimator', | |
type: 'Excavator', | |
from: '12:15 PM', | |
to: '4:14 PM', | |
duration: 4, | |
distance: 16.0, | |
}, | |
{ | |
id: '03f15446-7567-445a-aaca-bc5d9459b93a', | |
role: 'Construction Expeditor', | |
type: 'Trencher', | |
from: '8:16 AM', | |
to: '6:00 PM', | |
duration: 3, | |
distance: 22.9, | |
}, | |
] | |
export const locationImage = | |
'https://miro.medium.com/v2/resize:fit:1200/1*ybR6fbfwo6XTmWvTjXSOAA.png' |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Inspiration: https://twitter.com/Njoya17075607/status/1673228304982179840 | |
import Constants from 'expo-constants' | |
import { Dimensions, Image, StyleSheet, Text, View } from 'react-native' | |
const { width } = Dimensions.get('window') | |
import { Entypo } from '@expo/vector-icons' | |
import { StatusBar } from 'expo-status-bar' | |
import { GestureHandlerRootView } from 'react-native-gesture-handler' | |
import data, { locationImage } from './data' | |
const duration = 300 | |
const _size = width * 0.9 | |
const layout = { | |
borderRadius: 16, | |
width: _size, | |
height: _size * 1.27, | |
spacing: 12, | |
cardsGap: 22, | |
} | |
const maxVisibleItems = 6 | |
const colors = { | |
primary: '#6667AB', | |
light: '#fff', | |
dark: '#111', | |
} | |
function Card({ | |
info, | |
index, | |
totalLength, | |
}: { | |
totalLength: number | |
index: number | |
info: (typeof data)[0] | |
}) { | |
return ( | |
<View style={[styles.card]}> | |
<Text | |
style={[ | |
styles.title, | |
{ | |
position: 'absolute', | |
top: -layout.spacing, | |
right: layout.spacing, | |
fontSize: 102, | |
color: colors.primary, | |
opacity: 0.05, | |
}, | |
]} | |
> | |
{index} | |
</Text> | |
<View style={styles.cardContent}> | |
<Text style={styles.title}>{info.type}</Text> | |
<View style={styles.row}> | |
<Entypo name="clock" size={16} style={styles.icon} /> | |
<Text style={styles.subtitle}> | |
{info.from} - {info.to} | |
</Text> | |
</View> | |
<View style={styles.row}> | |
<Entypo name="location" size={16} style={styles.icon} /> | |
<Text style={styles.subtitle}>{info.distance} km</Text> | |
</View> | |
<View style={styles.row}> | |
<Entypo name="suitcase" size={16} style={styles.icon} /> | |
<Text style={styles.subtitle}>{info.role}</Text> | |
</View> | |
</View> | |
<Image source={{ uri: locationImage }} style={styles.locationImage} /> | |
</View> | |
) | |
} | |
export default function App() { | |
return ( | |
<GestureHandlerRootView style={styles.container}> | |
<StatusBar hidden /> | |
<View | |
style={{ | |
alignItems: 'center', | |
flex: 1, | |
justifyContent: 'flex-end', | |
marginBottom: layout.cardsGap * 2, | |
}} | |
pointerEvents="box-none" | |
> | |
{data.slice(0, 1).map((c, index) => { | |
return ( | |
<Card | |
info={c} | |
key={c.id} | |
index={index} | |
totalLength={data.length - 1} | |
/> | |
) | |
})} | |
</View> | |
</GestureHandlerRootView> | |
) | |
} | |
const styles = StyleSheet.create({ | |
container: { | |
flex: 1, | |
paddingTop: Constants.statusBarHeight, | |
backgroundColor: colors.primary, | |
padding: layout.spacing, | |
}, | |
card: { | |
borderRadius: layout.borderRadius, | |
width: layout.width, | |
height: layout.height, | |
padding: layout.spacing, | |
backgroundColor: colors.light, | |
}, | |
title: { fontSize: 32, fontWeight: '600' }, | |
subtitle: {}, | |
cardContent: { | |
gap: layout.spacing, | |
marginBottom: layout.spacing, | |
}, | |
locationImage: { | |
flex: 1, | |
borderRadius: layout.borderRadius - layout.spacing / 2, | |
}, | |
row: { | |
flexDirection: 'row', | |
columnGap: layout.spacing / 2, | |
alignItems: 'center', | |
}, | |
icon: {}, | |
}) |
Author
catalinmiron
commented
Jul 14, 2023
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment