1import * as React from 'react';
2import {
3  Platform,
4  Text,
5  TouchableHighlight,
6  TouchableNativeFeedback,
7  TouchableOpacity,
8  View,
9} from 'react-native';
10
11import { Page, Section } from '../components/Page';
12import Colors from '../constants/Colors';
13
14export default function TouchablesScreen() {
15  const buttonStyle = {
16    paddingHorizontal: 25,
17    paddingVertical: 20,
18    marginRight: 10,
19    backgroundColor: Colors.tintColor,
20    borderRadius: 5,
21  };
22
23  const buttonText = {
24    color: '#fff',
25  };
26
27  return (
28    <Page>
29      <Section title="TouchableHighlight">
30        <TouchableHighlight
31          underlayColor="rgba(1, 1, 255, 0.9)"
32          style={buttonStyle}
33          onPress={() => {}}>
34          <Text style={buttonText}>Highlight!</Text>
35        </TouchableHighlight>
36      </Section>
37
38      <Section title="TouchableOpacity">
39        <TouchableOpacity style={buttonStyle} onPress={() => {}}>
40          <Text style={buttonText}>Opacity!</Text>
41        </TouchableOpacity>
42      </Section>
43
44      {Platform.OS === 'android' && (
45        <Section title="TouchableNativeFeedback">
46          <TouchableNativeFeedback
47            background={TouchableNativeFeedback.Ripple('#fff', false)}
48            onPress={() => {}}
49            delayPressIn={0}>
50            <View style={buttonStyle}>
51              <Text style={buttonText}>Native feedback!</Text>
52            </View>
53          </TouchableNativeFeedback>
54        </Section>
55      )}
56    </Page>
57  );
58}
59
60TouchablesScreen.navigationOptions = {
61  title: 'Touchables',
62};
63