React Native Word Search: Implementing Word Selection & Validation

🚀 Tutorial #10 – Displaying Selected Words & Checking Answers

📌 SEO Optimization

SEO Title:

“React Native Word Search: Displaying & Validating Selected Words”

Short Meta Description (Max 60 characters):

“Show selected words and validate them in a Word Search game.”

Full Meta Description:

“Learn how to display selected words in a text box, add a ‘Submit’ button to check answers, and implement a ‘Clear’ button to reset selection in a React Native Word Search game.”

Keywords:

React Native Word Search, Word selection in React Native, Validate words in Word Search, React Native touch selection, Firebase word game, React Native game UI improvements

📌 Introduction

In this tutorial, we will:
✅ Display a text box that shows the word selected in the grid.
✅ Add a “Submit” button to check if the selected word is correct.
✅ Add a “Clear” button to deselect letters and reset the word.
✅ Ensure words remain selected until the user manually clears them.
✅ Improve the UI with an always-outlined text box.

By the end of this tutorial, users will be able to see the word they are forming in real-time, check if it’s correct, and reset their selection when needed! 🚀

📌 Step 1: Updating wordSearch.tsx to Show Selected Words

Currently, the game allows selecting letters, but there’s no way to see the word being formed. We will fix this by adding a text box that dynamically updates as letters are selected.

🔹 1️⃣ Creating the State for Selected Word

We will store the selected letters in order inside a selectedWord state.

const [selectedWord, setSelectedWord] = useState(""); // Stores the selected word

✅ This ensures the letters appear dynamically as the user selects them.

🔹 2️⃣ Updating Word Selection

Modify the handleTouch function to update selectedWord as letters are selected.

const handleTouch = (event: GestureResponderEvent) => {
  const { pageX, pageY } = event.nativeEvent;

  const row = Math.floor((pageY - gridLayout.y) / CELL_SIZE);
  const col = Math.floor((pageX - gridLayout.x) / CELL_SIZE);

  if (row >= 0 && row < GRID_SIZE && col >= 0 && col < GRID_SIZE) {
    const selectedLetter = grid[row][col].letter;

    if (!selectedCells.some((cell) => cell.row === row && cell.col === col)) {
      setSelectedCells([...selectedCells, { row, col }]);
      setSelectedWord((prevWord) => prevWord + selectedLetter); // Append letter
    }
  }
};

✅ Now, every letter clicked will be added to selectedWord.

📌 Step 2: Adding the Text Box & Buttons

🔹 1️⃣ Creating the UI for the Text Box

📍 **We will place the text box above the grid and below the FlatList.

<View style={globalStyles.wordSelectionContainer}>
  <View style={globalStyles.wordBoxOutlined}>
    <Text style={globalStyles.selectedWordText}>{selectedWord || "Select letters..."}</Text>
  </View>

  <View style={globalStyles.buttonRow}>
    <TouchableOpacity style={globalStyles.submitButton} onPress={handleSubmit}>
      <Text style={globalStyles.buttonText}>Submit</Text>
    </TouchableOpacity>

    <TouchableOpacity style={globalStyles.clearButton} onPress={handleClear}>
      <Text style={globalStyles.buttonText}>Clear</Text>
    </TouchableOpacity>
  </View>
</View>

✅ This displays the selected word and provides “Submit” and “Clear” buttons.

🔹 2️⃣ Implementing “Clear” Button

The Clear button resets the selected letters and word.

const handleClear = () => {
  setSelectedCells([]); // Deselect all cells
  setSelectedWord(""); // Clear the word
};

✅ Now, clicking “Clear” removes the selection.

🔹 3️⃣ Implementing “Submit” Button

The Submit button checks if the word is correct.

const handleSubmit = () => {
  if (words.includes(selectedWord)) {
    alert(`✅ Correct! "${selectedWord}" is a valid word.`);
  } else {
    alert(`❌ Incorrect. Try again.`);
  }
};

✅ Now, the game validates the selected word against the correct answers!

📌 Step 3: Updating globalStyles.ts

📍 We need to style the text box and buttons to look better.

wordSelectionContainer: {
  flexDirection: "column",
  alignItems: "center",
  marginVertical: 10,
},

wordBoxOutlined: {
  borderWidth: 2,
  borderColor: "#555",
  padding: 10,
  width: "80%",
  textAlign: "center",
  backgroundColor: "#FFF",
},

selectedWordText: {
  fontSize: 20,
  fontWeight: "bold",
  textAlign: "center",
},

buttonRow: {
  flexDirection: "row",
  justifyContent: "space-evenly",
  width: "80%",
  marginTop: 10,
},

submitButton: {
  backgroundColor: "#4CAF50",
  padding: 10,
  borderRadius: 5,
},

clearButton: {
  backgroundColor: "#FF6347",
  padding: 10,
  borderRadius: 5,
},

buttonText: {
  color: "#FFF",
  fontSize: 16,
  fontWeight: "bold",
},

✅ Now, the UI looks structured and user-friendly.

📌 Step 4: The Final wordSearch.tsx Code

📍 Location: app/wordSearch.tsx

import React, { useState, useRef, useEffect } from "react";
import { View, Text, FlatList, Button, TouchableOpacity, PanResponder, GestureResponderEvent } from "react-native";
import { useLocalSearchParams, useRouter } from "expo-router";
import { globalStyles } from "@/src/globalStyles";
import jsonData from "@/src/data.json";
import { LanguageData, WordEntry, GridCell } from "@/src/types";

const GRID_SIZE = 10;
const CELL_SIZE = 34;

export default function WordSearch() {
  const { lang } = useLocalSearchParams();
  const router = useRouter();
  const gridRef = useRef<View>(null);
  const [gridLayout, setGridLayout] = useState({ x: 0, y: 0, width: 0, height: 0 });
  const [selectedCells, setSelectedCells] = useState<{ row: number; col: number }[]>([]);
  const [selectedWord, setSelectedWord] = useState("");

  useEffect(() => {
    if (gridRef.current) {
      gridRef.current.measure((x, y, width, height, pageX, pageY) => {
        setGridLayout({ x: pageX, y: pageY, width, height });
      });
    }
  }, []);

  const handleTouch = (event: GestureResponderEvent) => {
    const { pageX, pageY } = event.nativeEvent;
    const row = Math.floor((pageY - gridLayout.y) / CELL_SIZE);
    const col = Math.floor((pageX - gridLayout.x) / CELL_SIZE);

    if (row >= 0 && row < GRID_SIZE && col >= 0 && col < GRID_SIZE) {
      const letter = grid[row][col].letter;
      setSelectedCells([...selectedCells, { row, col }]);
      setSelectedWord((prevWord) => prevWord + letter);
    }
  };

  return (
    <View style={globalStyles.container}>
      <FlatList data={words} renderItem={({ item }) => <Text>{item}</Text>} />

      <View style={globalStyles.wordSelectionContainer}>
        <View style={globalStyles.wordBoxOutlined}>
          <Text>{selectedWord || "Select letters..."}</Text>
        </View>

        <TouchableOpacity style={globalStyles.clearButton} onPress={handleClear}>
          <Text>Clear</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

📌 Conclusion

🎯 Now, your Word Search game is fully interactive!
✅ Users can see their selected word in a text box.
✅ They can submit their word for validation.
✅ They can clear their selection at any time.

🚀 Try it out and let me know if the tutorial is clear! 🎮🔥