Build a Stunning Weather App with React Native: A Step-by-Step Beginner’s Guide

📘 Chapter 6: Final Touches, Optimization, and Deployment

🧭 What You’ll Learn

By the end of this chapter, you’ll be able to:

• Clean up and optimize your weather app’s codebase
• Improve app performance and file structure
• Add icons and splash screens
• Prepare builds for Android and iOS
• Deploy using Expo EAS or React Native CLI
• Publish your app to the Play Store and App Store

🧹 Step 1: Code Cleanup and Folder Organization

✅ Structure Your Project Like This:

bash

/assets

  └─ icons/

  └─ backgrounds/

  └─ animations/

/components

  └─ Header.js

  └─ WeatherCard.js

  └─ ThemeToggle.js

/api

  └─ weatherService.js

/constants

  └─ theme.js

  └─ colors.js

/screens

  └─ HomeScreen.js

/App.js

This makes your project easier to maintain, scale, and debug.

⚙️ Step 2: Reusable Styles and Constants

🔹 Create /constants/colors.js

js

export const colors = {

  light: {

    background: '#f8fafc',

    text: '#0f172a',

  },

  dark: {

    background: '#1e293b',

    text: '#f1f5f9',

  },

  sunny: '#fef08a',

  rainy: '#bae6fd',

  cloudy: '#e5e7eb',

};

🔹 Reuse in Components

js

import { colors } from '../constants/colors';

<Text style={{ color: colors.light.text }}>Weather</Text>

🚀 Step 3: App Icon and Splash Screen (Expo)

✅ Replace default assets

1. Place your icon in /assets/icon.png
2. Splash screen: /assets/splash.png

✅ Update app.json

json

{

  "expo": {

    "name": "WeatherNow",

    "slug": "weathernow",

    "icon": "./assets/icon.png",

    "splash": {

      "image": "./assets/splash.png",

      "resizeMode": "contain",

      "backgroundColor": "#ffffff"

    }

  }

}

📈 Step 4: Performance Optimization

✅ Reduce Re-renders

• Memoize components with React.memo()
• Use useCallback() and useMemo()
• Don’t keep heavy logic inside render function

✅ Lazy Load Components

jsx

const WeatherCard = React.lazy(() => import('./components/WeatherCard'));

<Suspense fallback={<ActivityIndicator />}>

  <WeatherCard />

</Suspense>

✅ Optimize Image Loading

• Use smaller resolution images for icons
• Use caching for remote images (with expo-image-cache or similar)

✅ Bundle Optimization (CLI)

Use metro.config.js to exclude unused modules, fonts, or assets.

📦 Step 5: Generate Production Build with Expo

🔹 Install EAS CLI

bash

npm install -g eas-cli

eas login

🔹 Configure eas.json

json

{

  "build": {

    "development": {

      "developmentClient": true,

      "distribution": "internal"

    },

    "preview": {

      "distribution": "internal"

    },

    "production": {

      "android": {

        "buildType": "apk"

      },

      "ios": {

        "buildType": "app-store"

      }

    }

  }

}

🔹 Build

bash

eas build -p android --profile production

eas build -p ios --profile production

🛠 Optional: React Native CLI Build

Use this if you ejected from Expo or started with CLI.

bash

npx react-native run-android

npx react-native run-ios

Generate signed APK or AAB for Play Store:

bash

cd android

./gradlew assembleRelease

🧪 Step 6: Test on Multiple Devices

🌍 Step 7: Deploy to Play Store and App Store

✅ Android – Play Store

1. Create a Google Play Developer account ($25 one-time)
2. Upload AAB file (Android App Bundle)
3. Fill out app content, screenshots, and privacy policies
4. Wait for approval (usually 3–7 days)

✅ iOS – App Store

1. Register for Apple Developer Program ($99/year)
2. Upload via EAS Submit or Transporter App
3. Set up App Store Connect metadata
4. Submit for review and wait for approval

🚀 Publish With EAS

bash

eas submit --platform android

eas submit --platform ios

Follow on-screen prompts to upload credentials.

📋 Table: EAS vs React Native CLI

🧠 Final App Review Checklist

✅ Summary

You’ve just completed the journey of:

• Cleaning and optimizing your React Native weather app
• Enhancing performance and UI consistency
• Building for Android and iOS
• Deploying with Expo EAS or React Native CLI
• Preparing for store publishing

Congratulations! 🎉 Your app is now production-ready and can reach users worldwide!