call value by using Swipe In React Native

Question

I share my code with you but in this there are a problem the value is not store in the variable when i swipe over the letters. I design the code as user swipe the letter and the swipe over the letter are store in the grid. Lets take one example- App in which there are 1 to 5 no. the when I swipe over the no. from 5 to 3 the no. 543 is store in the grid and display

Edit

import React, { useState, useRef } from "react";
import { View, Text, StyleSheet, PanResponder } from "react-native";

const App = () => {
  const [score, setScore] = useState(0);
  const [currentWord, setCurrentWord] = useState("");
  const [validWords, setValidWords] = useState([]);
  const availableLetters = ["A", "C", "T"]; // Replace with your shuffled letters
  const [formedWords, setFormedWords] = useState([]);
  const [selectedLetters, setSelectedLetters] = useState([]);
  const [orderMatters, setOrderMatters] = useState(true);
  const validWordList = ["ACT", "CAT"];
  const panResponder = useRef(
    PanResponder.create({
      onStartShouldSetPanResponder: () => true,
      onPanResponderGrant: () => {
        // Clear current word when a new swipe gesture starts
        setCurrentWord("");
      },
      onPanResponderMove: (evt, gestureState) => {
        // Detect swipe gesture direction
        const { dx, dy } = gestureState;
        if (Math.abs(dx) > Math.abs(dy)) {
          // Horizontal swipe
          if (dx > 0) {
            // Right swipe
            console.log("Right swipe detected");
            handleSwipe(1);
          } else {
            // Left swipe
            console.log("Left swipe detected");
            handleSwipe(-1);
          }
        } else {
          // Vertical swipe
          if (dy > 0) {
            // Down swipe
            console.log("Down swipe detected");
            handleSwipe(1);
          } else {
            // Up swipe
            console.log("Up swipe detected");
            handleSwipe(-1);
          }
        }
      },
      onPanResponderRelease: (evt, gestureState) => {
        const touchX = evt.nativeEvent.locationX;
        const touchY = evt.nativeEvent.locationY;
        const letterUnderGesture = calculateLetter(touchX, touchY);
        // Validate the word when the swipe gesture ends
        if (letterUnderGesture) {
          // Check if a letter was detected
          handleLetterSelection(letterUnderGesture);
          validateWord();
        }
      },
    })
  ).current;
  function calculateLetter(touchX, touchY) {
    const letterRadius = 40; // Radius of your letter circles
    const spacing = 10; // Spacing between circles
    const gridWidth = 350; // Width of the availableLetters view

    const row = Math.floor(touchY / (letterRadius * 2 + spacing));
    const col = Math.floor(touchX / (letterRadius * 2 + spacing));

    if (col >= 0 && col < availableLetters.length) {
      return availableLetters[col];
    } else {
      return null;
    }
  }
  const handleSwipe = (direction) => {
    // Find the next letter based on the direction of swipe
    const currentIndex = availableLetters.indexOf(currentWord.slice(-1));
    const nextIndex =
      (currentIndex + direction + availableLetters.length) %
      availableLetters.length;
    const nextLetter = availableLetters[nextIndex];
    setCurrentWord((prevWord) => prevWord + nextLetter);
  };
  const isValidPrefix = (wordOrLetters) => {
    return validWordList.some((word) => word.startsWith(wordOrLetters));
  };

  const validateWord = () => {
    if (validWordList.includes(selectedLetters.join(""))) {
      if (!validWords.includes(selectedLetters.join(""))) {
        setScore((prevScore) => prevScore + 10);
        setValidWords((prevValidWords) => [...prevValidWords, formedWord]);
        setFormedWords((prevFormedWords) => [...prevFormedWords, formedWord]);
        setSelectedLetters([]); // Clear the current word

        if (validWords.length + 1 === validWordList.length) {
          alert("Congratulations! You've found all the words. Game over.");
        }
      } else {
        setSelectedLetters([]); // Clear the current word
        alert("You've already used this word. Try a different one.");
      }
    } else {
      setSelectedLetters([]); // Clear the current word
      console.log(validWords);
      console.log(validateWord);
      console.log(selectedLetters);
      console.log(validWordList);
      console.log(prevValidWords);
      alert("Try again! That's not a valid word.");
    }
  };

  const handleLetterSelection = (letter) => {
    // Option 1: Order Matters - Store as Array
    if (orderMatters) {
      setSelectedLetters((prevLetters) => [...prevLetters, letter]);
    } else {
      // Option 2: Order Doesn't Matter - Store as String
      setCurrentWord((prevWord) => prevWord + letter);
      console.log(setCurrentWord);
    }

    // Visual Feedback (Optional) - Example

    // Prefix Validation (Optional)
    if (!isValidPrefix(currentWord + letter)) {
      // Or the selected letter array
      console.log(letter);
      // Indicate invalid prefix
    }
  };
  const renderFormedWordsGrid = () => {
    return formedWords.map((word, index) => (
      <View key={index} style={styles.wordBlock}>
        <Text style={styles.wordText}>{word}</Text>
      </View>
    ));
  };

  return (
    <View style={styles.container}>
      <Text style={styles.score}>Score: {score}</Text>
      <View style={styles.wordGrid}>
        {renderFormedWordsGrid()}
        {validWords.map((word, index) => (
          <View key={index} style={styles.wordBlock}>
            <Text style={styles.wordText}>{word}</Text>
          </View>
        ))}
      </View>
      <View style={styles.availableLetters} {...panResponder.panHandlers}>
        {availableLetters.map((letter, index) => (
          <Text
            key={index}
            style={[
              styles.letterCircle,
              {
                left:
                  100 * Math.sin(((2 * Math.PI) / 3) * index - Math.PI / 3) +
                  150, // x-coordinate calculation
                top:
                  100 * Math.cos(((2 * Math.PI) / 3) * index - Math.PI / 3) +
                  150, // y-coordinate calculation
              },
            ]}
          >
            <Text style={styles.letterText}>{letter}</Text>
          </Text>
        ))}
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#f9f9f9",
  },
  score: {
    fontSize: 20,
    fontWeight: "bold",
    marginBottom: 20,
  },
  wordGrid: {
    flexDirection: "row",
    flexWrap: "wrap",
    marginTop: 20,
  },
  wordBlock: {
    width: 40,
    height: 40,
    backgroundColor: "#aaf",
    justifyContent: "center",
    alignItems: "center",
    margin: 5,
  },
  wordText: {
    fontSize: 16,
    fontWeight: "bold",
  },
  availableLetters: {
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    marginTop: 20,
    position: "relative",
    width: 350, // Width of the grid
    height: 50, // Height of the grid
  },
  letterCircle: {
    position: "absolute",
    width: 80,
    height: 80,
    borderRadius: 40,
    backgroundColor: "#ddd",
    justifyContent: "center",
    alignItems: "center",
    textAlign: "center",
  },
  letterText: {
    textAlign: "center",
    fontSize: 48,
    fontWeight: "bold",
  },
});

export default App;