1import React, { forwardRef } from 'react'; 2import { Platform, StyleSheet } from 'react-native'; 3import { em } from '../css/units'; 4import Text from '../primitives/Text'; 5function createHeadingComponent(level) { 6 const nativeProps = Platform.select({ 7 web: { 8 'aria-level': `${level}`, 9 }, 10 default: {}, 11 }); 12 return forwardRef((props, ref) => { 13 return (React.createElement(Text, { ...nativeProps, accessibilityRole: "header", ...props, style: [styles[`h${level}`], props.style], ref: ref })); 14 }); 15} 16export const H1 = createHeadingComponent(1); 17export const H2 = createHeadingComponent(2); 18export const H3 = createHeadingComponent(3); 19export const H4 = createHeadingComponent(4); 20export const H5 = createHeadingComponent(5); 21export const H6 = createHeadingComponent(6); 22// Default web styles: http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css 23const styles = StyleSheet.create({ 24 h1: { 25 fontSize: em(2), 26 marginVertical: em(0.67), 27 fontWeight: 'bold', 28 }, 29 h2: { 30 fontSize: em(1.5), 31 marginVertical: em(0.83), 32 fontWeight: 'bold', 33 }, 34 h3: { 35 fontSize: em(1.17), 36 marginVertical: em(1), 37 fontWeight: 'bold', 38 }, 39 h4: { 40 fontSize: em(1), 41 marginVertical: em(1.33), 42 fontWeight: 'bold', 43 }, 44 h5: { 45 fontSize: em(0.83), 46 marginVertical: em(1.67), 47 fontWeight: 'bold', 48 }, 49 h6: { 50 fontSize: em(0.67), 51 marginVertical: em(2.33), 52 fontWeight: 'bold', 53 }, 54}); 55//# sourceMappingURL=Headings.js.map