Skip to content
This repository has been archived by the owner on Aug 19, 2021. It is now read-only.

A React Native component which displays a list of image cards that zoom to fullscreen

Notifications You must be signed in to change notification settings

dmbfm/react-native-card-list

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React Native Cards List

gif

A React Native component that displays a list of image cards with titles. When the user presses a card, the card expands to full screen, displaying additional content.

Example

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';
import { CardList } from 'react-native-card-list';

const cards = [
  {
    id: "0",
    title: "Starry Night",
    picture: require('./assets/starry.jpg'),
    content: <Text>Starry Night</Text>
  },
  {
    id: "1",
    title: "Wheat Field",
    picture: require('./assets/wheat.jpg'),
    content: <Text>Wheat Field with Cypresses</Text>
  },
  {
    id: "2",
    title: "Bedroom in Arles",
    picture: require('./assets/bed.jpg'),
    content: <Text>Bedroom in Arles</Text>
  }
]

export default class App extends Component<{}> {
  render() {
    return (
      <View style={styles.container}>
        <CardList cards={cards} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  }

Releases

No releases published

Packages

No packages published