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

Added definitions for react-native-elements

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

@@ -0,0 +1,166 @@
+// Type definitions for react-native-elements 0.13
+// Project: https://github.com/react-native-training/react-native-elements#readme
+// Definitions by: Kyle Roach <https://github.com/iRoachie>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 2.3
+
+import * as React from 'react';
+import { ViewStyle, TextStyle } from 'react-native';
+
+export interface ButtonIcon {
+    name?: string;
+    color?: string;
+    size?: number;
+    type?: 'material' | 'material-community' | 'simple-line-icon' | 'zocial' | 'font-awesome' | 'octicon' | 'ionicon' | 'foundation' | 'evilicon' | 'entypo';
+    buttonStyle?: TextStyle;
+}
+
+export interface ButtonProperties {
+    /**
+     * Specify other component such as TouchableOpacity or other
+     *
+     * @default TouchableHighlight (iOS), TouchableNativeFeedback (android)
+     */
+    Component?: JSX.Element;
+
+    /**
+     * Additional styling for button component
+     *
+     * @default null
+     */
+    buttonStyle?: ViewStyle;
+
+    /**
+     * Button title
+     */
+    title: string;
+
+    /**
+     * Makes button large
+     *
+     * @default false
+     */
+    large?: boolean;
+
+    /**
+     * Specify different font family
+     *
+     * @default System font (iOS), Sans Serif (android)
+     */
+    fontFamily?: string;
+
+    /**
+     * Specify font weight for title
+     *
+     * @default null
+     */
+    fontWeight?: string;
+
+    /**
+     * Moves icon to right of title
+     *
+     * @default false
+     */
+    iconRight?: boolean;
+
+    /**
+     * onPress method
+     */
+    onPress(): void;
+
+    /**
+     * onLongPress method
+     */
+    onLongPress?(): void;
+
+    /**
+     * Icon configuration
+     */
+    icon?: ButtonIcon;
+
+    /**
+     * Specify other icon component instead of default. The component will have all values from the icon prop
+     *
+     * @default MaterialIcon
+     * @see https://github.com/oblador/react-native-vector-icons#icon-component
+     */
+    iconComponent?: JSX.Element;
+
+    /**
+     * Background color of button
+     *
+     * @default #397af8
+     */
+    backgroundColor?: string;
+
+    /**
+     * Adds border radius to button
+     *  (Note: if you set this, don't forget to also set borderRadius to containerViewStyle prop, otherwise unexpected behaviour might occur)
+     *
+     * @default 0
+     */
+    borderRadius?: number;
+
+    /**
+     * Font color
+     *
+     * @default #fff
+     */
+    color?: string;
+
+    /**
+     * Text styling
+     *
+     * @default null
+     */
+    textStyle?: TextStyle;
+
+    /**
+     * Font size
+     *
+     * @default 18
+     */
+    fontSize?: number;
+
+    /**
+     * Underlay color for button press
+     *
+     * @default transparent
+     */
+    underlayColor?: string;
+
+    /**
+     * Flag to add raised button styling
+     *
+     * @default false
+     */
+    raised?: boolean;
+
+    /**
+     * Indicates button is disabled
+     *
+     * @default false
+     */
+    disabled?: boolean;
+
+    /**
+     * Disabled button styling
+     *
+     * @default null
+     */
+    disabledStyle?: ViewStyle;
+
+    /**
+     * Styling for Component container
+     *
+     * @default null
+     */
+    containerViewStyle?: ViewStyle;
+}
+
+/**
+ * Button component
+ *
+ * @desc https://react-native-training.github.io/react-native-elements/API/buttons/
+ */
+export class Button extends React.Component<ButtonProperties, any> {}

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

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { Button } from 'react-native-elements';
+
+class ButtonTest extends React.Component<any, any> {
+  handleButtonPress() {
+    console.log('I got pressed');
+  }
+
+  render() {
+    return (
+      <View>
+        <Button title='BUTTON' onPress={() => this.handleButtonPress()} />
+
+        <Button
+          raised
+          icon={{name: 'cached'}}
+          title='BUTTON WITH ICON' onPress={() => this.handleButtonPress()} />
+
+        <Button
+          large
+          iconRight
+          icon={{name: 'code'}}
+          title='LARGE WITH RIGHT ICON' onPress={() => this.handleButtonPress()} />
+
+        <Button
+          large
+          icon={{name: 'envira', type: 'font-awesome'}}
+          title='LARGE WITH RIGHT ICON' onPress={() => this.handleButtonPress()} />
+
+        <Button
+          large
+          icon={{name: 'squirrel', type: 'octicon', buttonStyle: styles.someButtonStyle }}
+          title='OCTICON' onPress={() => this.handleButtonPress()} />
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  someButtonStyle: {
+    color: 'pink'
+  }
+});

types/react-native-elements/tsconfig.json

@@ -0,0 +1,24 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": [
+            "es6",
+            "dom"
+        ],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictNullChecks": true,
+        "baseUrl": "../",
+        "typeRoots": [
+            "../"
+        ],
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true,
+        "jsx": "react"
+    },
+    "files": [
+        "index.d.ts",
+        "react-native-elements-tests.tsx"
+    ]
+}

types/react-native-elements/tslint.json

@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }