Core Components and Styling — React Native in 5 Days

// 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 create-expo-app my-app --template blank
cd my-app
npx expo start