Offline support

.github/actions/setup/action.yml

@@ -8,30 +8,28 @@ runs:
       uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
       with:
         node-version-file: .nvmrc
-        cache: 'npm'
+        cache: 'yarn'
 
     - name: Restore dependencies
-      id: npm-cache
+      id: yarn-cache
       uses: actions/cache/restore@5a3ec84eff668545956fd18022155c47e93e2684 # v4.2.3
       with:
         path: |
           **/node_modules
-          ~/.npm
-        key: ${{ runner.os }}-npm-${{ hashFiles('package-lock.json') }}-${{ hashFiles('**/package.json', '!node_modules/**') }}
+        key: ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock') }}-${{ hashFiles('**/package.json', '!node_modules/**') }}
         restore-keys: |
-          ${{ runner.os }}-npm-${{ hashFiles('package-lock.json') }}
-          ${{ runner.os }}-npm-
+          ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock') }}
+          ${{ runner.os }}-yarn-
 
     - name: Install dependencies
-      if: steps.npm-cache.outputs.cache-hit != 'true'
-      run: npm ci
+      if: steps.yarn-cache.outputs.cache-hit != 'true'
+      run: yarn install --immutable
       shell: bash
 
     - name: Cache dependencies
-      if: steps.npm-cache.outputs.cache-hit != 'true'
+      if: steps.yarn-cache.outputs.cache-hit != 'true'
       uses: actions/cache/save@5a3ec84eff668545956fd18022155c47e93e2684 # v4.2.3
       with:
         path: |
           **/node_modules
-          ~/.npm
-        key: ${{ steps.npm-cache.outputs.cache-primary-key }}
+        key: ${{ steps.yarn-cache.outputs.cache-primary-key }}

.github/workflows/cd.yml

@@ -0,0 +1,31 @@
+name: CD
+
+on:
+  push:
+    tags:
+      - 'v*'
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: false
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+
+      - name: Setup
+        uses: ./.github/actions/setup
+
+      - name: Build package
+        run: yarn prepare
+
+      - name: Publish to npm
+        run: yarn npm publish --access public
+        env:
+          YARN_NPM_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/ci.yml

@@ -2,10 +2,10 @@ name: CI
 on:
   push:
     branches:
-      - main
+      - develop
   pull_request:
     branches:
-      - main
+      - develop
   merge_group:
     types:
       - checks_requested
@@ -26,10 +26,10 @@ jobs:
         uses: ./.github/actions/setup
 
       - name: Lint files
-        run: npm run lint
+        run: yarn lint
 
       - name: Typecheck files
-        run: npm run typecheck
+        run: yarn typecheck
 
   test:
     runs-on: ubuntu-latest
@@ -42,7 +42,7 @@ jobs:
         uses: ./.github/actions/setup
 
       - name: Run unit tests
-        run: npm run test -- --maxWorkers=2 --coverage
+        run: yarn test --maxWorkers=2 --coverage
 
   build-library:
     runs-on: ubuntu-latest
@@ -55,7 +55,7 @@ jobs:
         uses: ./.github/actions/setup
 
       - name: Build package
-        run: npm run prepare
+        run: yarn prepare
 
   build-web:
     runs-on: ubuntu-latest

README.md

@@ -1,20 +1,47 @@
 # React Native Latex Renderer
 
-A lightweight, auto-resizing LaTeX renderer for React Native using [KaTeX](https://katex.org/).
+A lightweight, offline-capable, auto-resizing LaTeX renderer for React Native using [KaTeX](https://katex.org/). No native modules. No internet required.
+
+## When to use this package
+
+This package is the right choice when:
+
+- You are using **Expo managed workflow** and cannot add native modules
+- You are on the **Old Architecture** and cannot use Fabric/TurboModules
+- You need **zero native setup** — no `pod install`, no Kotlin/Swift, no build configuration
+- You are rendering **standalone LaTeX equations** (not full markdown documents)
+
+### When to use something else instead
+
+If your use case goes beyond standalone LaTeX, better-suited libraries exist:
+
+| Need | Recommended library |
+|---|---|
+| Markdown + math (headers, bold, tables, code blocks) | [react-native-enriched-markdown](https://github.com/software-mansion-labs/react-native-enriched-markdown) by Software Mansion — fully native, no WebView, New Architecture |
+| Markdown + math with streaming (LLM/SSE outputs) | [react-native-nitro-markdown](https://github.com/JoaoPauloCMarra/react-native-nitro-markdown) — native C++ parser, built-in streaming support |
+
+Both of those libraries require the New Architecture and native module setup. If that is not a constraint for you, they will give you better performance and broader feature coverage than this package.
 
 ## Features
 
+*   **Offline**: KaTeX is fully bundled — no CDN, no network required.
 *   **Auto-resizing**: Automatically adjusts height based on content.
-*   **KaTeX Support**: Fast and reliable math rendering.
+*   **Zero native modules**: Works in Expo managed workflow and Old Architecture projects out of the box.
 *   **Customizable**: Extensive styling options for container, text, and math elements.
 *   **TypeScript Support**: Fully typed for better development experience.
 
 ## Installation
 
 ```sh
-npm install @adheil_gupta/react-native-latex-renderer
+# npm
+npm install @adheil_gupta/react-native-latex-renderer react-native-webview
+
+# yarn
+yarn add @adheil_gupta/react-native-latex-renderer react-native-webview
 ```
 
+KaTeX is bundled inside the package — no CDN links, no additional setup needed.
+
 ## Usage
 
 Pass content as a string with math equations wrapped with:
@@ -26,9 +53,9 @@ Pass content as a string with math equations wrapped with:
 
 ```js
 import { KaTeXAutoHeightWebView, createKaTeXHTML } from '@adheil_gupta/react-native-latex-renderer';
-import { StyleSheet, View } from 'react-native';
+import { View, StyleSheet } from 'react-native';
 
-const testing = `
+const testString = `
   This is a test latex equation:
   $$
   I(\\lambda)
@@ -44,20 +71,18 @@ const testing = `
 
 export default function HomeScreen() {
   const src = createKaTeXHTML(
-    testing,
-    // HTML Container Styles
+    testString,
     {
-      width: '80%',
-      'padding': '15px',
-      'font-size': '18px',
-      'color': 'pink',      
-      'background-color': 'purple',      
+      'width': '75%',
+      'font-size': '15px',
+      'color': 'pink',
+      'background-color': 'green',
+      'border': '1px solid black',
     },
-    // LaTeX Specific Styles
     {
-      border: '2px solid red',
-      'color': 'lawngreen',
-      'background-color': 'blue',      
+      'color': 'white',
+      'background-color': 'purple',
+      'border': '1px solid red',
     }
   );
 
@@ -69,6 +94,8 @@ export default function HomeScreen() {
         containerStyle={{
           width: '100%',
           backgroundColor: 'yellow',
+          borderWidth: '1',
+          borderColor: 'orange',
         }}
       />
     </View>
@@ -79,7 +106,7 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor: '#fff',
-    paddingVertical: 100,
+    paddingVertical: 80,
   },
 });
 ```

eslint.config.mjs

@@ -23,6 +23,19 @@ export default defineConfig([
       'prettier/prettier': 'error',
     },
   },
+  {
+    files: ['scripts/**/*.js'],
+    languageOptions: {
+      globals: {
+        require: 'readonly',
+        module: 'readonly',
+        __dirname: 'readonly',
+        Buffer: 'readonly',
+        console: 'readonly',
+        process: 'readonly',
+      },
+    },
+  },
   {
     ignores: ['node_modules/', 'lib/'],
   },

example/package.json

@@ -11,7 +11,6 @@
   "dependencies": {
     "@adheil_gupta/react-native-latex-renderer": "workspace:^",
     "@expo/metro-runtime": "~6.1.1",
-    "@formidable-webview/webshell": "^2.6.0",
     "expo": "~54.0.7",
     "expo-status-bar": "~3.0.8",
     "react": "19.1.0",

example/src/App.tsx

@@ -1,7 +1,7 @@
 import { KaTeXAutoHeightWebView, createKaTeXHTML } from '../../src/index';
 import { View, StyleSheet } from 'react-native';
 
-const testing = `
+const testString = `
   This is a test latex equation:
   $$
   I(\\lambda)
@@ -17,7 +17,7 @@ const testing = `
 
 export default function HomeScreen() {
   const src = createKaTeXHTML(
-    testing,
+    testString,
     {
       'width': '75%',
       'font-size': '15px',

package.json

@@ -38,6 +38,7 @@
     "lint": "eslint \"**/*.{js,ts,tsx}\"",
     "clean": "del-cli lib",
     "prepare": "bob build",
+    "generate-assets": "node scripts/generate-katex-assets.js",
     "release": "release-it --only-version"
   },
   "keywords": [
@@ -79,7 +80,6 @@
     "@eslint/eslintrc": "^3.3.1",
     "@eslint/js": "^9.35.0",
     "@evilmartians/lefthook": "^1.12.3",
-    "@formidable-webview/webshell": "*",
     "@react-native/babel-preset": "0.81.1",
     "@react-native/eslint-config": "^0.81.1",
     "@release-it/conventional-changelog": "^10.0.1",
@@ -91,11 +91,11 @@
     "del-cli": "^6.0.0",
     "eslint": "^9.35.0",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-ft-flow": "^3.0.11",
     "eslint-plugin-jest": "^29.0.1",
     "eslint-plugin-prettier": "^5.5.4",
     "eslint-plugin-react-native": "^5.0.0",
     "jest": "^29.7.0",
+    "katex": "^0.16.45",
     "prettier": "^3.6.2",
     "react": "*",
     "react-native": "*",
@@ -105,7 +105,6 @@
     "typescript": "^5.9.2"
   },
   "peerDependencies": {
-    "@formidable-webview/webshell": "*",
     "react": "*",
     "react-native": "*",
     "react-native-webview": "*"
@@ -132,7 +131,7 @@
       "tagName": "v${version}"
     },
     "npm": {
-      "publish": true
+      "publish": false
     },
     "github": {
       "release": true
@@ -169,10 +168,5 @@
         }
       ]
     ]
-  },
-  "create-react-native-library": {
-    "languages": "js",
-    "type": "library",
-    "version": "0.54.3"
   }
 }