If you can build a website with React, you already know how to build a real mobile app. I just proved it to myself by building WeatherNow — search any city, get the live current conditions plus a multi-day forecast — and shipping the same code to both iOS and Android.

This is Day 49 of my TechFromZero series: a new technology every day, each as a real project you can read commit by commit.

👉 Full code: https://github.com/dev48v/react-native-from-zero

The mental shift that makes React Native click

React Native is not a new framework. It's a new renderer for the React you already write. Components, JSX, props, useState, useEffect — all identical. The only thing that changes is the primitives:

That's basically the whole learning curve. 90% of your knowledge transfers on day one.

One command to a running app

Forget Xcode and Android Studio for now. Expo collapses the setup to one command:

npx create-expo-app weather-now
cd weather-now
npx expo start

Scan the QR code with the free Expo Go app and your code is running on your actual phone, with hot reload.

Data flow is pure React

The app does two chained fetches against the free Open-Meteo API — no key, no backend:

const [weather, setWeather] = useState(null);

async function load(city) {
 // 1. geocode the city name → coordinates
 const g = await fetch(`https://geocoding-api.open-meteo.com/v1/search?name=${city}`).then(r => r.json());
 const { latitude, longitude } = g.results[0];
 // 2. fetch the forecast for those coordinates
 const w = await fetch(`https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}&current=temperature_2m,weather_code&daily=weather_code,temperature_2m_max,temperature_2m_min&timezone=auto`).then(r => r.json());
 setWeather(w);
}

useEffect(() => { load("Bhandara"); }, []);

useEffect(..., []) loads a default city on mount. setWeather triggers a re-render. Exactly what you'd write on the web.

FlatList: virtualized lists for free

<FlatList
 data={weather.daily.time}
 keyExtractor={(d) => d}
 renderItem={({ item, index }) => (
 <Text>{item}: {weather.daily.temperature_2m_max[index]}°</Text>
 )}
/>

FlatList only mounts the rows on screen and recycles them as you scroll. Overkill for a 7-day forecast — but it's the habit you want, because the same component handles 7 rows or 7,000 without slowing down.

One codebase → both app stores

When you're ready, EAS Build compiles your JavaScript into real native binaries in the cloud — you don't even need a Mac for the iOS one:

eas build -p android
eas build -p ios

One project, two native apps, both stores.

The takeaway

The barrier to mobile development isn't the language or the tools anymore. If you know React, the gap is just a handful of tag names. Clone the repo, read the commits one at a time — each commit is one concept — and you'll have a real app on your phone tonight.

🌐 See all days: https://dev48v.infy.uk/techfromzero.php