Switching on Union types in Flow - react-native

Question

This code uses field.type which is a string to determine what component to render.
The SelectOptionsOverlay component will render a CardFormSelectField (type=="select") with its options.
CardFormTextAreaOverlay will render a CardFormTextAreaField (type=="textarea"), and this component will never try to use options or any other property not present in CardFormTextAreaField.
export type CardFormSelectField = {
title: string,
type: string,
placeholder: string,
options: string[]
};
export type CardFormTextAreaField = {
title: string,
type: string
};
export type CardFormField = CardFormSelectField | CardFormTextAreaField;
overlay(field: CardFormField): ?(SelectOptionsOverlay | CardFormTextAreaOverlay) {
const props = {...};
switch (field.type) {
case "select":
return <SelectOptionsOverlay {...props} />;
case "textarea":
return <CardFormTextAreaOverlay {...props} />;
}
}
The switch statement keeps this all safe. However, Flow doesn't "know about" the switch statement and its safety benefits, so it complains:
Cannot return <SelectOptionsOverlay /> because:
Either React.Element [1] is incompatible with SelectOptionsOverlay [2].
Or React.Element [1] is incompatible with CardFormTextAreaOverlay [2].
[1] is the return statement and [2] is the type declaration for the function's return value: ?(SelectOptionsOverlay | CardFormTextAreaOverlay)
There is also a corresponding error on the second return statement (for CardFormTextAreaOverlay).
I'm actually having trouble understanding what this means, let alone if it's possible to fix it.
On the other hand, which I understand much better, if I remove the type annotation for the return statement, Flow only complains on the return statement with SelectOptionsOverlay, complaining about how the field prop may contain options and placeholder which is not present in CardFormTextAreaField.
That's true, but the switch statement should protect us from having bad props in our actual return. But you can't switch on FlowType can you? Since Flow isn't actual JS?

Answer 1

If it's possible and makes sense for your code, you can specialize the type property for each CardFormField. For example, instead of type: string for CardFormSelectField, you could have type: "select". This way, Flow knows that when it enters the case "select" block, props must be of the type CardFormSelectField. Currently, there is no way for Flow to associate each case statement with a specific type in the union type.
import React from 'react';
type CardFormSelectField = {|
title: string,
type: "select", // NEW!
placeholder: string,
options: string[]
|};
type CardFormTextAreaField = {|
title: string,
type: "textarea", // NEW!
|};
type CardFormField = CardFormSelectField | CardFormTextAreaField;
function SelectOptionsOverlay(props: CardFormSelectField) {
return "SelectOptionsOverlay";
}
function CardFormTextAreaOverlay(props: CardFormTextAreaField) {
return "CardFormTextAreaOverlay";
}
function Overlay(props: CardFormField) {
switch (props.type) {
case "select":
(props: CardFormSelectField);
return <SelectOptionsOverlay {...props} />;
case "textarea":
(props: CardFormTextAreaField);
return <CardFormTextAreaOverlay {...props} />;
}
}
Try Flow