React Native Auto-Scrolling Text Spotlight with Blur Effect

LongScrollableText.tsx

import React, { useEffect, useRef, useState } from "react";
import {
  ScrollView,
  Text,
  StyleSheet,
  View,
  UIManager,
  findNodeHandle,
} from "react-native";
import { BlurView } from "@react-native-community/blur";

const WORDS_PER_GROUP = 3;
const BLUR_AMOUNT = 10;
const SCROLL_OFFSET = 50;

const LongScrollableText: React.FC = () => {
  const longText = `
    The history of programming languages dates back to the 19th century with Ada Lovelace, who is often considered the first computer programmer. She worked on Charles Babbage's Analytical Engine and wrote the first algorithm intended to be processed by a machine. In the 1940s, assembly languages emerged, allowing humans to write instructions in symbolic code instead of binary. FORTRAN, developed in the 1950s, was one of the first high-level programming languages and significantly boosted scientific computing.

The 1970s brought the creation of C by Dennis Ritchie, which became widely popular due to its efficiency and control over system resources. Meanwhile, the object-oriented paradigm took hold with languages like Smalltalk and later C++. Java arrived in the 1990s with its promise of “write once, run anywhere,” revolutionizing cross-platform software development.

The rise of the internet era saw scripting languages like JavaScript, PHP, and Python gain popularity for web development. Python, created by Guido van Rossum in 1991, is renowned for its readability and simplicity, making it a favorite among beginners and professionals alike.

Functional programming concepts, though originating earlier, gained renewed interest with languages like Haskell and Scala. Meanwhile, modern languages like Rust focus on memory safety and concurrency.

Programming continues to evolve with new paradigms and languages emerging to solve complex problems efficiently. The journey from Ada Lovelace’s first algorithm to today’s diverse ecosystem highlights the rich and dynamic history of programming.
  `.trim();

  const words = longText.split(/\s+/);
  const [visibleIndex, setVisibleIndex] = useState(0);
  const scrollViewRef = useRef<ScrollView>(null);
  const wordRefs = useRef<Array<View | null>>([]);

  useEffect(() => {
    const interval = setInterval(() => {
      setVisibleIndex((prev) => {
        const maxIndex = words.length - 1;
        const nextIndex = prev + WORDS_PER_GROUP;
        if (nextIndex > maxIndex) {
          const lastGroupStart = Math.max(words.length - WORDS_PER_GROUP, 0);
          if (prev === lastGroupStart) {
            clearInterval(interval);
            return prev;
          }
          return lastGroupStart;
        }
        return nextIndex;
      });
    }, 1000);
    return () => clearInterval(interval);
  }, [words.length]);

  useEffect(() => {
    const scrollToWord = () => {
      const ref = wordRefs.current[visibleIndex];
      if (!ref || !scrollViewRef.current) return;
      UIManager.measureLayout(
        findNodeHandle(ref),
        findNodeHandle(scrollViewRef.current),
        () => {},
        (x, y) => {
          scrollViewRef.current?.scrollTo({ y: y - SCROLL_OFFSET, animated: true });
        }
      );
    };
    setTimeout(scrollToWord, 100);
  }, [visibleIndex]);

  return (
    <View style={styles.container}>
      <ScrollView
        ref={scrollViewRef}
        contentContainerStyle={styles.scrollContainer}
        showsVerticalScrollIndicator={false}
      >
        <View>
          {/* Background full blurred text */}
          <Text style={styles.text}>{words.join(" ")}</Text>
          <BlurView
            style={StyleSheet.absoluteFill}
            blurType="light"
            blurAmount={BLUR_AMOUNT}
            pointerEvents="none"
            reducedTransparencyFallbackColor="white"
          />
          {/* Foreground text with visibility control */}
          <View style={[styles.text, styles.overlayText, { flexDirection: "row", flexWrap: "wrap" }]}> 
            {words.map((word, index) => (
              <View key={index} ref={(el) => (wordRefs.current[index] = el)}>
                <Text
                  style={{
                    opacity: index >= visibleIndex && index < visibleIndex + WORDS_PER_GROUP ? 1 : 0.05,
                    fontSize: styles.text.fontSize,
                    lineHeight: styles.text.lineHeight,
                    letterSpacing: styles.text.letterSpacing,
                    color: styles.text.color,
                    marginRight: 4,
                  }}
                >
                  {word}
                </Text>
              </View>
            ))}
          </View>
        </View>
      </ScrollView>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 50,
  },
  scrollContainer: {
    paddingVertical: 20,
  },
  text: {
    fontSize: 26,
    lineHeight: 32,
    color: "black",
    marginHorizontal: 16,
    letterSpacing: 1.2,
  },
  overlayText: {
    position: "absolute",
    top: 0,
    left: 0,
  },
});

export default LongScrollableText;