Styling & Layout (Flexbox)

StyleSheet API

Membuat optimized style objects dan reuse styles.

jsx
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.

jsx
<FlatList
  data={items}
  renderItem={({item}) => <Text>{item.name}</Text>}
  keyExtractor={item => item.id}
/>

Safe Area

Use SafeAreaView untuk handle notches dan status bars.