Repository: expo/expo
File: docs/components/plugins/api/APISectionUtils.tsx (TypeScript)

Code before:
      }
      return elementType.name + type;
    } else if (elementType?.type === 'array') {
      return resolveTypeName(elementType, sdkVersion) + '[]';
    } else if (elementType?.declaration) {
      if (type === 'array') {
        const { parameters, type: paramType } = elementType.declaration.indexSignature ?? {};
        if (parameters && paramType) {
          return (
            <>
              <span className="text-quaternary">{'{'}</span>
              {` [${listParams(parameters)}]: ${resolveTypeName(paramType, sdkVersion)} `}
              <span className="text-quaternary">{'}'}</span>
            </>
          );
        }
      }
      return elementType.name + type;
    } else if (type === 'union' && types?.length) {
      const isLargeLiteralUnion =
        types.length > LITERAL_UNION_COLLAPSE_THRESHOLD &&
        types.every((t: TypeDefinitionData) =>
          ['literal', 'templateLiteral', 'intrinsic', 'reference', 'tuple'].includes(t.type)
        );
      if (isLargeLiteralUnion) {
        return 'See description for available icons.';
      }
      return renderUnion(types, { sdkVersion });
    } else if (elementType && elementType.type === 'union' && elementType?.types?.length) {
      const unionTypes = elementType?.types ?? [];
      return (
        <>
          <span className="text-quaternary">(</span>
          {renderUnion(unionTypes, { sdkVersion })}
          <span className="text-quaternary">)</span>
          {type === 'array' && <span className="text-quaternary">[]</span>}
        </>
      );
    } else if (declaration?.signatures) {
      const baseSignature = declaration.signatures[0];
      if (baseSignature?.parameters?.length) {
        return (
          <>
            <span className="text-quaternary">(</span>
            {baseSignature.parameters?.map((param, index) => (
              <span key={`param-${index}-${param.name}`}>
                {param.name}
                <span className="text-quaternary">:</span> {resolveTypeName(param.type, sdkVersion)}
                {index + 1 !== baseSignature.parameters?.length && (
                  <span className="text-quaternary">, </span>
                )}

Review comment (suggestion):
Should this message be hardcoded? Maybe it's worth adding a check wether the name includes `Icon`?

We could do something like:
```
if(isIcon) { .... }
else { console.warn('The type literal is long. Consider adding a custom message') } 
```

Code after:
      }
      return elementType.name + type;
    } else if (elementType?.type === 'array') {
      return resolveTypeName(elementType, sdkVersion) + '[]';
    } else if (elementType?.declaration) {
      if (type === 'array') {
        const { parameters, type: paramType } = elementType.declaration.indexSignature ?? {};
        if (parameters && paramType) {
          return (
            <>
              <span className="text-quaternary">{'{'}</span>
              {` [${listParams(parameters)}]: ${resolveTypeName(paramType, sdkVersion)} `}
              <span className="text-quaternary">{'}'}</span>
            </>
          );
        }
      }
      return elementType.name + type;
    } else if (type === 'union' && types?.length) {
      const isLargeLiteralUnion =
        types.length > LITERAL_UNION_COLLAPSE_THRESHOLD &&
        types.every((t: TypeDefinitionData) =>
          ['literal', 'templateLiteral', 'intrinsic', 'reference', 'tuple'].includes(t.type)
        );
      if (isLargeLiteralUnion) {
        return 'See description for available values.';
      }
      return renderUnion(types, { sdkVersion });
    } else if (elementType && elementType.type === 'union' && elementType?.types?.length) {
      const unionTypes = elementType?.types ?? [];
      return (
        <>
          <span className="text-quaternary">(</span>
          {renderUnion(unionTypes, { sdkVersion })}
          <span className="text-quaternary">)</span>
          {type === 'array' && <span className="text-quaternary">[]</span>}
        </>
      );
    } else if (declaration?.signatures) {
      const baseSignature = declaration.signatures[0];
      if (baseSignature?.parameters?.length) {
        return (
          <>
            <span className="text-quaternary">(</span>
            {baseSignature.parameters?.map((param, index) => (
              <span key={`param-${index}-${param.name}`}>
                {param.name}
                <span className="text-quaternary">:</span> {resolveTypeName(param.type, sdkVersion)}
                {index + 1 !== baseSignature.parameters?.length && (
                  <span className="text-quaternary">, </span>
                )}