Merge pull request #17769 from iRoachie/react-native-elements

[react-native-elements] Added HTML Style Headings(Text) Component

types/react-native-elements/README.md

@@ -0,0 +1,27 @@
+# [React Native Elements](https://github.com/react-native-training/react-native-elements)
+
+### Component Checklist
+List will update as typings are added
+
+- [x] Buttons
+- [ ] Badge
+- [ ] Social Icons / Social Icon Buttons
+- [ ] Icons
+- [ ] Side Menu
+- [ ] Form Elements
+- [ ] Search Bar
+- [ ] ButtonGroup
+- [ ] Checkboxes
+- [ ] List Element
+- [ ] Badge
+- [ ] Tab Bar Component
+- [x] HTML style headings
+- [ ] Card component
+- [ ] Pricing Component
+- [ ] Grid Component
+- [ ] Slider Component
+- [ ] Tile Component
+- [ ] Avatar Component
+- [ ] Rating Component
+- [ ] SwipeDeck Component
+- [ ] Header Component

types/react-native-elements/index.d.ts

@@ -7,6 +7,45 @@
 import * as React from 'react';
 import { ViewStyle, TextStyle } from 'react-native';
 
+export interface TextProps {
+    /**
+     * font size 40
+     */
+    h1?: boolean;
+
+    /**
+     * font size 34
+     */
+    h2?: boolean;
+
+    /**
+     * font size 28
+     */
+    h3?: boolean;
+
+    /**
+     * font size 22
+     */
+    h4?: boolean;
+
+    /**
+     * font family name
+     */
+    fontFamily?: string;
+
+    /**
+     * Additional styling for Text
+     */
+    style?: TextStyle;
+}
+
+/**
+ * HTML Style Headings
+ *
+ * @desc https://react-native-training.github.io/react-native-elements/API/HTML_style_headings/
+ */
+export class Text extends React.Component<TextProps, any> {}
+
 export interface ButtonIcon {
     name?: string;
     color?: string;

types/react-native-elements/react-native-elements-tests.tsx

@@ -1,6 +1,19 @@
 import * as React from 'react';
 import { View, StyleSheet } from 'react-native';
-import { Button } from 'react-native-elements';
+import { Button, Text } from 'react-native-elements';
+
+class TextTest extends React.Component<any, any> {
+  render() {
+    return (
+      <View>
+        <Text h1>Heading 1</Text>
+        <Text h2>Heading 2</Text>
+        <Text h3>Heading 3</Text>
+        <Text h4>Heading 4</Text>
+      </View>
+    );
+  }
+}
 
 class ButtonTest extends React.Component<any, any> {
   handleButtonPress() {