[typescript] Fix Icon.Button props TypeScript types

README.md

@@ -42,8 +42,9 @@ I'll be honest with you, it's not straightforward. You should set aside about an
   - Neither are the native vendor font loading or image source related methods.
   - Probably there won't be anything important. The main thing to look out for are user-facing API changes, the `@expo/vector-icons` internals are different enough that you don't need to worry about it.
   - Were any dependencies added? Check imports against those in the current package.json, see why they were added - maybe they support the `bin` scripts, in which case we need them.
+  - TypeScript/Flow types for Icon/Icon.Button components may need to be updated.
 5. Run `yarn` when you're done and it'll copy vendor files over to build.
-6. Go to the website directory, test it out by changing the `@expo/vector-icons` version to `"../"` (TODO: investigate this quirk!). If new icons were added, ensure that they work here. 
+6. Go to the website directory, test it out by changing the `@expo/vector-icons` version to `"../"` (TODO: investigate this quirk!). If new icons were added, ensure that they work here.
   - While you're here, it would be kind of you to update the Expo SDK version to latest.
 7. Publish an alpha release, switch back the version in the website to that version.
 8. Open a PR, have someone else like @brentvatne look at it. If it's good to go, publish the final version, update the website version again, then merge. The website will be deployed when you merge to master.

src/createIconSet.tsx

@@ -1,6 +1,6 @@
 import * as Font from "expo-font";
 import React, { ComponentClass } from "react";
-import { Text, TextProps, TouchableHighlightProps, ViewProps, OpaqueColorValue } from "react-native";
+import { Text, TextProps, TouchableHighlightProps, ViewProps, OpaqueColorValue, TextStyle, ViewStyle } from "react-native";
 
 import createIconSet from "./vendor/react-native-vector-icons/lib/create-icon-set";
 import createIconButtonComponent from "./vendor/react-native-vector-icons/lib/icon-button";
@@ -10,30 +10,6 @@ export {
   DEFAULT_ICON_SIZE
 } from "./vendor/react-native-vector-icons/lib/create-icon-set";
 
-export interface IconButtonProps<GLYPHS extends string> extends ViewProps, TouchableHighlightProps {
-  /**
-   * Size of the icon, can also be passed as fontSize in the style object.
-   *
-   * @default 12
-   */
-  size?: number;
-
-  /**
-   * Name of the icon to show
-   *
-   * See Icon Explorer app
-   * {@link https://expo.github.io/vector-icons/}
-   */
-  name: GLYPHS;
-
-  /**
-   * Color of the icon. Can be a string or OpaqueColorValue (returned from
-   * PlatformColor(..))
-   *
-   */
-  color?: string | OpaqueColorValue;
-}
-
 export interface IconProps<GLYPHS extends string> extends TextProps {
   /**
    * Size of the icon, can also be passed as fontSize in the style object.
@@ -58,6 +34,48 @@ export interface IconProps<GLYPHS extends string> extends TextProps {
   color?: string | OpaqueColorValue;
 }
 
+export interface IconButtonProps<GLYPHS extends string> extends IconProps<GLYPHS>, ViewProps, TouchableHighlightProps {
+  /**
+   * Text and icon color
+   * Use iconStyle or nest a Text component if you need different colors.
+   * Can be a string or OpaqueColorValue (returned from PlatformColor(..))
+   *
+   *  @default 'white'
+   */
+  color?: string | OpaqueColorValue;
+
+  /**
+   * Border radius of the button
+   * Set to 0 to disable.
+   *
+   * @default 5
+   */
+  borderRadius?: number;
+
+  /**
+   * Styles applied to the icon only
+   * Good for setting margins or a different color.
+   *
+   * @default {marginRight: 10}
+   */
+  iconStyle?: TextStyle;
+
+  /**
+   * Style prop inherited from TextProps and TouchableWithoutFeedbackProperties
+   * Only exist here so we can have ViewStyle or TextStyle
+   *
+   */
+  style?: ViewStyle | TextStyle;
+
+  /**
+   * Background color of the button. Can be a string or OpaqueColorValue (returned from
+   * PlatformColor(..))
+   *
+   * @default '#007AFF'
+   */
+  backgroundColor?: string | OpaqueColorValue;
+}
+
 export type GlyphMap<G extends string> = { [K in G]: number }
 
 export interface Icon<G extends string, FN extends string> {