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      <A href="https://expo.dev/" target="_blank">
99        Anchor
100      </A>
101      <P>Paragraph</P>
102      <B>Bold</B>
103      <Strong>Strong</Strong>
104      <Mark>Mark</Mark>
105      <Code>Code</Code>
106      <Time>Feb 2020</Time>
107      <I>Italic</I>
108      <EM>Emphasize</EM>
109      <S>Striked</S>
110      <Del>Deleted</Del>
111      <Pre>{preformattedText}</Pre>
112      <Pre>
113        <Code>{`<Code />`}</Code>
114      </Pre>
115      <P>
116        A neat nested <Mark>sentence</Mark> with <B>TONS</B> of effects{' '}
117        <Code>const value = true</Code>
118      </P>
119    </CustomArticle>
120  );
121}
122
123function ListsArticle() {
124  return (
125    <CustomArticle title="Lists">
126      <UL>
127        <LI>Grow a long, majestic beard.</LI>
128        <LI>Wear a tall, pointed hat.</LI>
129        <LI>
130          <LI>Grow a long, majestic beard.</LI>
131          <LI>Wear a tall, pointed hat.</LI>
132          <LI>Have I mentioned the beard?</LI>
133        </LI>
134        <LI>Have I mentioned the beard?</LI>
135      </UL>
136    </CustomArticle>
137  );
138}
139function TablesArticle() {
140  return (
141    <CustomArticle title="Tables">
142      <Table>
143        <Caption>Caption</Caption>
144        <THead>
145          <TR>
146            <TH colSpan={2}>The table header</TH>
147          </TR>
148        </THead>
149        <TBody>
150          <TR>
151            <TD>The table body</TD>
152            <TD>with two columns</TD>
153          </TR>
154          <TR>
155            <TD>Row two</TD>
156            <TD>Column two</TD>
157          </TR>
158        </TBody>
159        <TFoot>
160          <TR>
161            <TH colSpan={2}>The table footer</TH>
162          </TR>
163        </TFoot>
164      </Table>
165    </CustomArticle>
166  );
167}
168
169const preformattedText = `body {
170  color: red;
171}`;
172
173export default class HTMLScreen extends React.Component {
174  static navigationOptions = {
175    title: 'HTML',
176  };
177
178  render() {
179    return (
180      <ScrollView style={{ flex: 1, paddingHorizontal: 16 }}>
181        <Nav style={{ padding: 8, borderBottomWidth: 1 }}>
182          <B>Nav</B>
183        </Nav>
184
185        <Main>
186          <LayoutArticle />
187          <HeadingArticle />
188          <TextArticle />
189          <ListsArticle />
190          <TablesArticle />
191        </Main>
192        <BR />
193        <Footer>
194          <B>Footer</B>
195        </Footer>
196      </ScrollView>
197    );
198  }
199}
200