React Native lets you build real iOS and Android apps using React. Instead of div and span, you use View, Text, and Image. Styling uses a JavaScript object that mirrors CSS. By the end of today you will have a running app on your phone.
// App.js
import { View, Text, StyleSheet, Image, ScrollView } from 'react-native';
export default function App() {
return (
<ScrollView style={styles.container}>
<View style={styles.card}>
<Image
source={{ uri: 'https://picsum.photos/300/200' }}
style={styles.image}
/>
<Text style={styles.title}>Hello React Native</Text>
<Text style={styles.body}>
This is a real mobile app component.
</Text>
</View>
</ScrollView>
);
}
const styles = StyleSheet.create({
container: { flex: 1, backgroundColor: '#f5f5f5', padding: 16 },
card: { backgroundColor: '#fff', borderRadius: 12, overflow: 'hidden',
shadowColor: '#000', shadowOpacity: 0.1, shadowRadius: 8,
elevation: 3 },
image: { width: '100%', height: 200 },
title: { fontSize: 20, fontWeight: '700', padding: 16, paddingBottom: 4 },
body: { fontSize: 15, color: '#555', padding: 16, paddingTop: 0 },
});npx expo start and scan the QR code with Expo Go on your phone.npx create-expo-app my-app --template blank
cd my-app
npx expo start