1import {
2  A,
3  Article,
4  Aside,
5  B,
6  BR,
7  Caption,
8  Code,
9  Del,
10  EM,
11  Footer,
12  H1,
13  H2,
14  H3,
15  H4,
16  H5,
17  H6,
18  Header,
19  I,
20  LI,
21  Main,
22  Mark,
23  Nav,
24  P,
25  Pre,
26  S,
27  Section,
28  Strong,
29  Table,
30  TBody,
31  TD,
32  TFoot,
33  TH,
34  THead,
35  Time,
36  TR,
37  UL,
38} from '@expo/html-elements';
39import View from '@expo/html-elements/build/primitives/View';
40import React from 'react';
41import { ScrollView } from 'react-native';
42
43function CustomArticle({ title, children }: any) {
44  return (
45    <Article style={{ marginVertical: 8, backgroundColor: 'white' }}>
46      <Header style={{ padding: 8, backgroundColor: '#e6e6e6' }}>
47        <B>{title}</B>
48      </Header>
49      <Section style={{ padding: 8 }}>{children}</Section>
50    </Article>
51  );
52}
53
54function HeadingArticle() {
55  return (
56    <CustomArticle title="Headings">
57      <H1>Header 1</H1>
58      <H2>Header 2</H2>
59      <H3>Header 3</H3>
60      <H4>Header 4</H4>
61      <H5>Header 5</H5>
62      <H6>Header 6</H6>
63    </CustomArticle>
64  );
65}
66
67function LayoutArticle() {
68  return (
69    <CustomArticle title="Layout">
70      <Nav style={{ padding: 8, borderWidth: 1 }}>
71        <P>Nav</P>
72      </Nav>
73
74      <Main style={{ padding: 8, borderWidth: 1 }}>
75        <P>Main</P>
76        <Article style={{ padding: 8, borderWidth: 1 }}>
77          <P>Article</P>
78          <View style={{ flexDirection: 'row', flex: 1 }}>
79            <Section style={{ padding: 8, flex: 2, borderWidth: 1 }}>
80              <P>Section</P>
81            </Section>
82            <Aside style={{ padding: 8, flex: 1, borderWidth: 1 }}>
83              <P>Aside</P>
84            </Aside>
85          </View>
86        </Article>
87      </Main>
88      <Footer style={{ padding: 8, borderWidth: 1 }}>
89        <P>Footer</P>
90      </Footer>
91    </CustomArticle>
92  );
93}
94
95function TextArticle() {
96  return (
97    <CustomArticle title="Text">
98      {/* @ts-ignore */}
99      <A href="https://expo.io/" target="_blank">
100        Anchor
101      </A>
102      <P>Paragraph</P>
103      <B>Bold</B>
104      <Strong>Strong</Strong>
105      <Mark>Mark</Mark>
106      <Code>Code</Code>
107      {/* @ts-ignore */}
108      <Time>Feb 2020</Time>
109      <I>Italic</I>
110      <EM>Emphasize</EM>
111      <S>Striked</S>
112      <Del>Deleted</Del>
113      <Pre>{preformattedText}</Pre>
114      <Pre>
115        <Code>{`<Code />`}</Code>
116      </Pre>
117      <P>
118        A neat nested <Mark>sentence</Mark> with <B>TONS</B> of effects{' '}
119        <Code>const value = true</Code>
120      </P>
121    </CustomArticle>
122  );
123}
124
125function ListsArticle() {
126  return (
127    <CustomArticle title="Lists">
128      <UL>
129        <LI>Grow a long, majestic beard.</LI>
130        <LI>Wear a tall, pointed hat.</LI>
131        <LI>
132          <LI>Grow a long, majestic beard.</LI>
133          <LI>Wear a tall, pointed hat.</LI>
134          <LI>Have I mentioned the beard?</LI>
135        </LI>
136        <LI>Have I mentioned the beard?</LI>
137      </UL>
138    </CustomArticle>
139  );
140}
141function TablesArticle() {
142  return (
143    <CustomArticle title="Tables">
144      <Table>
145        <Caption>Caption</Caption>
146        <THead>
147          <TR>
148            <TH colSpan={2}>The table header</TH>
149          </TR>
150        </THead>
151        <TBody>
152          <TR>
153            <TD>The table body</TD>
154            <TD>with two columns</TD>
155          </TR>
156          <TR>
157            <TD>Row two</TD>
158            <TD>Column two</TD>
159          </TR>
160        </TBody>
161        <TFoot>
162          <TR>
163            <TH colSpan={2}>The table footer</TH>
164          </TR>
165        </TFoot>
166      </Table>
167    </CustomArticle>
168  );
169}
170
171const preformattedText = `body {
172  color: red;
173}`;
174
175export default class HTMLScreen extends React.Component {
176  static navigationOptions = {
177    title: 'HTML',
178  };
179
180  render() {
181    return (
182      <ScrollView style={{ flex: 1, paddingHorizontal: 16 }}>
183        <Nav style={{ padding: 8, borderBottomWidth: 1 }}>
184          <B>Nav</B>
185        </Nav>
186
187        <Main>
188          <LayoutArticle />
189          <HeadingArticle />
190          <TextArticle />
191          <ListsArticle />
192          <TablesArticle />
193        </Main>
194        <BR />
195        <Footer>
196          <B>Footer</B>
197        </Footer>
198      </ScrollView>
199    );
200  }
201}
202