1import Checkbox from 'expo-checkbox';
2import * as React from 'react';
3import { Platform, Text } from 'react-native';
4
5import { Page, Section } from '../components/Page';
6import { useResolvedValue } from '../utilities/useResolvedValue';
7
8export default function CheckboxScreen() {
9  const [isAvailable] = useResolvedValue(Checkbox.isAvailableAsync);
10  const [value, setValue] = React.useState(true);
11
12  if (isAvailable === null) {
13    return (
14      <Page>
15        <Text>Checking if checkbox is available on this platform...</Text>
16      </Page>
17    );
18  }
19
20  if (isAvailable === false) {
21    return (
22      <Page>
23        <Text>CheckBox is not available on this platform.</Text>
24      </Page>
25    );
26  }
27
28  return (
29    <Page>
30      <Section title="Default">
31        <Checkbox value={value} onValueChange={setValue} />
32      </Section>
33      <Section title="Custom Color">
34        <Checkbox value={value} onValueChange={setValue} color="#4630EB" />
35      </Section>
36      <Section title="Disabled">
37        <Checkbox disabled value={value} />
38      </Section>
39      {Platform.OS === 'web' && (
40        <Section title="Larger">
41          <Checkbox value={value} onValueChange={setValue} style={{ height: 32, width: 32 }} />
42        </Section>
43      )}
44    </Page>
45  );
46}
47
48CheckboxScreen.navigationOptions = {
49  title: 'Checkbox',
50};
51