1import * as React from 'react';
2import { TextInput } from 'react-native';
3
4import { Page, Section } from '../components/Page';
5
6export default function TextInputScreen() {
7  const [singleLineValue, updateSingle] = React.useState('');
8  const [secureTextValue, updateSecure] = React.useState('');
9
10  const textInputStyle: React.ComponentProps<typeof TextInput>['style'] = {
11    width: '80%',
12    borderRadius: 2,
13    borderWidth: 1,
14    borderColor: '#eee',
15    fontSize: 15,
16    padding: 5,
17    height: 40,
18  };
19
20  return (
21    <Page>
22      <Section title="Single">
23        <TextInput
24          placeholder="A single line text input"
25          onChangeText={updateSingle}
26          style={[{ marginBottom: 10 }, textInputStyle]}
27          value={singleLineValue}
28        />
29      </Section>
30      <Section title="Secure">
31        <TextInput
32          placeholder="A secure text field"
33          onChangeText={updateSecure}
34          secureTextEntry
35          keyboardAppearance="dark"
36          style={[{ marginBottom: 10 }, textInputStyle]}
37          value={secureTextValue}
38        />
39      </Section>
40    </Page>
41  );
42}
43
44TextInputScreen.navigationOptions = {
45  title: 'TextInput',
46};
47