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

7.09K 0 0 0 0

📘 Chapter 2: Creating the App Layout and UI Components

🧭 What You’ll Learn

In this chapter, you'll:

  • Understand React Native layout principles using Flexbox
  • Build a weather app layout using View, Text, TextInput, Image, and ScrollView
  • Design a responsive UI with proper spacing and alignment
  • Use a clean, modular component structure
  • Apply consistent styling using StyleSheet.create()
  • Organize reusable components for scalability

📐 React Native Layout Fundamentals

React Native uses Flexbox by default for layout. Instead of div and span, you’ll use View, and instead of p or h1, you’ll use Text.

🧱 Core Layout Components

Component

Purpose

View

Container for layout

Text

Render text (static/dynamic)

TextInput

Capture user input

Image

Display static or remote images

ScrollView

Enable scrolling for vertically long content


️ Step-by-Step Layout Design for the Weather App


1. App Overview Layout

We’ll break the layout into 3 parts:

  • Header – App title and location input
  • Main Content – Weather condition, temperature, icon
  • Footer/Extra Info – Humidity, wind speed, etc.

jsx

 

<View style={styles.container}>

  <View style={styles.header}></View>

  <View style={styles.content}></View>

  <View style={styles.footer}></View>

</View>


📦 Initial Component Tree Structure

Section

Components

Header

TextInput, Text

Content

Image, Text for temperature

Footer

Text for humidity, wind, etc.


💻 Code Walkthrough

📄 App.js

jsx

 

import React, { useState } from 'react';

import {

  View,

  Text,

  TextInput,

  StyleSheet,

  Image,

  ScrollView,

} from 'react-native';

 

export default function App() {

  const [city, setCity] = useState('');

  const [weather, setWeather] = useState({

    temp: '--',

    description: '--',

    humidity: '--',

    wind: '--',

  });

 

  return (

    <ScrollView style={styles.container}>

      <Text style={styles.appTitle}>🌤️ WeatherNow</Text>

 

      <TextInput

        style={styles.input}

        placeholder="Enter city name"

        onChangeText={setCity}

        value={city}

      />

 

      <View style={styles.weatherBox}>

        <Text style={styles.temperature}>{weather.temp}°C</Text>

        <Image

          source={require('./assets/weather-icon.png')}

          style={styles.icon}

        />

        <Text style={styles.condition}>{weather.description}</Text>

      </View>

 

      <View style={styles.extraInfo}>

        <Text>Humidity: {weather.humidity}%</Text>

        <Text>Wind: {weather.wind} km/h</Text>

      </View>

    </ScrollView>

  );

}


🎨 Styling with StyleSheet.create()

📄 Continue in App.js

jsx

 

const styles = StyleSheet.create({

  container: {

    flex: 1,

    padding: 20,

    backgroundColor: '#eef6f9',

  },

  appTitle: {

    fontSize: 32,

    textAlign: 'center',

    marginVertical: 20,

    color: '#333',

  },

  input: {

    borderWidth: 1,

    borderColor: '#999',

    padding: 10,

    borderRadius: 8,

    marginBottom: 20,

    backgroundColor: '#fff',

  },

  weatherBox: {

    alignItems: 'center',

    marginVertical: 30,

  },

  temperature: {

    fontSize: 48,

    fontWeight: 'bold',

  },

  icon: {

    width: 100,

    height: 100,

    marginVertical: 10,

  },

  condition: {

    fontSize: 20,

    fontStyle: 'italic',

  },

  extraInfo: {

    marginTop: 30,

    padding: 15,

    backgroundColor: '#dff3f9',

    borderRadius: 10,

  },

});


🔍 Responsive Design with Flexbox

🧱 Key Flexbox Properties

Property

Usage

flexDirection

row or column (default: column)

justifyContent

Align children vertically (center, space-between)

alignItems

Align children horizontally (center, stretch)

🔹 Example

jsx

 

<View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>

  <Text>Humidity</Text>

  <Text>Wind</Text>

</View>


📱 Making UI Component-Based

Break UI into reusable components for better structure.

📁 File Structure

bash

 

/components

  └─ Header.js

  └─ WeatherDisplay.js

  └─ InfoPanel.js

📄 Header.js

jsx

 

export default function Header({ city, setCity }) {

  return (

    <>

      <Text style={styles.title}>🌦️ WeatherNow</Text>

      <TextInput

        style={styles.input}

        placeholder="Enter city..."

        value={city}

        onChangeText={setCity}

      />

    </>

  );

}


🔁 Scrollable Layouts

Use ScrollView when:

  • Content is longer than screen
  • You want to support vertical scrolling

Example:

jsx

 

<ScrollView contentContainerStyle={styles.scrollStyle}>

  {/* Your weather data here */}

</ScrollView>


🖼 Using Remote Weather Icons

You can fetch icons dynamically from APIs like OpenWeatherMap:

jsx

 

<Image

  source={{ uri: `http://openweathermap.org/img/wn/${icon}@2x.png` }}

  style={{ width: 100, height: 100 }}

/>

Make sure to allow remote images in your Expo config or use HTTPS sources.


🧠 Component Design Tips

  • Keep components small and specific
  • Pass props for flexibility (<WeatherBox data={...} />)
  • Separate logic from layout whenever possible
  • Use Flexbox containers instead of absolute positioning
  • Use meaningful names like CityInput, ForecastCard, etc.

📊 Table: Key Components and Their Roles

Component Name

Purpose

Header

Title and city input

WeatherDisplay

Icon, temperature, condition

InfoPanel

Extra info (humidity, wind, etc.)

App.js

Combines and renders all components


Summary

You’ve successfully:

  • Built the core layout of your weather app
  • Used essential components like TextInput, View, Text, and Image
  • Styled your app using StyleSheet and Flexbox
  • Learned to organize your app into components
  • Prepared the UI to handle dynamic weather data in the next chapter

Back

FAQs


❓1. Do I need to know React to build a React Native weather app?

Answer:
While React Native shares many concepts with React (like components, props, and state), you don’t need to be an expert in React to start. Basic knowledge of JavaScript and understanding of components will help you get going quickly.

❓2. What’s the difference between Expo and React Native CLI?

Answer:
Expo is a framework and platform that simplifies React Native development. It’s great for beginners.
React Native CLI provides full native access and is preferred for advanced, production-grade apps. For this weather app, Expo is usually enough.

❓3. Which weather API should I use?

Answer:
You can use any public weather API, but OpenWeatherMap is beginner-friendly, well-documented, and offers a free tier with real-time weather data, making it ideal for this project.

❓4. Is this weather app cross-platform?

Answer:
Yes! React Native apps work on both Android and iOS. You’ll be building one codebase that runs on both platforms with native-like performance.

❓5. Can I use geolocation to show weather for the current location?

Answer:
Absolutely. React Native supports location access through packages like expo-location or react-native-geolocation-service, which lets you fetch the user’s coordinates and use them in your API requests.

❓6. Do I need to pay for an API key?

Answer:
No. Most APIs like OpenWeatherMap offer a free tier that includes current weather data, which is enough for this app. Just sign up and grab your API key from their dashboard.

❓7. How do I manage the app’s state?

Answer:
This app uses React Hooks—mainly useState for managing input and weather data, and useEffect for API calls. For more advanced apps, you might consider using context or libraries like Redux.

❓8. How do I style the UI in React Native?

Answer:
React Native uses the StyleSheet.create() method to define CSS-like styles. You can also use Flexbox for layout and third-party libraries like react-native-elements or styled-components for more flexibility.

❓9. Can I deploy this app to the Google Play Store or Apple App Store?

Answer:
Yes, with additional steps. You’ll need to create a developer account for each store, build release versions, test thoroughly, and follow each platform’s publishing guidelines. Expo also offers services like EAS Build to simplify deployment.

❓10. What else can I add to make the app more advanced?

Answer:
You can add features like:

  • 7-day weather forecasts
  • Hourly breakdowns
  • Save favorite cities
  • Background images based on weather
  • Dark mode support
  • Weather animations (e.g., rain, sun, snow)


These upgrades help turn a simple app into a portfolio-level project.