wix / react-native-ui-lib

UI Components Library for React Native
https://wix.github.io/react-native-ui-lib/
MIT License
6.53k stars 712 forks source link

FeatureHighlight gives an error on react native 0.72 #2653

Open Solhea opened 1 year ago

Solhea commented 1 year ago

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

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

Screenshot_1688394269

Environment

Affected platforms

Solhea commented 1 year ago

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[bot] commented 1 year ago

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.