1import { Platform } from 'expo-modules-core';
2import * as React from 'react';
3import { Switch } from 'react-native';
4
5import { Page, Section } from '../components/Page';
6import Colors from '../constants/Colors';
7
8export default function SwitchScreen() {
9  const [value, setValue] = React.useState(true);
10
11  return (
12    <Page>
13      <Section title="Custom Color" row>
14        <Switch
15          value={value}
16          onValueChange={setValue}
17          thumbColor="gold"
18          trackColor={{ true: Colors.tintColor, false: 'red' }}
19        />
20      </Section>
21      <Section title="Disabled" row>
22        <Switch disabled value={value} />
23      </Section>
24      {Platform.OS === 'web' && (
25        <Section title="Larger" row>
26          <Switch value={value} onValueChange={setValue} style={{ height: 32, width: 128 }} />
27        </Section>
28      )}
29    </Page>
30  );
31}
32
33SwitchScreen.navigationOptions = {
34  title: 'Switch',
35};
36