Skip to content

Instantly share code, notes, and snippets.

@Saad-Bashar

Saad-Bashar/demo.js

Created February 5, 2021 04:09
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Saad-Bashar/26a3524e62152b871e49ba4bcf7bb4d3 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Saad-Bashar/26a3524e62152b871e49ba4bcf7bb4d3 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Saad-Bashar created this gist Feb 5, 2021.
    86 changes: 86 additions & 0 deletions demo.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,86 @@
    import * as React from 'react';
    import { Text, View, StyleSheet, FlatList, Dimensions } from 'react-native';
    import { Card } from 'react-native-paper';

    const { width, height } = Dimensions.get('window');

    const Metrics = {
    section: 16,
    halfSection: 8,
    };

    const CARD_WIDTH = width * 0.64;
    const CARD_ASPECT_RATIO = 240 / 198;
    const CARD_HEIGHT = CARD_WIDTH / CARD_ASPECT_RATIO;
    const IMAGE_CONTAINER_ASPECT_RATIO = 240 / 140;
    const IMAGE_CONTAINER_WIDTH = CARD_WIDTH;
    const IMAGE_CONTAINER_HEIGHT =
    IMAGE_CONTAINER_WIDTH / IMAGE_CONTAINER_ASPECT_RATIO;

    const styles = StyleSheet.create({
    topCars: {
    height: CARD_HEIGHT,
    width: CARD_WIDTH,
    borderRadius: 12,
    marginRight: Metrics.halfSection,
    },

    topCarsImage: {
    width: IMAGE_CONTAINER_WIDTH,
    height: IMAGE_CONTAINER_HEIGHT,
    borderRadius: 12,
    borderBottomLeftRadius: 0,
    borderBottomRightRadius: 0,
    },
    });

    export default function App() {
    return (
    <View style={{ flex: 1, paddingTop: 48 }}>
    <FlatList
    showsHorizontalScrollIndicator={false}
    contentContainerStyle={{
    paddingHorizontal: Metrics.section,
    paddingBottom: Metrics.section,
    }}
    horizontal={true}
    data={[
    {
    name: 'KFC',
    location: 'Bukit Bintang, Kuala Lumpur',
    bg: 'cyan',
    },
    {
    name: 'MacDonalds',
    location: 'Damansara, Kuala Lumpur',
    bg: 'orange',
    },
    {
    name: 'Pizza Hut',
    location: 'Damansara Jaya, Kuala Lumpur',
    bg: 'yellow',
    },
    {
    name: 'Pak Punjab',
    location: 'Bukit Heights, Kuala Lumpur',
    bg: 'grey',
    },
    ]}
    keyExtractor={(item, index) => index.toString()}
    renderItem={({ item, index }) => {
    return (
    <Card style={styles.topCars}>
    <View
    style={[styles.topCarsImage, { backgroundColor: item.bg }]}
    />
    <View style={{ padding: 12 }}>
    <Text>{item.name}</Text>
    <Text>{item.location}</Text>
    </View>
    </Card>
    );
    }}
    />
    </View>
    );
    }