Merge pull request #18219 from iRoachie/rnvi-tabbar-ios

[react-native-vector-icons] TabBarIOS should've been TabBarItemIOS

types/react-native-vector-icons/Icon.d.ts

@@ -5,7 +5,7 @@ import {
   TextProperties,
   TouchableHighlightProperties,
   TouchableNativeFeedbackProperties,
-  TabBarIOSProperties,
+  TabBarItemProperties,
   ToolbarAndroidProperties
 } from 'react-native';
 
@@ -90,51 +90,6 @@ export interface IconButtonProps extends IconProps, TouchableHighlightProperties
 
 export type ImageSource = any;
 
-export interface TabBarIOSProps extends TabBarIOSProperties {
-  /**
-   * Name of the default icon (similar to TabBarIOS.Item icon)
-   *
-   * @type {string}
-   * @memberof TabBarIOSProps
-   */
-  iconName: string;
-
-  /**
-   * Name of the selected icon (similar to TabBarIOS.Item selectedIcon).
-   *
-   * @default iconName
-   * @type {string}
-   * @memberof TabBarIOSProps
-   */
-  selectedIconName: string;
-
-  /**
-   * Size of the icon.
-   *
-   * @default 30
-   * @type {number}
-   * @memberof TabBarIOSProps
-   */
-  iconSize: number;
-
-  /**
-   * Color of the icon
-   *
-   * @type {string}
-   * @memberof TabBarIOSProps
-   */
-  iconColor: string;
-
-  /**
-   * Color of the selected icon.
-   *
-   * @default iconColor
-   * @type {string}
-   * @memberof TabBarIOSProps
-   */
-  selectedIconColor: string;
-}
-
 export interface ToolbarAndroidProps extends ToolbarAndroidProperties {
   /**
    * Name of the navigation logo icon
@@ -182,6 +137,53 @@ export interface ToolbarAndroidProps extends ToolbarAndroidProperties {
   iconColor: string;
 }
 
+export interface TabBarItemIOSProps extends TabBarItemProperties {
+  /**
+   * Name of the default icon (similar to TabBarIOS.Item icon)
+   *
+   * @type {string}
+   * @memberof TabBarIOSItemProps
+   */
+  iconName: string;
+
+  /**
+   * Name of the selected icon (similar to TabBarIOS.Item selectedIcon)
+   *
+   * Defaults to iconName
+   *
+   * @type {string}
+   * @memberof TabBarIOSItemProps
+   */
+  selectedIconName?: string;
+
+  /**
+   * Size of the icon
+   *
+   * @default 30
+   * @type {number}
+   * @memberof TabBarIOSItemProps
+   */
+  iconSize?: number;
+
+  /**
+   * Color of the icon
+   *
+   * @type {string}
+   * @memberof TabBarIOSItemProps
+   */
+  iconColor?: string;
+
+  /**
+   * Color of the selected icon.
+   *
+   * Defaults to iconColor
+   *
+   * @type {string}
+   * @memberof TabBarIOSItemProps
+   */
+  selectedIconColor?: string;
+}
+
 export class Icon extends React.Component<IconProps, any> {
   static getImageSource(
     name: string,
@@ -192,6 +194,6 @@ export class Icon extends React.Component<IconProps, any> {
 
 export namespace Icon {
   class ToolbarAndroid extends React.Component<ToolbarAndroidProps, any> {}
-  class TabBarIOS extends React.Component<TabBarIOSProps, any> {}
+  class TabBarItemIOS extends React.Component<TabBarItemIOSProps, any> {}
   class Button extends React.Component<IconButtonProps, any> {}
 }

types/react-native-vector-icons/react-native-vector-icons-tests.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import { View, Text } from 'react-native';
+import { View, Text, TabBarIOS } from 'react-native';
 import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
 import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
+import Ionicon from 'react-native-vector-icons/Ionicons';
 
 class Example extends React.Component<{}, {}> {
   handleButton() {
@@ -28,3 +29,43 @@ class Example extends React.Component<{}, {}> {
     );
   }
 }
+
+class TabTest extends React.Component<any, {selectedTab: string}> {
+  constructor() {
+    super();
+
+    this.state = {
+      selectedTab: 'tab1'
+    };
+  }
+
+  render() {
+    return (
+      <TabBarIOS barTintColor="white">
+        <Ionicon.TabBarItemIOS
+          title="Tab1"
+          iconName="ios-keypad-outline"
+          selectedIconName="ios-keypad"
+          selectedIconColor="pink"
+          renderAsOriginal
+          selected={this.state.selectedTab === 'tab1'}
+          onPress={() => this.setState({selectedTab: 'tab1'})}
+        >
+          <View />
+        </Ionicon.TabBarItemIOS>
+
+        <Ionicon.TabBarItemIOS
+          title="Tab2"
+          iconName="ios-bookmark-outline"
+          selectedIconName="ios-bookmark"
+          selectedIconColor='pink'
+          renderAsOriginal
+          selected={this.state.selectedTab === 'tab2'}
+          onPress={() => this.setState({selectedTab: 'tab2'})}
+        >
+          <View />
+        </Ionicon.TabBarItemIOS>
+      </TabBarIOS>
+    );
+  }
+}