App crashes during render when formattedString uses embedded JavaScript in JSX

[ujwal-setlur]

export function First({ navigation }: FirstScreenProps) {
    const message = `Boo Hoo!` // Referencing this below in JSX crashes!
    function onButtonTap() {
        navigation.navigate('second');
    }
    return (
        <gridLayout
            width={"100%"}
            height={"100%"}
            rows={"*, auto, auto, *"}
            columns={"*, 200, *"}
        >
            <label
                row={1}
                col={1}
                className="info"
                textAlignment={"center"}
                fontSize={24}
            >
                <formattedString>
                    <span className="fas" text="&#xf135;" />
                    <span> {message} </span> <---- THIS CRASHES
                </formattedString>
            </label>
            <button
                row={2}
                col={1}
                fontSize={24}
                textAlignment={"center"}
                onTap={() => Dialogs.alert("Tap received!")}
            >
                Tap me for an alert
            </button>
            <button onTap={onButtonTap} fontSize={24} text={"Go to next screen"} />
        </gridLayout>
    );
}

[shirakaba]

I believe this is rather due to not supporting text nodes as children of <span> (as we found over Slack that using the text property instead gets it to work).

It looks like it used to work: https://react-nativescript.netlify.app/docs/components/label, so I wonder what's caused the regression. I'll look into it next time.

[Lelelo1]

Does<span>my text</span> also crashes or is it just <span>{myTextVar}</span>?

[shirakaba]

@Lelelo1 I haven’t checked, but I would guess both – both should lead to the text content being passed into React.createElement as children (rather than as the “text” prop).