React Native Global Stylesheet: How to Standardize Your App’s UI

By
adminCgz
-
0
36

React Native Global Stylesheet: How to Standardize Your App’s UI

🚀 Tutorial #6 – Step-by-Step Guide for a Scalable Design

📌 SEO Optimization

SEO Title:

“React Native Global Styles: How to Standardize Your App’s UI”

Short Meta Description (Max 60 characters):

“Create a global stylesheet in React Native for better UI.”

Full Meta Description:

“Learn how to implement a global stylesheet in React Native to create a consistent and maintainable UI across all screens. Improve your app’s scalability with reusable styles.”

Keywords:

React Native global styles, Expo Router styling, React Native design consistency, React Native reusable styles, UI scalability in React Native

📌 Introduction

In this tutorial, we will:
✅ Create a global stylesheet (globalStyles.ts) to manage UI styling across the app.
✅ Refactor all screens (index.tsx, game.tsx, wordSearch.tsx) to use the new styles.
✅ Explain why a global stylesheet is better than defining styles per page.

By the end, your app will have a consistent design that’s easier to maintain and scale! 🚀

📌 Step 1: Why Use a Global Stylesheet?

🔹 Problem:

Right now, every screen has its own separate styles, making it:
❌ Hard to maintain → Changes must be made in multiple files.
❌ Inconsistent → Some pages might use slightly different fonts, margins, or colors.
❌ Less efficient → Repeated code wastes space and increases complexity.

✅ Solution: Global Styles

A global stylesheet solves these problems by:
✔️ Centralizing all styles in one file (globalStyles.ts).
✔️ Ensuring UI consistency across all screens.
✔️ Making updates easier (change one file instead of multiple screens).
✔️ Reducing redundancy and improving performance.

📌 Step 2: Create the Global Stylesheet

📍 Location: src/globalStyles.ts

🔹 New globalStyles.ts

typescript
import { StyleSheet } from "react-native";

export const globalStyles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
padding: 20,
backgroundColor: "#F5F5F5",
},
title: {
fontSize: 24,
fontWeight: "bold",
marginBottom: 20,
color: "#333",
},
button: {
marginVertical: 10,
width: "80%",
},
buttonText: {
fontSize: 18,
textAlign: "center",
padding: 10,
},
backButton: {
marginTop: 20,
backgroundColor: "#CCC",
padding: 10,
borderRadius: 5,
},
});

🔍 Explanation:

  • container → A default layout used across all screens.
  • title → A consistent text style for screen titles.
  • button → A standard button layout.
  • buttonText → Uniform button text styling.
  • backButton → A consistent “Back” button style.

📌 Step 3: Refactor Screens to Use Global Styles

Now, let’s replace the old styles in all screens with globalStyles.ts.

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

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

🔹 Updated index.tsx

typescript
import { View, Text, Button } from "react-native";
import { useRouter } from "expo-router";
import { globalStyles } from "@/src/globalStyles";

export default function HomeScreen() {
const router = useRouter();

return (
<View style={globalStyles.container}>
<Text style={globalStyles.title}>Main Menu</Text>
<View style={globalStyles.button}>
<Button title="Start Game" onPress={() => router.push("/game")} />
</View>
<View style={globalStyles.button}>
<Button title="Options" onPress={() => router.push("/options")} />
</View>
<View style={globalStyles.button}>
<Button title="Exit Game" onPress={() => alert("Exit functionality coming soon!")} color="red" />
</View>
</View>
);
}

📌 Step 3.2: Update the Game Selection Screen (game.tsx)

📍 Location: app/game.tsx

🔹 Updated game.tsx

typescript
import { View, Text, Button } from "react-native";
import { useRouter } from "expo-router";
import { globalStyles } from "@/src/globalStyles";

export default function GameSelection() {
const router = useRouter();

return (
<View style={globalStyles.container}>
<Text style={globalStyles.title}>Select Game!</Text>
<View style={globalStyles.button}>
<Button title="Word Search" onPress={() => router.push("/wordSearch")} />
</View>
<View style={globalStyles.button}>
<Button title="Crossword Puzzle Game" onPress={() => alert("Crossword coming soon!")} />
</View>
<View style={globalStyles.backButton}>
<Button title="Go Back" onPress={() => router.back()} color="gray" />
</View>
</View>
);
}

📌 Step 3.3: Update the Options Screen (options.tsx)

📍 Location: app/options.tsx

🔹 Updated options.tsx

typescript
import { View, Text, Button } from "react-native";
import { useRouter } from "expo-router";
import { globalStyles } from "@/src/globalStyles";

export default function OptionsScreen() {
const router = useRouter();

return (
<View style={globalStyles.container}>
<Text style={globalStyles.title}>Options</Text>
<View style={globalStyles.backButton}>
<Button title="Back" onPress={() => router.back()} />
</View>
</View>
);
}

📌 Step 3.4: Update the Word Search Screen (wordSearch.tsx)

📍 Location: app/wordSearch.tsx

🔹 Updated wordSearch.tsx

typescript
import { View, Text, Button } from "react-native";
import { useRouter } from "expo-router";
import { globalStyles } from "@/src/globalStyles";

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

return (
<View style={globalStyles.container}>
<Text style={globalStyles.title}>Word Search Game</Text>
<View style={globalStyles.backButton}>
<Button title="Back to Game Selection" onPress={() => router.back()} />
</View>
</View>
);
}

📌 Final Steps

1️⃣ Restart the app:

bash
npx expo start

2️⃣ Navigate between:

  • Main Menu → Game Selection → Word Search
  • Main Menu → Options 3️⃣ Verify all screens have a consistent UI.

🚀 Now your app uses a global stylesheet, making styling easier and scalable! 🎮

🎯 What’s Next?

In Tutorial #7, we will: ✔️ Start building the actual Word Search game!
✔️ Load words dynamically from Firebase.

🔥 Let me know if everything works perfectly now! 🚀

RELATED ARTICLESMORE FROM AUTHOR