Skip to content

Instantly share code, notes, and snippets.

@joon-aca

joon-aca/StackCards.tsx

Forked from catalinmiron/StackCards.tsx
Created August 23, 2024 19:24
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save joon-aca/9a8d12ecdb140e42f7a7c0854d55109d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save joon-aca/9a8d12ecdb140e42f7a7c0854d55109d to your computer and use it in GitHub Desktop.
Download ZIP
Boilerplate for React Native Stack cards animation https://youtube.com/live/js5rZMxDU5k?feature=share
Raw
data.ts
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'
Raw
StackCards.tsx
// 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: {},
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment