Styling and Flexbox

StyleSheet

import { StyleSheet, View, Text } from 'react-native';

const styles = StyleSheet.create({
  card: { padding: 16, backgroundColor: '#f3eefe', borderRadius: 12 },
  title: { fontSize: 18, fontWeight: 'bold' },
});

<View style={styles.card}>
  <Text style={styles.title}>Profile</Text>
</View>

Flexbox layout

React Native uses flexbox for layout. The key props:

• flexDirection — 'column' (default) or 'row'.
• justifyContent — spacing along the main axis.
• alignItems — alignment on the cross axis.

<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
  <Text>Left</Text>
  <Text>Right</Text>
</View>