React Native Game Menu: Creating a Game Selection Screen

By
adminCgz
-
0
42

React Native Game Menu: Creating a Game Selection Screen

🚀 Tutorial #5 – Step-by-Step Guide with Expo Router & Firebase

📌 SEO Optimization

SEO Title:

“React Native Game Menu: Implement a Game Selection Screen”

Short Meta Description (Max 60 characters):

“Create a game selection menu in React Native with Firebase.”

Full Meta Description:

“Learn how to create a game selection screen in React Native using Expo Router. Implement Word Search, Crossword Puzzle buttons, navigation, and proper Firebase authentication tracking.”

Keywords:

React Native game menu, Expo Router navigation, React Native game selection, Firebase authentication React Native, React Native word puzzle game

📌 Introduction

In this tutorial, we will: ✅ Restore authentication state tracking in _layout.tsx.
✅ Create a Game Selection Scene (game.tsx) with:

  • 🎮 Title: “Select Game!”
  • 🧩 Buttons: “Word Search,” “Crossword Puzzle Game,” and “Go Back.”
    ✅ Navigate to wordSearch.tsx when clicking “Word Search.”
    ✅ Add a new “Options” page (options.tsx) → Includes a “Back” button.
    ✅ Prepare the “Exit Game” button → Will close the app (for now, keep it empty).
    ✅ Ensure the bottom navigation bar does not block any elements (keeping it for now).

By the end of this tutorial, your app will have a fully functional game selection screen integrated with Firebase authentication and Expo Router navigation. 🚀

📌 Step 1: Review the Updated _layout.tsx

Before continuing, we need to make sure our navigation system is correctly tracking authentication.

📍 Final, Tested _layout.tsx

typescript
import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
import { useFonts } from 'expo-font';
import { Stack, useRouter } from 'expo-router';
import * as SplashScreen from 'expo-splash-screen';
import { StatusBar } from 'expo-status-bar';
import { useEffect, useState } from 'react';
import 'react-native-reanimated';
import { listenForAuthChanges } from '@/src/firebaseConfig';
import { useColorScheme } from '@/hooks/useColorScheme';
import { Platform } from "react-native";export default function Layout() {
const [user, setUser] = useState(null);
const router = useRouter();useEffect(() => {
const unsubscribe = listenForAuthChanges((user) => {
setUser(user);
if (user) {
router.replace(“../(tabs)/index”); // Redirect to home if logged in
} else {
router.replace(“/login”); // Redirect to login if not logged in
}
});

return () => unsubscribe(); // Clean up the listener
}, []);

return <Stack />;
}

🔍 Explanation:

  • listenForAuthChanges() → Listens for authentication state changes.
  • router.replace() → Ensures that users are redirected correctly based on login status.
  • return () => unsubscribe(); → Cleans up the listener to prevent memory leaks.

✅ Now, authentication tracking is restored, and navigation is working!

📌 Step 2: Create the Game Selection Screen

📍 Location: app/game.tsx

Now, let’s create the game selection screen.

🔹 New game.tsx

typescript
import { View, Text, Button, StyleSheet } from "react-native";
import { useRouter } from "expo-router";export default function GameSelection() {
const router = useRouter();return (
<View style={styles.container}>
<Text style={styles.title}>Select Game!</Text>
<Button title=“Word Search” onPress={() => router.push(“/wordSearch”)} />
<Button title=“Crossword Puzzle Game” onPress={() => alert(“Crossword coming soon!”)} />
<Button title=“Go Back” onPress={() => router.back()} color=”gray” />
</View>
);
}

const styles = StyleSheet.create({
container: { flex: 1, justifyContent: “center”, alignItems: “center”, padding: 20 },
title: { fontSize: 24, fontWeight: “bold”, marginBottom: 20 }
});

🔍 Explanation:

  • router.push("/wordSearch") → Navigates to the Word Search game.
  • router.back() → Takes the user back to the main menu.
  • The Crossword button is a placeholder for now.

📌 Step 3: Create the Word Search Game Screen

📍 Location: app/wordSearch.tsx

🔹 New wordSearch.tsx

typescript
import { View, Text, Button, StyleSheet } from "react-native";
import { useRouter } from "expo-router";export default function WordSearch() {
const router = useRouter();return (
<View style={styles.container}>
<Text style={styles.title}>Word Search Game</Text>
<Button title=“Back to Game Selection” onPress={() => router.back()} color=”gray” />
</View>
);
}

const styles = StyleSheet.create({
container: { flex: 1, justifyContent: “center”, alignItems: “center”, padding: 20 },
title: { fontSize: 24, fontWeight: “bold”, marginBottom: 20 }
});

🔍 Explanation:

  • The Word Search screen is currently a placeholder.
  • Users can go back to the Game Selection screen with the Back button.

📌 Step 4: Create the Options Screen

📍 Location: app/options.tsx

🔹 New options.tsx

typescript
import { View, Text, Button, StyleSheet } from "react-native";
import { useRouter } from "expo-router";export default function OptionsScreen() {
const router = useRouter();return (
<View style={styles.container}>
<Text style={styles.title}>Options</Text>
<Button title=“Back” onPress={() => router.back()} />
</View>
);
}

const styles = StyleSheet.create({
container: { flex: 1, justifyContent: “center”, alignItems: “center”, padding: 20 },
title: { fontSize: 24, fontWeight: “bold”, marginBottom: 20 }
});

🔍 Explanation:

  • The Options screen currently only has a Back button.
  • Future updates will add settings and configurations.

📌 Step 5: Update the Main Menu (index.tsx)

📍 Location: app/(tabs)/index.tsx

🔹 Updated index.tsx

typescript
import { View, Text, Button, StyleSheet } from "react-native";
import { useRouter } from "expo-router";export default function HomeScreen() {
const router = useRouter();return (
<View style={styles.container}>
<Text style={styles.title}>Main Menu</Text>
<Button title=“Start Game” onPress={() => router.push(“/game”)} />
<Button title=“Options” onPress={() => router.push(“/options”)} />
<Button title=“Exit Game” onPress={() => alert(“Exit functionality coming soon!”)} color=”red” />
</View>
);
}

🔍 Explanation:

  • “Start Game” → Navigates to game.tsx.
  • “Options” → Navigates to options.tsx.
  • “Exit Game” → Placeholder for closing the app.

📌 Final Steps

1️⃣ Restart the app:

bash
npx expo start

2️⃣ Test:

  • Main Menu → Game Selection → Word Search
  • Main Menu → Options 3️⃣ Ensure:
  • Navigation works properly.
  • The bottom bar doesn’t block any UI elements.

🚀 Now your app has a fully functional Game Selection screen that works with authentication! 🎮

🎯 What’s Next?

In Tutorial #6, we will:

✅ Creating a global stylesheet for the entire app.
✅ Refactoring all screens to use this new global stylesheet.
✅ Explaining why a global stylesheet is better than defining styles per page.
✅ Ensuring consistency across all screens with reusable styles.

🔥 Let me know if everything works perfectly now! 🚀

RELATED ARTICLESMORE FROM AUTHOR