-
Notifications
You must be signed in to change notification settings - Fork 44
/
cards.js
47 lines (41 loc) · 1.53 KB
/
cards.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
import React from 'react';
import { Text, View, ScrollView, Image } from 'react-native';
import { IconToggle, getTheme } from 'react-native-material-kit';
import styles from './styles';
const theme = getTheme();
const base64Icon = 'http://www.getmdl.io/assets/demos/welcome_card.jpg';
const action = <Text> My action</Text>;
const menu = (
<IconToggle checked={true} onCheckedChange={this._onIconChecked} onPress={this._onIconClicked}>
<Text pointerEvents="none" style={styles.toggleTextOff}>
Off
</Text>
<Text stateChecked pointerEvents="none" style={[styles.toggleText, styles.toggleTextOn]}>
On
</Text>
</IconToggle>
);
const Cards = () => (
<ScrollView style={styles.scrollView}>
<View style={styles.container}>
{/* Here the magic happens*/}
<View style={theme.cardStyle}>
<Image source={{ uri: base64Icon }} style={theme.cardImageStyle} />
<Text style={theme.cardTitleStyle}>Welcome</Text>
<View // TextView padding not handled well on Android https://github.com/facebook/react-native/issues/3233
style={{
padding: 15,
}}
>
<Text style={[theme.cardContentStyle, { padding: 0 }]}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque
lacus eleifend lacinia...
</Text>
</View>
<View style={theme.cardMenuStyle}>{menu}</View>
<View style={theme.cardActionStyle}>{action}</View>
</View>
</View>
</ScrollView>
);
export default Cards;