Usage

Basic Usage

Pass a raw Quranic verse string annotated with Tajweed tags to <TajweedVerse />:

BasicVerseExample.tsx

import React from 'react';
import TajweedVerse from '@masumdev/rn-tajweed-verse';

const verseText = "بِسْمِ [h:1[ٱ]للَّهِ [h:2[ٱ][l[ل]رَّحْمَ[n[ـٰ]نِ [h:3[ٱ][l[ل]رَّح[p[ِي]مِ";

export function BasicVerseExample() {
  return (
    <TajweedVerse
      verse={verseText}
      colored={true}
      interactive={true}
    />
  );
}

Interactive Touch Guides & Theme Presets

Pass TajweedThemes.pastel or TajweedThemes.dark in config.tajweed and handle onRulePress:

InteractiveVerseExample.tsx

import React, { useState } from 'react';
import { Alert } from 'react-native';
import TajweedVerse, { TajweedThemes } from '@masumdev/rn-tajweed-verse';

const verseText = "صِرَ[n[َٰ]طَ [h:8[ٱ]لَّذِينَ أَنْعَمْتَ عَلَيْهِمْ غَيْرِ [h:9[ٱ]لْمَغْضُوبِ عَلَيْهِمْ وَلَا [h:10[ٱ][l[ل]ضَّ[m[َا]ٓلّ[p[ِي]نَ";

export function InteractiveVerseExample() {
  const [info, setInfo] = useState('');

  return (
    <TajweedVerse
      verse={verseText}
      colored={true}
      interactive={true}
      config={{
        style: {
          fontSize: 28,
          lineHeight: 56,
          color: '#1E293B',
          direction: 'rtl',
        },
        tajweed: TajweedThemes.pastel,
      }}
      onRulePress={(ruleName, description, matchedText) => {
        Alert.alert(
          ruleName,
          `Matched Word: "${matchedText}"\n\n${description}`
        );
      }}
    />
  );
}

Props API

Prop	Type	Default	Description
verse	string	—	Raw Quranic verse text containing bracketed Tajweed tags (e.g. `[q[خَلَقَ]]`).
colored	boolean	true	Whether to parse and apply Tajweed rule color-coding.
interactive	boolean	false	Enables press interaction handlers on colored Tajweed words.
config	TajweedVerseConfig	—	Styling config containing base text `style` and `tajweed` rule overrides.
onRulePress	(ruleName: string, description: string, matchedText: string) => void	—	Callback invoked when a colored Tajweed word is pressed when `interactive={true}`.
customRules	ParseShape[]	—	Optional array of custom regex pattern objects to prepended to parser rules.