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 accessibilityLevel: 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 // @ts-ignore 26 fontSize: em(2), 27 // @ts-ignore 28 marginVertical: em(0.67), 29 fontWeight: 'bold', 30 }, 31 h2: { 32 // @ts-ignore 33 fontSize: em(1.5), 34 // @ts-ignore 35 marginVertical: em(0.83), 36 fontWeight: 'bold', 37 }, 38 h3: { 39 // @ts-ignore 40 fontSize: em(1.17), 41 // @ts-ignore 42 marginVertical: em(1), 43 fontWeight: 'bold', 44 }, 45 h4: { 46 // @ts-ignore 47 fontSize: em(1), 48 // @ts-ignore 49 marginVertical: em(1.33), 50 fontWeight: 'bold', 51 }, 52 h5: { 53 // @ts-ignore 54 fontSize: em(0.83), 55 // @ts-ignore 56 marginVertical: em(1.67), 57 fontWeight: 'bold', 58 }, 59 h6: { 60 // @ts-ignore 61 fontSize: em(0.67), 62 // @ts-ignore 63 marginVertical: em(2.33), 64 fontWeight: 'bold', 65 }, 66}); 67//# sourceMappingURL=Headings.js.map