ios.example.tsx

interface ComposableComponentProps {
  icon: React.ReactNode;
  NameComponent: React.FC<BaseNameComponentProps>;
  hideIcon?: boolean;
  IndicatorComponent?: React.FC<BaseIndicatorComponentProps>;
  children?: React.ReactNode;
}

export default function ComposableComponent({
  icon,
  NameComponent,
  hideIcon,
  IndicatorComponent = BaseIndicatorComponent,
  children,
}: ComposableComponentProps) {
  return (
    <View
      style={[
        styles.row,
        hideIcon && styles.rowPaddingNoIcon,
      ]}>
      <IndicatorComponent hideIcon={hideIcon} />
      <View style={styles.container}>
        {!hideIcon && icon}
        <NameComponent />
        {children}
      </View>
    </View>
  );
}

web.example.tsx

interface ComposableComponentProps {
  icon: React.ReactNode;
  NameComponent: React.FC<BaseNameComponentProps>;
  hideIcon?: boolean;
  IndicatorComponent?: React.FC<BaseIndicatorComponentProps>;
  children?: React.ReactNode;
}

export default function ComposableComponent({
  icon,
  NameComponent,
  hideIcon,
  IndicatorComponent = BaseIndicatorComponent,
  children,
}: ComposableComponentProps) {
  return (
    <div
      className={classNames(
        styles.row,
        hideIcon && styles.rowPaddingNoIcon,
      )}>
      <IndicatorComponent hideIcon={hideIcon} />
      <div className={styles.container}>
        {!hideIcon && icon}
        <NameComponent />
        {children}
      </div>
    </div>
  );
}