Styling & Layout (Flexbox)

StyleSheet API

Membuat optimized style objects dan reuse styles.

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: { flex: 1, padding: 10 },
  text: { fontSize: 18, color: 'black' }
});

Inline vs StyleSheet

StyleSheet direkomendasikan untuk performance dan maintainability dibanding inline styles.

Flexbox Layout

React Native menggunakan Flexbox untuk layout.

**Key properties:**

flexDirection: 'row' | 'column' (default)

justifyContent: align items sepanjang main axis

alignItems: align items sepanjang cross axis

flex: grow/shrink factor

Positioning

**static**: Normal dokumen flow (default)

**absolute**: Relative ke parent

**relative**: Offset dari normal position

FlatList

Efficient rendering list untuk banyak items.

 {item.name}}
  keyExtractor={item => item.id}
/>

Safe Area

Use SafeAreaView untuk handle notches dan status bars.