Tabs component indicatorStyle is missing and tab style misplaced

[heloise-gllm]

Misplaced Tab style

const Tab: FC<TabProps> = ({ children, ...rest }) => {
  const { theme } = useTheme();
  const styles = getStyle(theme, rest);
  return <View style={styles.box}>{children as ReactNode}</View>;
};

The only purpose of tabs here is to retrieve the children so the style and view part can be supressed.

Instead, the tab is managed by renderLabel :

const renderLabel: TabBarProps<any>['renderLabel'] = ({
    route,
    focused,
    color,
  }) => {
    const { theme } = useTheme();

    const styles = getStyle(theme, { ...route.otherProps });
    if (typeof route.renderLabelChildren === 'string') {
      return (
        <Text style={{ color: tabsMainColor || color, ...styles.box }}>
          {route.renderLabelChildren}
        </Text>
      );
    }
    return (
      <View style={styles.box}>
        {typeof route.renderLabelChildren === 'function'
          ? route.renderLabelChildren({
              route,
              focused,
              color,
            })
          : route.renderLabelChildren}
      </View>
    );
  };

This would allow more customization such as :

<TabList bg="blue">
         <Tab name="first" bg="red">
           {({ focused }: { focused: boolean }) => <Text>Tab 1</Text>}
         </Tab>
</TabList>

IndicatorStyle

FicusUI example shows that a props indicatorStyle allows to modify the indicator bar style. In the code, it triggers a type error as the props is not properly defined.

Type '{ ({ name, children }: TabProps): { children: ReactNode | TabChildrenFunction; }; displayName: string | undefined; }' is not assignable to type 'FC<TabProps>'.\n  Type '{ children: React.ReactNode | TabChildrenFunction; }' is not assignable to type 'ReactNode'.\n    Type '{ children: ReactNode | TabChildrenFunction; }' is missing the following properties from type 'ReactPortal': type, props, key",

Therefore, it seems necessary to update the tabs.type as follows :

export interface TabsProps extends CommonStyleProps {
  colorScheme?: string;
  children: ReactNode;
  initialPage?: number;
  selectedTab?: number;
  onChangeTab: (index: number) => void;
  indicatorStyle?: ViewStyle;
}