Implementing JSON Data & TypeScript Best Practices

By
adminCgz
-
0
57

📌 SEO Optimization

SEO Title:

“React Native Word Search: Building a Game with JSON & TypeScript”

Short Meta Description (Max 60 characters):

“Create a Word Search game in React Native with TypeScript.”

Full Meta Description:

“Learn how to build a Word Search game in React Native using Expo Router, Firebase-like JSON data, and TypeScript for structured game logic. Improve UI with ListView and dynamic grid placement.”

Keywords:

React Native Word Search, TypeScript in React Native, JSON data in React Native, Expo Router navigation, Firebase JSON game, React Native word grid, React Native puzzle game

📌 Introduction

In this tutorial, we will: ✅ Create the “Start Game” screen with a ListView to select a language.
✅ Fetch data from a JSON file (similar to Firebase Realtime Database).
✅ Implement TypeScript best practices for handling structured JSON data.
✅ Generate a 12×12 word search grid using definitions as hidden words.
✅ Ensure smooth navigation between screens using Expo Router.
✅ Explain TypeScript features like type definitions and keyof typeof.

By the end of this tutorial, you will:

  • Understand how to properly use TypeScript with JSON data.
  • Be able to structure your Word Search game for future expansions.
  • Ensure your app is robust, scalable, and maintainable.

📌 Step 1: Understanding the JSON Data Structure

The game will fetch words from JSON (or Firebase in the future), structured like this:

json
{
"Spanish": [
{
"AudioName": "Buenos dias",
"Category": "Greetings",
"Definition": "good morning",
"Word": "Buenos días"
},
{
"AudioName": "Gracias",
"Category": "General",
"Definition": "thank you",
"Word": "Gracias"
}
],
"Italian": [
{
"AudioName": "Messaggio",
"Definition": "message",
"Word": "messaggio"
}
]
}

📌 Step 2: Create a TypeScript Type for JSON Data

We need to ensure TypeScript correctly recognizes our JSON structure.

📍 Inside src/types.ts, create a type definition:

typescript
export type WordEntry = {
AudioName: string;
Category?: string; // Optional field
Definition: string;
Word: string;
};

export type LanguageData = {
[key: string]: WordEntry[];
};

🔍 Explanation:

  • WordEntry: Defines the structure of each word object.
    • AudioName (string) → Stores the word’s audio file name.
    • Category (optional string ?) → Groups words by categories.
    • Definition (string) → English meaning of the word.
    • Word (string) → The actual word in the selected language.
  • LanguageData: Defines a dictionary where:
    • Each key (Spanish, Italian, etc.) maps to an array of WordEntry objects.

✅ Now TypeScript knows how to handle our JSON data!

📌 Step 3: Create the “Start Game” Screen (game.tsx)

This screen will list available languages, allowing the user to select one.

📍 Location: app/game.tsx

🔹 New game.tsx

typescript
import { View, Text, FlatList, Button, TouchableOpacity } from "react-native";
import { useRouter } from "expo-router";
import { globalStyles } from "@/src/globalStyles";
import jsonData from "@/src/data.json";
import { LanguageData } from "@/src/types";

export default function GameSelection() {
const router = useRouter();
const languages = Object.keys(jsonData as LanguageData); // Extract languages

return (
<View style={globalStyles.container}>
<Text style={globalStyles.title}>Select a Language</Text>
<FlatList
data={languages}
keyExtractor={(item) => item}
renderItem={({ item }) => (
<TouchableOpacity
style={globalStyles.button}
onPress={() => router.push(`/wordSearch?lang=${item}`)}
>
<Text style={globalStyles.buttonText}>{item}</Text>
</TouchableOpacity>
)}
/>
<Button title="Back" onPress={() => router.back()} color="gray" />
</View>
);
}

🔍 Explanation:

  • Object.keys(jsonData as LanguageData) → Extracts the available languages (Spanish, Italian, etc.).
  • FlatList → Dynamically lists available languages.
  • router.push("/wordSearch?lang=item") → Passes the selected language to wordSearch.tsx.

✅ Now users can select a language!

📌 Step 4: Implement Word Search (wordSearch.tsx)

This screen will: ✔️ Retrieve the selected language from the navigation parameter.
✔️ Display words at the bottom in three columns.
✔️ Use TypeScript to handle JSON data safely.

📍 Location: app/wordSearch.tsx

🔹 Updated wordSearch.tsx

typescript
import { View, Text, FlatList, Button } from "react-native";
import { useLocalSearchParams, useRouter } from "expo-router";
import { globalStyles } from "@/src/globalStyles";
import jsonData from "@/src/data.json";
import { LanguageData, WordEntry } from "@/src/types";

export default function WordSearch() {
const { lang } = useLocalSearchParams();
const router = useRouter();

if (!lang || typeof lang !== "string" || !(lang in jsonData)) {
return <Text style={globalStyles.title}>Invalid Language</Text>;
}

const words = (jsonData as LanguageData)[lang].map((item) => item.Word);
const definitions = (jsonData as LanguageData)[lang].map((item) => item.Definition);

return (
<View style={globalStyles.container}>
<Text style={globalStyles.title}>{lang} Words:</Text>

<FlatList
data={words}
keyExtractor={(item) => item}
numColumns={3}
renderItem={({ item }) => (
<View style={globalStyles.wordBox}>
<Text>{item}</Text>
</View>
)}
/>

<View style={globalStyles.gridPlaceholder}>
<Text>Word Search Grid Placeholder</Text>
</View>

<View style={globalStyles.buttonContainer}>
<Button title="Options" onPress={() => router.push("/options")} />
<Button title="Back" onPress={() => router.back()} color="gray" />
</View>
</View>
);
}

🔍 Explanation of Fixes & Changes:

  • useLocalSearchParams() → Correctly retrieves the language from the URL.
  • typeof lang !== "string" || !(lang in jsonData) → Ensures lang is valid.
  • Explicit Type Casting (as LanguageData) → Ensures JSON data matches TypeScript expectations.

✅ Now the Word Search screen works perfectly with TypeScript!

📌 Final Steps

1️⃣ Restart the app:

bash
npx expo start

2️⃣ Navigate through:

  • Main Menu → Select a Language → Word Search
  • Ensure the word list & buttons display correctly. 3️⃣ Prepare for building the actual word search grid!

🚀 Now we have a structured Word Search game with TypeScript, JSON, and navigation! 🎮

🎯 What’s Next?

In Tutorial #8, we will: ✔️ Build the actual Word Search grid with randomized letter placement!
✔️ Allow users to find words dynamically in the grid.

🔥 Let me know if everything is working and if the explanations are clear! 🚀

RELATED ARTICLESMORE FROM AUTHOR