React native ref Property 'ref' does not exist on type 'IntrinsicAttributes &

Question

I am getting the following error but I am not able to figure out how to fix it someone can help me out.

Below is also the link on expo with the complete code.

Error on <AppIntroSlider /> which is reported by snack expo

Example:

Type '{ ref: (ref: any) => any; data: { key: string; title: string; text: string; backgroundColor: string; }[]; renderItem: ({ item }: any) => Element; renderPagination: (activeIndex: number) => Element; scrollX: (scrollXList: any) => any; }' is not assignable to type 'IntrinsicAttributes & { data: any[]; renderItem: (info: ListRenderItemInfo & { dimensions: { width: number; height: number; }; }) => ReactNode; renderSkipButton?: (() => ReactNode) | undefined; ... 19 more ...; scrollX?: ((a: any) => void) | undefined; } & FlatListProps<...> & { ...; }'. Property 'ref' does not exist on type 'IntrinsicAttributes & { data: any[]; renderItem: (info: ListRenderItemInfo & { dimensions: { width: number; height: number; }; }) => ReactNode; renderSkipButton?: (() => ReactNode) | undefined; ... 19 more ...; scrollX?: ((a: any) => void) | undefined; } & FlatListProps<...> & { ...; }'.

Link: expo

  const slider = useRef(null);
  ...
  <AppIntroSlider
      ref={(ref: any) => (slider.current = ref)}
      ...

type ItemTProps<ItemT> = {
  data: ItemT[];
  renderItem: (
    info: ListRenderItemInfo<ItemT> & {
      dimensions: { width: number; height: number };
    }
  ) => React.ReactNode;
  renderSkipButton?: () => React.ReactNode;
  renderNextButton?: () => React.ReactNode;
  renderDoneButton?: () => React.ReactNode;
  renderPrevButton?: () => React.ReactNode;
  onSlideChange?: (a: number, b: number) => void;
  onSkip?: () => void;
  onDone?: () => void;
  renderPagination?: (activeIndex: number) => React.ReactNode;
  activeDotStyle: ViewStyle;
  dotStyle: ViewStyle;
  dotClickEnabled: boolean;
  skipLabel: string;
  doneLabel: string;
  nextLabel: string;
  prevLabel: string;
  showDoneButton: boolean;
  showNextButton: boolean;
  showPrevButton: boolean;
  showSkipButton: boolean;
  bottomButton: boolean;
  scrollX?: (a: any) => void;
} & FlatListProps<ItemT>;

const AppIntroSlider: FunctionComponent<ItemTProps<any>> = ({
  data,
  renderItem,
  renderSkipButton,
  renderNextButton,
  renderDoneButton,
  renderPrevButton,
  onSlideChange,
  onSkip,
  onDone,
  renderPagination,
  activeDotStyle = {
    backgroundColor: 'rgba(255, 255, 255, .9)',
  },
  dotStyle = {
    backgroundColor: 'rgba(0, 0, 0, .2)',
  },
  dotClickEnabled = true,
  skipLabel = 'Skip',
  doneLabel = 'Done',
  nextLabel = 'Next',
  prevLabel = 'Back',
  showDoneButton = true,
  showNextButton = true,
  showPrevButton = false,
  showSkipButton = false,
  bottomButton = false,
  extraData,
  scrollX,
  ...otherProps
}: any) => {

Answer 1

I took a look at the example that you posted with useImperativeHandle and you've got it mostly right. Your usage is a little different than the one in my other answer because your function goToSlide takes arguments.

When you define the interface for the referenced component, you need to define the goToSlide function with the appropriate argument types. You currently defined it as a function that takes no arguments (goToSlide(): void) and that's why you are getting the error "Type '(pageNum: number, triggerOnSlideChange?: boolean | undefined) => void' is not assignable to type '() => void'." on the line with useImperativeHandle.

export interface MyRef {
  goToSlide(pageNum: number, triggerOnSlideChange?: boolean): void;
}

A bunch of the props on MyCustomComponentProps should be defined as optional. You are already setting default value for them.

After fixing those two things, all of your errors go away except for those caused by the optional chaining ?.. This is a new-ish feature and I'm not sure how to get Expo to understand it.

You don't technically need the ?. after sliderRef because the ref object will always be defined. It's the current property that might be null, so you do need the ?. after current. But you could also check it the old-fashioned way if the red underlines bother you:

const prev = (activeIndex: number): void => {
  if ( sliderRef.current ) {
    sliderRef.current.goToSlide(activeIndex - 1, true);
  }
};

Updated expo link

Answer 2

When you log slider.current ref it displayed null because your AppIntroSlider component is a functional component and doesn't support this way. you have two solutions, change AppIntroSlide to a class component and it will work fine, or use forwardRef.