@moustafahelmi/react-native-quran-app 1.4.2 → 1.6.0

package/package.json

@@ -1,9 +1,13 @@
 {
   "name": "@moustafahelmi/react-native-quran-app",
-  "version": "1.4.2",
-  "description": "React Native Quran application with Hafs recitation",
+  "version": "1.6.0",
+  "description": "React Native library for displaying Quran with Hafs recitation, audio playback, and customizable components",
   "main": "src/index.ts",
-  "keywords": ["react-native", "quran", "hafs", "islamic", "mobile"],
+  "types": "src/index.ts",
+  "files": [
+    "src/"
+  ],
+  "keywords": ["react-native", "quran", "hafs", "islamic", "mobile", "library", "components"],
   "author": "Moustafa Helmi",
   "license": "MIT",
   "repository": {
@@ -22,14 +26,16 @@
     "@react-native-clipboard/clipboard": "^1.14.1",
     "@react-native-community/slider": "^4.5.2",
     "axios": "^1.6.8",
-    "react": "18.2.0",
-    "react-native": "0.74.0",
     "react-native-dynamic-fonts": "^0.3.2",
     "react-native-fs": "^2.20.0",
     "react-native-quran-hafs": "^1.0.3",
     "react-native-responsive-fontsize": "^0.5.1",
     "react-native-track-player": "^4.1.1"
   },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-native": ">=0.70.0"
+  },
   "devDependencies": {
     "@babel/core": "^7.20.0",
     "@babel/preset-env": "^7.20.0",
@@ -44,6 +50,8 @@
     "eslint": "^8.19.0",
     "jest": "^29.6.3",
     "prettier": "2.8.8",
+    "react": "18.2.0",
+    "react-native": "0.74.0",
     "react-test-renderer": "18.2.0",
     "reactotron-react-native": "^5.1.6",
     "typescript": "5.0.4"

package/src/hooks/apis/useGetChapterByPage.ts

@@ -80,11 +80,11 @@ const useGetChapterByPage = ({
       return downoladThePageFont(Number(item), () => {}, QURAN_FONTS_API);
     });
     try {
-      const promiseRes = await Promise.all(promises);
-      setTimeout(() => {
-        setIsLoading(false);
-      }, 500);
-    } catch (e) {}
+      await Promise.all(promises);
+      setIsLoading(false);
+    } catch (e) {
+      setIsLoading(false);
+    }
   };
 
   const getTargetChapterPage = async () => {

package/src/hooks/apis/useGetReciters.ts

@@ -8,15 +8,19 @@ import {I18nManager} from 'react-native';
 const useGetReciters = ({
   chapterId,
   type,
+  skip = false,
 }: {
   chapterId: number;
   type: QuranTypesEnums;
+  skip?: boolean;
 }) => {
   const [allReciters, setAllReciters] = useState<IReciter[]>([]);
   const {getChapterAudionUrl} = useGetChapterAudio();
   useEffect(() => {
-    getReciters();
-  }, []);
+    if (!skip) {
+      getReciters();
+    }
+  }, [skip]);
 
   const getReciters = async () => {
     const queryParams = {

package/src/layouts/quranPageLayout.tsx

@@ -27,6 +27,8 @@ const QuranPageLayout = ({
   quranPageContainerStyle,
   selectionColor,
   autoCompleteAudioAfterPlayingVerse,
+  disableAudio = false,
+  showAudioPlayer = true,
 }: IQuranPageLayout) => {
   const flatlistRef = useRef<any>();
   const {chapterLookUp} = useGetChapterLookup({
@@ -39,7 +41,7 @@ const QuranPageLayout = ({
     type,
     QURAN_FONTS_API: QURAN_FONTS_API,
   });
-  const {allReciters} = useGetReciters({chapterId, type});
+  const {allReciters} = useGetReciters({chapterId, type, skip: disableAudio});
   const audioPlayerRef = useRef<IAudioPlayerRef>();
   const [selectedVerse, setSelectedVerse] = useState<ISurahVerse>(
     {} as ISurahVerse,
@@ -65,8 +67,10 @@ const QuranPageLayout = ({
   );
 
   useEffect(() => {
-    TrackPlayer.setupPlayer();
-  }, []);
+    if (!disableAudio) {
+      TrackPlayer.setupPlayer();
+    }
+  }, [disableAudio]);
   useEffect(() => {
     if (!isLoading && selectedBookedMarkedVerse) {
       setSelectedVerse(selectedBookedMarkedVerse);
@@ -154,22 +158,24 @@ const QuranPageLayout = ({
             }}
           />
         )}
-        <AudioPlayer
-          ref={audioPlayerRef}
-          chapterId={selectedVerse?.chapter_id ?? chapterId}
-          setSelectedVerse={setSelectedVerse}
-          selectedVerse={selectedVerse}
-          allReciter={allReciters}
-          versesBeforeAndAfterCurrentVerse={versesBeforeAndAfterCurrentVerse}
-          setVersesBeforeAndAfterCurrentVerse={
-            setVersesBeforeAndAfterCurrentVerse
-          }
-          originalVerse={originalVerse}
-          showSlider={showSlider}
-          autoCompleteAudioAfterPlayingVerse={
-            autoCompleteAudioAfterPlayingVerse
-          }
-        />
+        {!disableAudio && showAudioPlayer && (
+          <AudioPlayer
+            ref={audioPlayerRef}
+            chapterId={selectedVerse?.chapter_id ?? chapterId}
+            setSelectedVerse={setSelectedVerse}
+            selectedVerse={selectedVerse}
+            allReciter={allReciters}
+            versesBeforeAndAfterCurrentVerse={versesBeforeAndAfterCurrentVerse}
+            setVersesBeforeAndAfterCurrentVerse={
+              setVersesBeforeAndAfterCurrentVerse
+            }
+            originalVerse={originalVerse}
+            showSlider={showSlider}
+            autoCompleteAudioAfterPlayingVerse={
+              autoCompleteAudioAfterPlayingVerse
+            }
+          />
+        )}
       </View>
     </SafeAreaView>
   );

package/src/types/index.ts

@@ -174,6 +174,8 @@ export interface IQuranPageLayout {
   quranPageContainerStyle?: StyleProp<ViewStyle>;
   selectionColor?: ColorValue;
   autoCompleteAudioAfterPlayingVerse?: boolean;
+  disableAudio?: boolean;
+  showAudioPlayer?: boolean;
 }
 
 export enum QuranTypesEnums {

package/.bundle/config

@@ -1,2 +0,0 @@
-BUNDLE_PATH: "vendor/bundle"
-BUNDLE_FORCE_RUBY_PLATFORM: 1

package/.eslintrc.js

@@ -1,4 +0,0 @@
-module.exports = {
-  root: true,
-  extends: '@react-native',
-};

package/.prettierrc.js

@@ -1,7 +0,0 @@
-module.exports = {
-  arrowParens: 'avoid',
-  bracketSameLine: true,
-  bracketSpacing: false,
-  singleQuote: true,
-  trailingComma: 'all',
-};

package/.watchmanconfig

@@ -1 +0,0 @@
-{}

package/App.tsx

@@ -1,23 +0,0 @@
-import {I18nManager} from 'react-native';
-import {QuranPageLayout, QuranTypesEnums} from './src';
-import {IMAGES} from './src/common';
-const App = () => {
-  I18nManager.allowRTL(false);
-  I18nManager.forceRTL(false);
-
-  return (
-    <QuranPageLayout
-      chapterId={2}
-      type={QuranTypesEnums.chapter}
-      QURAN_FONTS_API="https://meccamuqra-public-mixed.b-cdn.net/meccamuqra/fonts/"
-      backgroundImage={IMAGES.mushafFrame}
-      surahNameFrameImage={IMAGES.surahNameFrame}
-      autoCompleteAudioAfterPlayingVerse
-      onBookMarkedVerse={verse => {
-        console.log(verse);
-      }}
-    />
-  );
-};
-
-export default App;

package/Gemfile

@@ -1,9 +0,0 @@
-source 'https://rubygems.org'
-
-# You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
-ruby ">= 2.6.10"
-
-# Cocoapods 1.15 introduced a bug which break the build. We will remove the upper
-# bound in the template on Cocoapods with next React Native release.
-gem 'cocoapods', '>= 1.13', '< 1.15'
-gem 'activesupport', '>= 6.1.7.5', '< 7.1.0'

package/Gemfile.lock

@@ -1,105 +0,0 @@
-GEM
-  remote: https://rubygems.org/
-  specs:
-    CFPropertyList (3.0.7)
-      base64
-      nkf
-      rexml
-    activesupport (6.1.7.7)
-      concurrent-ruby (~> 1.0, >= 1.0.2)
-      i18n (>= 1.6, < 2)
-      minitest (>= 5.1)
-      tzinfo (~> 2.0)
-      zeitwerk (~> 2.3)
-    addressable (2.8.6)
-      public_suffix (>= 2.0.2, < 6.0)
-    algoliasearch (1.27.5)
-      httpclient (~> 2.8, >= 2.8.3)
-      json (>= 1.5.1)
-    atomos (0.1.3)
-    base64 (0.2.0)
-    claide (1.1.0)
-    cocoapods (1.14.3)
-      addressable (~> 2.8)
-      claide (>= 1.0.2, < 2.0)
-      cocoapods-core (= 1.14.3)
-      cocoapods-deintegrate (>= 1.0.3, < 2.0)
-      cocoapods-downloader (>= 2.1, < 3.0)
-      cocoapods-plugins (>= 1.0.0, < 2.0)
-      cocoapods-search (>= 1.0.0, < 2.0)
-      cocoapods-trunk (>= 1.6.0, < 2.0)
-      cocoapods-try (>= 1.1.0, < 2.0)
-      colored2 (~> 3.1)
-      escape (~> 0.0.4)
-      fourflusher (>= 2.3.0, < 3.0)
-      gh_inspector (~> 1.0)
-      molinillo (~> 0.8.0)
-      nap (~> 1.0)
-      ruby-macho (>= 2.3.0, < 3.0)
-      xcodeproj (>= 1.23.0, < 2.0)
-    cocoapods-core (1.14.3)
-      activesupport (>= 5.0, < 8)
-      addressable (~> 2.8)
-      algoliasearch (~> 1.0)
-      concurrent-ruby (~> 1.1)
-      fuzzy_match (~> 2.0.4)
-      nap (~> 1.0)
-      netrc (~> 0.11)
-      public_suffix (~> 4.0)
-      typhoeus (~> 1.0)
-    cocoapods-deintegrate (1.0.5)
-    cocoapods-downloader (2.1)
-    cocoapods-plugins (1.0.0)
-      nap
-    cocoapods-search (1.0.1)
-    cocoapods-trunk (1.6.0)
-      nap (>= 0.8, < 2.0)
-      netrc (~> 0.11)
-    cocoapods-try (1.2.0)
-    colored2 (3.1.2)
-    concurrent-ruby (1.2.3)
-    escape (0.0.4)
-    ethon (0.16.0)
-      ffi (>= 1.15.0)
-    ffi (1.16.3)
-    fourflusher (2.3.1)
-    fuzzy_match (2.0.4)
-    gh_inspector (1.1.3)
-    httpclient (2.8.3)
-    i18n (1.14.4)
-      concurrent-ruby (~> 1.0)
-    json (2.7.2)
-    minitest (5.22.3)
-    molinillo (0.8.0)
-    nanaimo (0.3.0)
-    nap (1.1.0)
-    netrc (0.11.0)
-    nkf (0.2.0)
-    public_suffix (4.0.7)
-    rexml (3.2.6)
-    ruby-macho (2.5.1)
-    typhoeus (1.4.1)
-      ethon (>= 0.9.0)
-    tzinfo (2.0.6)
-      concurrent-ruby (~> 1.0)
-    xcodeproj (1.24.0)
-      CFPropertyList (>= 2.3.3, < 4.0)
-      atomos (~> 0.1.3)
-      claide (>= 1.0.2, < 2.0)
-      colored2 (~> 3.1)
-      nanaimo (~> 0.3.0)
-      rexml (~> 3.2.4)
-    zeitwerk (2.6.13)
-
-PLATFORMS
-  ruby
-
-DEPENDENCIES
-  activesupport (>= 6.1.7.5, < 7.1.0)
-  cocoapods (>= 1.13, < 1.15)
-
-RUBY VERSION
-   ruby 2.6.10p210
-
-BUNDLED WITH
-   1.17.2

package/MIGRATION.md

@@ -1,163 +0,0 @@
-# Migration Guide
-
-## Upgrading to v1.4.0
-
-Version 1.4.0 adds powerful font preloading capabilities while maintaining full backward compatibility.
-
-### Breaking Changes
-
-**None!** All existing code continues to work without modifications.
-
-### New Features
-
-#### 1. Background Font Preloading
-
-```typescript
-import { useQuranFontPreloader, PRIORITY_PAGES } from 'react-native-quran-hafs';
-
-// Add to your Surah list screen
-const { isPreloading, progress } = useQuranFontPreloader({
-  pages: PRIORITY_PAGES,
-  quranFontApi: YOUR_FONT_API,
-  autoStart: true,
-});
-```
-
-#### 2. Batch Font Downloads
-
-```typescript
-import { downloadMultiplePageFonts } from 'react-native-quran-hafs';
-
-// Download multiple pages at once
-await downloadMultiplePageFonts([1, 2, 3, 4, 5], FONT_API);
-```
-
-#### 3. Cache Management
-
-```typescript
-import { 
-  getFontCacheStats, 
-  clearFontCache,
-  isFontCached 
-} from 'react-native-quran-hafs';
-
-// Check what's cached
-const stats = await getFontCacheStats();
-
-// Clear cache if needed
-await clearFontCache();
-```
-
-### Recommended Upgrade Path
-
-1. **Install v1.4.0**
-   ```bash
-   npm install react-native-quran-hafs@1.4.0
-   # or
-   yarn add react-native-quran-hafs@1.4.0
-   ```
-
-2. **Test Existing Functionality**
-   Ensure your current implementation still works.
-
-3. **Add Preloading** (Optional but Recommended)
-   Add the `useQuranFontPreloader` hook to your Surah list screen.
-
-4. **Monitor Performance**
-   Check console logs for preload progress and cache hits.
-
-### Performance Tips
-
-- Start with `PRIORITY_PAGES` (53 pages) - covers 80% of use cases
-- Preload on WiFi-only if concerned about data usage
-- Cache persists between app launches
-- Consider adding a "Download Quran" button in settings for `ALL_QURAN_PAGES`
-
-### Performance Improvements
-
-#### Before v1.4.0
-- **First Load**: 15-30 seconds (downloads fonts on-demand)
-- **Subsequent Loads**: 15-30 seconds for different pages
-- **User Experience**: Long waits with loading spinners
-
-#### After v1.4.0 (With Preloading)
-- **Background Preload**: 30-60 seconds (silent, one-time)
-- **First Load**: < 1 second (fonts already cached)
-- **Subsequent Loads**: < 1 second (fonts already cached)
-- **User Experience**: Instant loading
-
-### Network Usage
-- **Priority Pages**: ~10MB one-time download
-- **All Pages**: ~150MB one-time download
-- **Subsequent Opens**: 0KB (cached)
-
-### Example Implementation
-
-Here's a complete example of integrating font preloading into your app:
-
-```typescript
-import React from 'react';
-import { View, Text, FlatList, TouchableOpacity } from 'react-native';
-import { 
-  useQuranFontPreloader, 
-  PRIORITY_PAGES,
-  QuranChapters 
-} from 'react-native-quran-hafs';
-
-function SurahListScreen({ navigation }) {
-  const { isPreloading, progress, isCompleted } = useQuranFontPreloader({
-    pages: PRIORITY_PAGES,
-    quranFontApi: 'https://raw.githubusercontent.com/quran/quran.com-images/master/fonts/',
-    autoStart: true,
-  });
-
-  return (
-    <View>
-      {isPreloading && (
-        <View style={{ padding: 10, backgroundColor: '#f0f0f0' }}>
-          <Text>📥 Preparing Quran pages: {progress.percentage}%</Text>
-          <Text style={{ fontSize: 12, color: '#666' }}>
-            {progress.current} of {progress.total} pages ready
-          </Text>
-        </View>
-      )}
-      
-      <FlatList
-        data={QuranChapters}
-        renderItem={({ item }) => (
-          <TouchableOpacity 
-            onPress={() => navigation.navigate('Quran', { chapterId: item.id })}
-          >
-            <Text>{item.name_arabic}</Text>
-          </TouchableOpacity>
-        )}
-      />
-    </View>
-  );
-}
-```
-
-### Support
-
-If you encounter issues during migration:
-
-1. **Check Console Logs**: Look for font download messages with 📥, ✅, and ❌ emojis
-2. **Verify Exports**: Ensure new functions are imported correctly
-3. **Clear Cache**: Try clearing Metro cache: `npx react-native start --reset-cache`
-4. **Check Network**: Ensure device/emulator has internet access for downloads
-
-For bugs or questions, please open an issue on GitHub: https://github.com/mohamedshawky982/react-native-quran-hafs/issues
-
----
-
-## Summary
-
-Version 1.4.0 brings significant performance improvements through intelligent font preloading:
-
-✅ **Backward Compatible**: All existing code works without changes  
-✅ **Easy to Adopt**: Single hook for complete preloading functionality  
-✅ **Performance Boost**: 15-30s → <1s load times  
-✅ **Flexible**: Works with custom page lists and configurations  
-✅ **Smart Caching**: Persistent cache across app launches  
-
-**Recommended Action**: Add `useQuranFontPreloader` with `PRIORITY_PAGES` to your main Quran list screen for instant improvements!

package/ReactotronConfig.js

@@ -1,7 +0,0 @@
-import Reactotron from 'reactotron-react-native';
-import AsyncStorage from '@react-native-async-storage/async-storage';
-
-Reactotron.setAsyncStorageHandler(AsyncStorage)
-  .configure() // controls connection & communication settings
-  .useReactNative() // add all built-in react native plugins
-  .connect(); // let's connect!

package/__tests__/App.test.tsx

@@ -1,17 +0,0 @@
-/**
- * @format
- */
-
-import 'react-native';
-import React from 'react';
-import App from '../App';
-
-// Note: import explicitly to use the types shipped with jest.
-import {it} from '@jest/globals';
-
-// Note: test renderer must be required after react-native.
-import renderer from 'react-test-renderer';
-
-it('renders correctly', () => {
-  renderer.create(<App />);
-});

package/android/app/build.gradle

@@ -1,118 +0,0 @@
-apply plugin: "com.android.application"
-apply plugin: "org.jetbrains.kotlin.android"
-apply plugin: "com.facebook.react"
-
-/**
- * This is the configuration block to customize your React Native Android app.
- * By default you don't need to apply any configuration, just uncomment the lines you need.
- */
-react {
-    /* Folders */
-    //   The root of your project, i.e. where "package.json" lives. Default is '..'
-    // root = file("../")
-    //   The folder where the react-native NPM package is. Default is ../node_modules/react-native
-    // reactNativeDir = file("../node_modules/react-native")
-    //   The folder where the react-native Codegen package is. Default is ../node_modules/@react-native/codegen
-    // codegenDir = file("../node_modules/@react-native/codegen")
-    //   The cli.js file which is the React Native CLI entrypoint. Default is ../node_modules/react-native/cli.js
-    // cliFile = file("../node_modules/react-native/cli.js")
-
-    /* Variants */
-    //   The list of variants to that are debuggable. For those we're going to
-    //   skip the bundling of the JS bundle and the assets. By default is just 'debug'.
-    //   If you add flavors like lite, prod, etc. you'll have to list your debuggableVariants.
-    // debuggableVariants = ["liteDebug", "prodDebug"]
-
-    /* Bundling */
-    //   A list containing the node command and its flags. Default is just 'node'.
-    // nodeExecutableAndArgs = ["node"]
-    //
-    //   The command to run when bundling. By default is 'bundle'
-    // bundleCommand = "ram-bundle"
-    //
-    //   The path to the CLI configuration file. Default is empty.
-    // bundleConfig = file(../rn-cli.config.js)
-    //
-    //   The name of the generated asset file containing your JS bundle
-    // bundleAssetName = "MyApplication.android.bundle"
-    //
-    //   The entry file for bundle generation. Default is 'index.android.js' or 'index.js'
-    // entryFile = file("../js/MyApplication.android.js")
-    //
-    //   A list of extra flags to pass to the 'bundle' commands.
-    //   See https://github.com/react-native-community/cli/blob/main/docs/commands.md#bundle
-    // extraPackagerArgs = []
-
-    /* Hermes Commands */
-    //   The hermes compiler command to run. By default it is 'hermesc'
-    // hermesCommand = "$rootDir/my-custom-hermesc/bin/hermesc"
-    //
-    //   The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map"
-    // hermesFlags = ["-O", "-output-source-map"]
-}
-
-/**
- * Set this to true to Run Proguard on Release builds to minify the Java bytecode.
- */
-def enableProguardInReleaseBuilds = false
-
-/**
- * The preferred build flavor of JavaScriptCore (JSC)
- *
- * For example, to use the international variant, you can use:
- * `def jscFlavor = 'org.webkit:android-jsc-intl:+'`
- *
- * The international variant includes ICU i18n library and necessary data
- * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
- * give correct results when using with locales other than en-US. Note that
- * this variant is about 6MiB larger per architecture than default.
- */
-def jscFlavor = 'org.webkit:android-jsc:+'
-
-android {
-    ndkVersion rootProject.ext.ndkVersion
-    buildToolsVersion rootProject.ext.buildToolsVersion
-    compileSdk rootProject.ext.compileSdkVersion
-
-    namespace "com.quranapp"
-    defaultConfig {
-        applicationId "com.quranapp"
-        minSdkVersion rootProject.ext.minSdkVersion
-        targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 1
-        versionName "1.0"
-    }
-    signingConfigs {
-        debug {
-            storeFile file('debug.keystore')
-            storePassword 'android'
-            keyAlias 'androiddebugkey'
-            keyPassword 'android'
-        }
-    }
-    buildTypes {
-        debug {
-            signingConfig signingConfigs.debug
-        }
-        release {
-            // Caution! In production, you need to generate your own keystore file.
-            // see https://reactnative.dev/docs/signed-apk-android.
-            signingConfig signingConfigs.debug
-            minifyEnabled enableProguardInReleaseBuilds
-            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
-        }
-    }
-}
-
-dependencies {
-    // The version of react-native is set by the React Native Gradle Plugin
-    implementation("com.facebook.react:react-android")
-
-    if (hermesEnabled.toBoolean()) {
-        implementation("com.facebook.react:hermes-android")
-    } else {
-        implementation jscFlavor
-    }
-}
-
-apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)

package/android/app/proguard-rules.pro

@@ -1,10 +0,0 @@
-# Add project specific ProGuard rules here.
-# By default, the flags in this file are appended to flags specified
-# in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt
-# You can edit the include path and order by changing the proguardFiles
-# directive in build.gradle.
-#
-# For more details, see
-#   http://developer.android.com/guide/developing/tools/proguard.html
-
-# Add any project specific keep options here:

package/android/app/src/debug/AndroidManifest.xml

@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<manifest xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:tools="http://schemas.android.com/tools">
-
-    <application
-        android:usesCleartextTraffic="true"
-        tools:targetApi="28"
-        tools:ignore="GoogleAppIndexingWarning"/>
-</manifest>