1import React from 'react';
2import {
3  StyleSheet,
4  Text,
5  TouchableHighlight,
6  PixelRatio,
7  View,
8  TouchableHighlightProps,
9  ViewStyle,
10  TextStyle,
11} from 'react-native';
12
13import Colors from '../constants/Colors';
14
15interface Props extends TouchableHighlightProps {
16  title: string;
17}
18
19export default class ListButton extends React.Component<Props> {
20  render() {
21    const style: ViewStyle[] = [styles.button];
22    const labelStyles: TextStyle[] = [styles.label];
23    if (this.props.disabled) {
24      style.push(styles.disabledButton);
25      labelStyles.push(styles.disabledLabel);
26    }
27    return (
28      <View style={[styles.container, this.props.style]}>
29        <TouchableHighlight
30          style={style}
31          disabled={this.props.disabled}
32          onPress={this.props.onPress}
33          underlayColor="#dddddd"
34        >
35          <Text style={labelStyles}>{this.props.title}</Text>
36        </TouchableHighlight>
37      </View>
38    );
39  }
40}
41
42const styles = StyleSheet.create({
43  container: {},
44  button: {
45    paddingVertical: 10,
46    backgroundColor: 'transparent',
47    borderBottomWidth: 1.0 / PixelRatio.get(),
48    borderBottomColor: '#cccccc',
49  },
50  disabledButton: {},
51  label: {
52    color: Colors.tintColor,
53    fontWeight: '700',
54  },
55  disabledLabel: {
56    color: '#999999',
57  },
58});
59