[TASK] Remove HTML/CSS/JS String Rendering in React Native

[amitojsingh]

📝 Issue Description

The current Sundar Gutka Reader page is implemented in React Native but relies heavily on HTML, CSS, and JavaScript embedded as strings, rendered via a WebView-like approach.

For example, the loadHTML(data, headerHeight) method dynamically constructs HTML strings that include:

• Inline <style> blocks
• @font-face definitions
• Night mode / light mode color switching
• Font size and font face logic
• Text alignment and translation layout
• Iteration over verse data to generate HTML segments

Problem Statement

Embedding HTML/ CSS and Javascript inside strings introduces multiple issues:

• Code is difficult to read, maintain, and reason about
• UI logic and presentation are tightly coupled
• Debugging and testing become harder
• This goes against React Native best practices
• Future changes to theming, fonts, or layout become risky and expensive

Previous Attempts and Limitations

FlatList / VirtualizedList / SectionList

These components perform best with fixed or predictable item heights.
However, Reader content has highly dynamic heights due to:

• Variable verse length
• Optional translations and transliterations
• Font size and font face changes
  This resulted in:
• Degraded scrolling performance
• Excessive re-renders
• Increased memory usage

ScrollView

Rendering the entire content tree using a ScrollView caused:

• High memory consumption
• Frame drops during scrolling
• Poor performance on lower-end devices

Goal

The goal of this issue is to investigate and define a clean, maintainable, and performant alternative to the current HTML string–based rendering approach.

Specifically:

• Reduce or eliminate HTML/CSS string generation
• Move closer to idiomatic React Native rendering
• Improve long-term maintainability of the Reader page
• Preserve or improve current performance characteristics
  This issue is intended as an architectural and technical debt discussion, not a quick fix.

Code Refrence

• GutkaHTML.js
• GutkaScript.js