FeatureHighlight gives an error on react native 0.72

[Solhea]

Description

After I upgrade react native from 0.71.10 to 0.72.1, the FeatureHighlight component gives an error only on Android. iOS is working fine.

Related to

• Components
• Demo
• Docs
• Typings

Steps to reproduce

Steps to reproduce the behavior:

1. Add FeatureHighlight to a screen
2. Run the app on Android

Expected behavior

Should show FeatureHighlight on the screen as an iOS device does.

Actual behavior

Gives a Render Error.

More Info

Code snippet

<FeatureHighlight
        visible={showFeatureHighlight && !loading && isFocused}
        title={strings.plannedButtonTitle}
        titleStyle={{ fontFamily: "Poppins-Medium" }}
        message={strings.plannedButtonMessage}
        messageStyle={{ fontFamily: "Poppins-Regular" }}
        getTarget={() => plannedButtonRef}
        confirmButtonProps={{
          label: strings.gotIt,
          color: colors.primary,
          labelStyle: { fontFamily: "Poppins-Regular" },
          onPress: () => {
            setShowFeatureHighlight(false);
            dispatch(addCompletedTutorial(tutorialTypes.transfersScreen));
          },
          style: { backgroundColor: colors.yellow, borderRadius: 5, borderWidth: 1, borderColor: colors.borderGrey },
        }}
        borderRadius={5}
      />

Screenshots/Video

Environment

• React Native version: 0.72.1
• React Native UI Lib version: 7.5.0

Affected platforms

• Android
• iOS
• Web

[Solhea]

This happens when I target the View component of React Native UI Lib. I don't get errors when I target Button or Toucahble Opacity.

<View width={"15%"} marginH-10 marginB-5>
                <TouchableOpacity
                  flex
                  center
                  onPress={() => {
                    setShowPlanning(!showPlanning);
                    setShowPlannedToast(true);
                  }}
                  ref={(r) => setPlannedButtonRef(r)}
                  style={{
                    borderWidth: 1,
                    borderColor: colors.borderGrey,
                    borderRadius: 5,
                    backgroundColor: showPlanning ? colors.bgColorPrimary : colors.yellow,
                  }}
                >
                  <MaterialIcons name={showPlanning ? "event-busy" : "event-available"} size={25} color={showPlanning ? colors.textColor : colors.primary} />
                </TouchableOpacity>
</View>

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.