1import React, { ComponentType, forwardRef } from 'react';
2import { Platform } from 'react-native';
3
4import View, { ViewProps } from '../primitives/View';
5
6function createView(nativeProps: ViewProps = {}): ComponentType<ViewProps> {
7  return forwardRef((props: ViewProps, ref) => {
8    return <View {...nativeProps} {...props} ref={ref} />;
9  }) as ComponentType<ViewProps>;
10}
11
12export const Nav = createView(
13  Platform.select({
14    web: {
15      accessibilityRole: 'navigation',
16    },
17  })
18);
19export const Footer = createView(
20  Platform.select({
21    web: {
22      accessibilityRole: 'contentinfo',
23    },
24  })
25);
26export const Aside = createView(
27  Platform.select({
28    web: {
29      accessibilityRole: 'complementary',
30    },
31  })
32);
33export const Header = createView(
34  Platform.select({
35    web: {
36      accessibilityRole: 'banner',
37    },
38    default: {
39      accessibilityRole: 'header',
40    },
41  })
42);
43export const Main = createView(
44  Platform.select({
45    web: {
46      accessibilityRole: 'main',
47    },
48  })
49);
50export const Article = createView(
51  Platform.select({
52    web: {
53      accessibilityRole: 'article',
54    },
55  })
56);
57export const Section = createView({
58  accessibilityRole: 'summary', // region?
59});
60