react-native-coachmark

A simple and elegant coachmark library for React Native that creates spotlight tutorials and walkthroughs.

🚀 What's New

Version 5.6.87 (03/04/2025)

• Improved Tooltip Positioning: The tooltip now dynamically adjusts its position based on available screen space to ensure better visibility.
• Ref-Based Measurement: Replaced layout measurement methods with React refs, removing dependencies on UIManager.measure.
• Enhanced Highlighting: The highlighted child element remains fully visible without dimming, ensuring clarity in walkthroughs.

Version 5.6.84 (03/04/2025)

• Fixed some typos
• Now it displays and positions itself according to the available space.

Version 5.6.78 (03/04/2025)

• Added Close Button: Replaced the TouchableWithoutFeedback with a close button in the coachmark component for better user experience.
• Improved Documentation: Updated the README to include a "What's New" section for easier tracking of changes.

Version 2.0.7 (02/26/2025 - 04:00 PM)

• Improved Error Handling: Enhanced the coachmark component to prevent NaN values for positioning properties.
• Added validation checks to ensure that top and left values are not negative, defaulting to 0 if they are.
• Consistent Layout Handling: Ensured that all layout values are validated before being used in styles, providing a more robust user experience.
• No Changes to Usage: The usage of the coachmark component remains the same, allowing for seamless integration into existing projects.

📦 Installation

npm install @sinovuyo97/react-native-coachmark

or

yarn add @sinovuyo97/react-native-coachmark

🎬 Usage

import { Coachmark } from "@sinovuyo97/react-native-coachmark";

const App = () => {
  const [isVisible, setIsVisible] = React.useState(true);

  return (
    <Coachmark
      visible={isVisible}
      onHide={() => setIsVisible(false)}
      snowcoachText="This is a tutorial message."
    >
      <Button title="Show Coachmark" onPress={() => setIsVisible(true)} />
    </Coachmark>
  );
};

🛠 Props

| Prop | Type | Default | Description | |---------------|----------|---------|--------------------------------------------------| | snowcoachText | string | - | Text to display in the tooltip | | visible | boolean | false | Controls the visibility of the coachmark | | onHide | () => void | - | Callback when coachmark is dismissed | | children | ReactElement | - | The element to highlight with the coachmark |

❗ No Customization

Coachmark follows a strict, pre-defined UI design for consistency. It cannot be customized or modified.

📜 License

MIT License