feat: add iconStyle prop to bottom tab bar options (#8188)

Co-authored-by: Satyajit Sahoo <satyajit.happy@gmail.com>

packages/bottom-tabs/src/types.tsx

@@ -172,6 +172,10 @@ export type BottomTabBarOptions = {
    * Style object for the tab label.
    */
   labelStyle?: StyleProp<TextStyle>;
+  /**
+   * Style object for the tab icon.
+   */
+  iconStyle?: StyleProp<TextStyle>;
   /**
    * Style object for the tab container.
    */

packages/bottom-tabs/src/views/BottomTabBar.tsx

@@ -44,6 +44,7 @@ export default function BottomTabBar({
   keyboardHidesTabBar = false,
   labelPosition,
   labelStyle,
+  iconStyle,
   safeAreaInsets,
   showIcon,
   showLabel,
@@ -286,6 +287,7 @@ export default function BottomTabBar({
                   showIcon={showIcon}
                   showLabel={showLabel}
                   labelStyle={labelStyle}
+                  iconStyle={iconStyle}
                   style={tabStyle}
                 />
               </NavigationRouteContext.Provider>

packages/bottom-tabs/src/views/BottomTabItem.tsx

@@ -102,6 +102,10 @@ type Props = {
    * Style object for the label element.
    */
   labelStyle?: StyleProp<TextStyle>;
+  /**
+   * Style object for the icon element.
+   */
+  iconStyle?: StyleProp<ViewStyle>;
   /**
    * Style object for the wrapper element.
    */
@@ -168,6 +172,7 @@ export default function BottomTabBarItem({
   showIcon = true,
   allowFontScaling,
   labelStyle,
+  iconStyle,
   style,
 }: Props) {
   const { colors } = useTheme();
@@ -226,7 +231,10 @@ export default function BottomTabBarItem({
         activeTintColor={activeTintColor}
         inactiveTintColor={inactiveTintColor}
         renderIcon={icon}
-        style={horizontal ? styles.iconHorizontal : styles.iconVertical}
+        style={[
+          horizontal ? styles.iconHorizontal : styles.iconVertical,
+          iconStyle,
+        ]}
       />
     );
   };