Skip to content

Instantly share code, notes, and snippets.

@pojntfx

pojntfx/app.js

Created February 12, 2018 21:10
Show Gist options
  • Save pojntfx/5916af40b4cdad3b2f122263b02ec976 to your computer and use it in GitHub Desktop.
Save pojntfx/5916af40b4cdad3b2f122263b02ec976 to your computer and use it in GitHub Desktop.
Download ZIP
React Native & NativeBase Cards (A mix of Instagram and Reddit)
Raw
app.js
import React, { Component } from 'react';
import { Image } from 'react-native';
import {
Container,
Header,
Content,
Card,
CardItem,
Thumbnail,
Text,
Button,
Icon,
Left,
Body,
Right,
Grid,
Col,
} from 'native-base'; // 2.3.8
import { Ionicons } from '@expo/vector-icons'; // 6.2.2
export default class App extends Component {
render() {
return (
<Container>
<Header />
<Content>
<Card>
<CardItem>
<Left>
<Thumbnail
source={{
uri: 'http://awallpapersimages.com/wp-content/uploads/2016/09/Pretty-gorgeous-Indian-girl-in-stylish-dres.jpg',
}}
/>
<Body>
<Text>Ayind Posri</Text>
<Text note>trviad</Text>
</Body>
<Right><Text note>25 Minutes ago</Text></Right>
</Left>
</CardItem>
<CardItem cardBody>
<Image
source={{
uri: 'https://olekrueger.files.wordpress.com/2011/09/new_york_september_2009_01.jpg',
}}
style={{ height: 200, width: null, flex: 1 }}
/>
</CardItem>
<CardItem>
<Body>
<Text style={{ fontSize: 13 }}>
Et est nostrum minima. Odio quae velit sit aut dolorum. Ad vel sed et. Ut voluptatem architecto quia quas qui. Laudantium alias qui quidem
{' '}
<Text note style={{ fontSize: 13 }}>... more</Text>
</Text>
</Body>
</CardItem>
<CardItem>
<Body>
<Grid>
<Col style={{ marginRight: 10 }}>
<Button success block>
<Icon name="arrow-up"/>
<Text >Upvote</Text>
</Button>
</Col>
<Col style={{ marginLeft: 10 }}>
<Button danger block>
<Text >Downvote</Text>
<Icon name="arrow-down"/>
</Button>
</Col>
</Grid>
</Body>
</CardItem>
<CardItem style={{ paddingTop: 0 }}>
<Left>
<Button transparent>
<Icon name="share" style={{ color: 'black' }} />
<Text style={{ color: 'black' }}>Share</Text>
</Button>
<Button transparent>
<Icon name="chatbubbles" style={{ color: 'black' }} />
<Text style={{ color: 'black' }}>Comments</Text>
</Button>
<Button transparent>
<Icon name="repeat" style={{ color: 'black' }} />
<Text style={{ color: 'black' }}>Cite</Text>
</Button>
</Left>
<Right>
<Button transparent>
<Icon name="more" style={{ color: 'black' }} />
</Button>
</Right>
</CardItem>
</Card>
<Card>
<CardItem>
<Left>
<Thumbnail
source={{
uri: 'http://awallpapersimages.com/wp-content/uploads/2016/09/Pretty-gorgeous-Indian-girl-in-stylish-dres.jpg',
}}
/>
<Body>
<Text>Ayind Posri</Text>
<Text note>trviad</Text>
</Body>
<Right><Text note>25 Minutes ago</Text></Right>
</Left>
</CardItem>
<CardItem cardBody>
<Image
source={{
uri: 'https://olekrueger.files.wordpress.com/2011/09/new_york_september_2009_01.jpg',
}}
style={{ height: 200, width: null, flex: 1 }}
/>
</CardItem>
<CardItem>
<Body>
<Text style={{ fontSize: 13 }}>
Et est nostrum minima. Odio quae velit sit aut dolorum. Ad vel sed et. Ut voluptatem architecto quia quas qui. Laudantium alias qui quidem
{' '}
<Text note style={{ fontSize: 13 }}>... more</Text>
</Text>
</Body>
</CardItem>
<CardItem>
<Body>
<Grid>
<Col style={{ marginRight: 10 }}>
<Button success block>
<Icon name="arrow-up"/>
<Text >Upvote</Text>
</Button>
</Col>
<Col style={{ marginLeft: 10 }}>
<Button danger block>
<Text >Downvote</Text>
<Icon name="arrow-down"/>
</Button>
</Col>
</Grid>
</Body>
</CardItem>
<CardItem style={{ paddingTop: 0 }}>
<Left>
<Button transparent>
<Icon name="share" style={{ color: 'black' }} />
<Text style={{ color: 'black' }}>Share</Text>
</Button>
<Button transparent>
<Icon name="chatbubbles" style={{ color: 'black' }} />
<Text style={{ color: 'black' }}>Comments</Text>
</Button>
<Button transparent>
<Icon name="repeat" style={{ color: 'black' }} />
<Text style={{ color: 'black' }}>Cite</Text>
</Button>
</Left>
<Right>
<Button transparent>
<Icon name="more" style={{ color: 'black' }} />
</Button>
</Right>
</CardItem>
</Card>
</Content>
</Container>
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment