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

📘 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

✏️ 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

💻 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

🔹 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

✅ 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