Can we get some working examples?

[aymenbuu]

Trying to use this in my class OnBoard1 extends Component screen is very difficult, I keep getting error Invalid hook call. Hooks can only be called inside of the body of a function component

Even the examples you've provided are missing several styles that break the compiler on a basic copy/paste.

Can we get some working examples? (for people not using TS)

The code is relatively short and readable. If you use TS, the interfaces are very straightforward.

[mohamedabkal]

I'm getting another error but I think we are in the same pool because I can't find some example to follow!
I like the video preview but it doesn't help with the implementation.

This is the error I'm getting using the examples snippets in the documentation 👇

Related issue #2

@Aryk if you can add a full working example that would be super awesome!

[Aryk]

@mohamedabkal which version of react-native-safe-area-context do you have installed? The package version is "react-native-safe-area-context": "^3.3.2",

Looks like it's not finding useSafeAreaFrame on the version of react-native-safe-area-context that you have.

[Aryk]

@NemyaNation - sorry for the delay on this. I completely missed this ticket.

I only wrote this library to work with Functional components, hence the useEffect, useCallback, etc...My guess is that because you are using the other style with the componentWillMount, etc., it's having problems.

[mohamedabkal]

@Aryk Thank you that fixed the issue! (it was already on the documentation but I didn't see it 😅)

[milind5540]

@Aryk Can we get some working examples?

[BRM20579]

Hi everyone, just found this package and spent a few hours working on the placement of tooltips. I left an example here.
Simply import the hook on the screen and set the onLayout={onLayoutStepN} on the components you want to spotlight.

//Custom hook

import {
  IOverlayComponentProps,
  useWalkthroughStep,
} from 'react-native-interactive-walkthrough';
import TooltipWalk from '../components/TooltipWalk';

const tooltipsData = [
  {
    id: '1',
    text: 'text 1',
    position: 'bottom',
    buttonLabel: 'Siguiente (1/6)',
  },
  {
    id: '2',
    text: 'text 2',
    position: 'top',
    buttonLabel: 'Siguiente (2/6)',
  },
  {
    id: '3',
    text: 'text 3',
    position: 'top',
    buttonLabel: 'Siguiente (3/6)',
  },
  {
    id: '4',
    text: 'text 4',
    position: 'top',
    buttonLabel: 'Siguiente (4/6)',
  },
  {
    id: '5',
    text: 'text 5',
    position: 'top',
    buttonLabel: 'Siguiente (5/6)',
  },
  {
    id: '6',
    text: 'text 6',
    position: 'bottom',
    buttonLabel: 'Finalizar',
  },
];

const useAppWalkthrought = () => {
  const tooltipInsets = (index: number) => {
    switch (index) {
      case 0:
        return {x: 20, y: 30, width: 0, height: 0};
      case 1:
        return {x: 80, y: 100, width: 0, height: 0};
      case 2:
        return {x: 20, y: 130, width: 0, height: 0};
      case 3:
      case 4:
        return {x: 20, y: 150, width: 0, height: 0};
      case 5:
        return {x: 0, y: 150, width: 0, height: 0};
      default:
        return {x: 0, y: 0, width: 0, height: 0};
    }
  };

  const {
    start,
    next,
    onLayout: onLayoutStep1,
  } = useWalkthroughStep({
    number: 1,
    enableHardwareBack: true,
    OverlayComponent: (props: IOverlayComponentProps) => (
      <TooltipWalk
        text={tooltipsData[0].text}
        buttonLabel={tooltipsData[0].buttonLabel}
        tooltipInsets={tooltipInsets(0)}
        onButtonPress={() => next()}
        libProps={props}
        position="bottom"
      />
    ),
  });

  const {onLayout: onLayoutStep2} = useWalkthroughStep({
    number: 2,
    enableHardwareBack: true,
    OverlayComponent: (props: IOverlayComponentProps) => (
      <TooltipWalk
        text={tooltipsData[1].text}
        buttonLabel={tooltipsData[1].buttonLabel}
        onButtonPress={() => next()}
        tooltipInsets={tooltipInsets(1)}
        libProps={props}
        position="top"
      />
    ),
  });

  const {onLayout: onLayoutStep3} = useWalkthroughStep({
    number: 3,
    enableHardwareBack: true,
    OverlayComponent: (props: IOverlayComponentProps) => (
      <TooltipWalk
        text={tooltipsData[2].text}
        buttonLabel={tooltipsData[2].buttonLabel}
        onButtonPress={() => next()}
        tooltipInsets={tooltipInsets(2)}
        libProps={props}
        position="top"
      />
    ),
  });
  const {onLayout: onLayoutStep4} = useWalkthroughStep({
    number: 4,
    enableHardwareBack: true,
    OverlayComponent: (props: IOverlayComponentProps) => (
      <TooltipWalk
        text={tooltipsData[3].text}
        buttonLabel={tooltipsData[3].buttonLabel}
        onButtonPress={() => next()}
        tooltipInsets={tooltipInsets(3)}
        libProps={props}
        position="top"
      />
    ),
  });
  const {onLayout: onLayoutStep5} = useWalkthroughStep({
    number: 5,
    enableHardwareBack: true,
    OverlayComponent: (props: IOverlayComponentProps) => (
      <TooltipWalk
        text={tooltipsData[4].text}
        buttonLabel={tooltipsData[4].buttonLabel}
        onButtonPress={() => next()}
        tooltipInsets={tooltipInsets(4)}
        libProps={props}
        position="top"
      />
    ),
  });

  const {onLayout: onLayoutStep6} = useWalkthroughStep({
    number: 6,
    enableHardwareBack: true,
    OverlayComponent: (props: IOverlayComponentProps) => (
      <TooltipWalk
        text={tooltipsData[5].text}
        buttonLabel={tooltipsData[5].buttonLabel}
        onButtonPress={() => next()}
        tooltipInsets={tooltipInsets(5)}
        libProps={props}
        position="top"
      />
    ),
  });
  return {
    start,
    onLayoutStep1,
    onLayoutStep2,
    onLayoutStep3,
    onLayoutStep4,
    onLayoutStep5,
    onLayoutStep6,
  };
};

export default useAppWalkthrought;

import React from 'react';
import {
  Dimensions,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
  ViewStyle,
} from 'react-native';
// import {Coords} from '../@types';
import {IOverlayComponentProps} from 'react-native-interactive-walkthrough';

type Coords = {
  x: number;
  y: number;
  width: number;
  height: number;
};

type Props = {
  text: string;
  buttonLabel: string;
  position?: 'top' | 'bottom' | 'left' | 'right';
  tooltipInsets?: Coords;
  libProps: IOverlayComponentProps;
  onButtonPress: () => void;
};

const TooltipWalk = ({
  text,
  buttonLabel,
  libProps,
  tooltipInsets = {x: 0, y: 0, width: 0, height: 0},
  position = 'top',
  onButtonPress,
}: Props) => {
  const screenWidth = Dimensions.get('window').width;
  const screenHeight = Dimensions.get('window').height - 200;
  const {x, y, width, height} = libProps.step.mask;
  const tooltipStyles: ViewStyle = {};
  const tooltipWidth = 280;

  switch (position) {
    case 'top':
      tooltipStyles.top = y - 40 - tooltipInsets?.y;
      tooltipStyles.left = x + width / 4 - tooltipInsets?.x;
      break;
    case 'bottom':
      tooltipStyles.top = y + height + 10 + tooltipInsets?.y;
      tooltipStyles.left = x + width / 4 - tooltipInsets?.x;
      break;
    case 'left':
      tooltipStyles.top = y + height / 2 - 20 + tooltipInsets?.y;
      tooltipStyles.left = x - 110 + tooltipInsets?.x;
      break;
    case 'right':
      tooltipStyles.top = y + height / 2 - 20 + tooltipInsets?.y;
      tooltipStyles.left = x + width + 10 + tooltipInsets?.x;
      break;
    default:
      tooltipStyles.top = y - 40 - tooltipInsets?.y;
      tooltipStyles.left = x + width / 4 - tooltipInsets?.x;
  }
  if (tooltipStyles.left < 0) {
    tooltipStyles.left = 10;
  } else if (tooltipStyles.left + tooltipWidth > screenWidth) {
    tooltipStyles.left = screenWidth - tooltipWidth - 10;
  }

  if (tooltipStyles.top < 0) {
    tooltipStyles.top = y + height + 10;
  } else if (tooltipStyles.top + 50 > screenHeight) {
    tooltipStyles.top = y - 60;
  }

  return (
    <View style={[styles.container, tooltipStyles]}>
      <Text style={styles.text}>{text}</Text>
      <View style={styles.separator} />
      <View>
        <TouchableOpacity
          style={styles.buttonContainer}
          onPress={onButtonPress}>
          <Text style={styles.button}>{buttonLabel}</Text>
          <View style={styles.buttonArrowIcon} />
        </TouchableOpacity>
      </View>
    </View>
  );
};

export default TooltipWalk;

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    zIndex: 100,
    backgroundColor: '#F2F2F2',
    borderRadius: 7,
    width: 280,
    paddingHorizontal: 20,
    paddingVertical: 20,
    gap: 10,
  },
  text: {color: 'black', fontSize: 14, lineHeight: 20},
  separator: {
    width: '100%',
    height: 1,
    backgroundColor: '#C3C2C8',
  },
  buttonContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    alignSelf: 'flex-end',
  },

  button: {alignSelf: 'flex-end'},
  buttonArrowIcon: {
    height: 32,
    width: 32,
  },
});