All Projects → dmbfm → react-native-card-list

dmbfm / react-native-card-list

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

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to react-native-card-list

React Native Sortable List
React Native Sortable List component
Stars: ✭ 678 (+3468.42%)
Mutual labels:  listview, react-native-component
monalisa-ui
MonalisaUI ✨ React Native UI Library
Stars: ✭ 37 (+94.74%)
Mutual labels:  ui-components, react-native-component
Nativescript Ui Feedback
This repository is used for customer feedback regarding Telerik UI for NativeScript. The issues system here is used by customers who want to submit their feature requests or vote for existing ones.
Stars: ✭ 110 (+478.95%)
Mutual labels:  listview, ui-components
react-native-masonry-brick-list
Staggered Or Masonary List View For React Native Written in pure js
Stars: ✭ 24 (+26.32%)
Mutual labels:  listview, react-native-component
React Native Sglistview
SGListView is a memory minded implementation of React Native's ListView
Stars: ✭ 745 (+3821.05%)
Mutual labels:  listview, react-native-component
Google Books Android Viewer
Android library to bridge between RecyclerView and sources like web page or database. Includes demonstrator (Google Books viewer)
Stars: ✭ 37 (+94.74%)
Mutual labels:  listview, ui-components
Uicard
Generic UI for card games like Hearthstone, Magic Arena and Slay the Spire...
Stars: ✭ 142 (+647.37%)
Mutual labels:  cards, ui-components
user profile
User profile UI designed in flutter
Stars: ✭ 14 (-26.32%)
Mutual labels:  listview
PinnedSectionRecyclerView
simple RecyclerView with pinned sections for Android.
Stars: ✭ 21 (+10.53%)
Mutual labels:  listview
ClassifySimpleDemo
二级列表,商品分类,RecyclerView,expanablelistview
Stars: ✭ 48 (+152.63%)
Mutual labels:  listview
dotacard
You are at FODA artwork repository. Play now for free
Stars: ✭ 22 (+15.79%)
Mutual labels:  cards
react-native-select-pro
React Native dropdown (select) component developed by Mobile Reality
Stars: ✭ 79 (+315.79%)
Mutual labels:  react-native-component
react-native-uiw
A UI component library based on React Native (Android & iOS).
Stars: ✭ 28 (+47.37%)
Mutual labels:  react-native-component
react-native-image-blur-shadow
A React Native Image component with Blur Drop Shadows,100% JavaScript, 0 dependency component. Supports Android, iOS and Web. A light weight <Image/> component for your react native project.
Stars: ✭ 80 (+321.05%)
Mutual labels:  react-native-component
sectionedmergeadapter
Work with sub-sections in your Android ListView
Stars: ✭ 22 (+15.79%)
Mutual labels:  listview
amusementclub2.0
Source code for Amusement Club Discord bot using Eris library
Stars: ✭ 16 (-15.79%)
Mutual labels:  cards
react-native-window-guard
SafeAreaView alternative for React Native which provides relevant window insets for both iOS and Android.
Stars: ✭ 30 (+57.89%)
Mutual labels:  react-native-component
TwerkyListView
A beautifully animated recycler-list-view, that twerks the way African earthworms do in order to move
Stars: ✭ 19 (+0%)
Mutual labels:  listview
AdvancedList-SwiftUI
MOVED to https://github.com/crelies/AdvancedList | Advanced list with empty, error and loading state implemented with SwiftUI
Stars: ✭ 41 (+115.79%)
Mutual labels:  listview
react-native-carousel-component
React Native Carousel Component for IOS & Android
Stars: ✭ 61 (+221.05%)
Mutual labels:  react-native-component

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',
  }
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].