Embark on a journey of knowledge! Take the quiz and earn valuable credits.
Take A QuizChallenge yourself and boost your learning! Start the quiz now to earn credits.
Take A QuizUnlock your potential! Begin the quiz, answer questions, and accumulate credits along the way.
Take A Quiz
🧭 What You’ll Learn
In this chapter, you'll:
📐 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:
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:
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
📊 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:
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.
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.
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.
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.
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.
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.
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.
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.
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.
Answer:
You can add features like:
These upgrades help turn a simple app into a portfolio-level
project.
Please log in to access this content. You will be redirected to the login page shortly.
LoginReady to take your education and career to the next level? Register today and join our growing community of learners and professionals.
Comments(0)