Hint Component Warning: IGNORE: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.

[Daraujo26]

Description

I get error/warning "Warning: Hint: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead". This issue appears to be related to issue #3285 and fixed in PR #3311

But that fix was resolved for Dash, DialogDismissibleView, Icon, Picker, StackAggregator. And not Hint.

Related to

• Components
• Demo
• Docs
• Typings

Steps to reproduce

Expected behavior

Actual behavior

More Info

Code snippet

import React from "react";
import { Hint, Colors } from "react-native-ui-lib";
import { useTour } from "./TourContext";
import { propertyOwnerTourSteps } from "./tourSteps";
import { View, Text, Button, TouchableOpacity } from "react-native";
import { ThemedText } from "../components/ThemedText";
import tw from "twrnc";

export const TourController: React.FC = () => {
  const { isTourActive, currentStepIndex, goToNextStep, stopTour, getTarget } =
    useTour();
  const tourSteps = propertyOwnerTourSteps;

  const currentStep = tourSteps[currentStepIndex];
  const target = currentStep ? getTarget(currentStep.targetId) : undefined;

  // The target is ready only when we have its measurements.
  const isTargetReady = !!(target?.ref?.current && target?.measurements);

  if (!isTourActive || !currentStep) {
    return null;
  }

  // const TourContent = () => (
  //   <View
  //     style={{
  //       padding: 12,
  //       backgroundColor: "white",
  //       borderRadius: 10,
  //       shadowColor: "#000",
  //       shadowOffset: { width: 0, height: 2 },
  //       shadowOpacity: 0.25,
  //       shadowRadius: 3.84,
  //       elevation: 5,
  //     }}
  //   >
  //     <ThemedText style={tw`text-black font-bold text-xl mb-4`}>
  //       {currentStep.title}
  //     </ThemedText>
  //     <ThemedText style={tw`text-black mb-4`}>{currentStep.message}</ThemedText>
  //     <View style={tw`flex-row justify-end`}>
  //       <TouchableOpacity
  //         onPress={goToNextStep}
  //         style={{
  //           backgroundColor: "white",
  //           borderRadius: 10,
  //           padding: 10,
  //           alignItems: "center",
  //         }}
  //       >
  //         <ThemedText
  //           style={tw`text-black border border-gray-300 rounded-lg px-4`}
  //         >
  //           {currentStepIndex === tourSteps.length - 1 ? "Finish" : "Next"}
  //         </ThemedText>
  //       </TouchableOpacity>
  //     </View>
  //   </View>
  // );

  return (
    <Hint
      // visible={isTargetReady}
      // // customContent={TourContent()}
      targetFrame={target?.measurements ?? undefined}
      // onBackgroundPress={stopTour}
      // borderRadius={10}
      // removePaddings
      // color={Colors.white}
      visible={isTargetReady}
      message={currentStep.message}
      color={Colors.red30}
      onBackgroundPress={stopTour}
    />
  );
};

Screenshots/Video

Environment

• React Native version: 0.76.9
• React Native UI Lib version: 7.46.0

Affected platforms

• Android
• iOS
• Web