React Native Word Search: Implementing Word Selection & Validation

By
adminCgz
-
0
26

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.

typescript
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.

typescript
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.

typescript
<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.

typescript
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.

typescript
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.

typescript
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

typescript
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! 🎮🔥

RELATED ARTICLESMORE FROM AUTHOR