WeatherNow — React Native From Zero

A real cross-platform mobile weather app, built from scratch with React Native + Expo. Search any city and get live current conditions plus a multi-day forecast — one codebase running on iOS and Android.

Live weather data from the free Open-Meteo API — no API key, no backend, no sign-up.

This is Day 49 of the TechFromZero series: a new technology every day, each as a real project with commits you can read one concept at a time.

---

Quick start

# 1. install Expo's tooling (once)
npm install -g expo

# 2. install dependencies
npm install

# 3. run it
npx expo start

Then either:

• Phone: install Expo Go (App Store / Play Store) and scan the QR code in your terminal.
• Emulator: press a for Android or i for iOS in the Expo terminal.

No keys to configure — it just runs.

---

What you'll learn (read the commits in order)

Each commit adds one idea. Clone the repo and git log --reverse to follow along.

Step	File	Concept
1	App.js	The entry point — a "container" that owns state
2	src/theme.js	Styles are plain JS objects; share them in one place
3	src/api/weather.js	fetch + reshaping an API response behind a clean function
4	src/components/SearchBar.js	A controlled <TextInput> — React you already know
5	src/components/CurrentWeather.js	Pure presentational components
6	src/components/Forecast.js	FlatList — virtualized lists for free
7–10	App.js	useState, useEffect, async loading, and rendering by state

---

The core idea

If you know React on the web, you already know React Native. The mental model is identical — components, JSX, props, useState, useEffect. Only the primitives change:

Web	React Native
<div>	<View>
<span> / <p>	<Text>
<input>	<TextInput>
<ul> + .map()	<FlatList>
CSS files	StyleSheet.create({}) (Flexbox by default)

The data flow here is pure React: a city name lives in state → getWeather() fetches it → setData() triggers a re-render → the components draw the result.

---

Architecture

App.js                    ← state + data loading (the container)
 ├─ SearchBar             ← controlled input
 ├─ CurrentWeather        ← the "right now" header
 └─ Forecast (FlatList)   ← the multi-day list
src/api/weather.js        ← geocode city → fetch forecast → reshape
src/theme.js              ← colours, spacing, weather-code → emoji

Two chained fetches power everything:

1. Geocode the city name → latitude / longitude.
2. Forecast for those coordinates → current + daily.

---

Ship it to the app stores

Expo's EAS Build compiles your JavaScript into real native binaries in the cloud:

npm install -g eas-cli
eas build -p android     # a real .aab / .apk
eas build -p ios         # an iOS build — no Mac required

One project, two native apps, both stores.

---

Built as part of TechFromZero. Each file is commented to explain why, not just what — written for anyone learning React Native by reading real code.