Styling & Layout

Styling in React Native

In React Native werk je met JavaScript objects voor styling in plaats van CSS. Dit heet "CSS-in-JS".

Inline Styles

Je kunt styles direct op een component toepassen met het style prop.

Voorbeeld

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

export default function App() {
  return (
    <View style={{ 
      flex: 1, 
      backgroundColor: '#f0f0f0' 
    }}>
      <Text style={{ 
        fontSize: 20, 
        color: 'blue',
        fontWeight: 'bold'
      }}>
        Dit is een tekst
      </Text>
    </View>
  );
}

StyleSheet API

De StyleSheet API is de aanbevolen manier om styles te definiëren in React Native.

Waarom StyleSheet gebruiken?

Basis Voorbeeld

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Hello World!</Text>
      <Text style={styles.subtitle}>Welkom bij React Native</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f5f5f5',
    padding: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#333',
    marginBottom: 10,
  },
  subtitle: {
    fontSize: 16,
    color: '#666',
  },
});

Meerdere Styles Combineren

Je kunt meerdere styles combineren met een array:

<Text style={[styles.text, styles.bold, styles.large]}>
  Gecombineerde styles
</Text>

const styles = StyleSheet.create({
  text: {
    color: 'black',
  },
  bold: {
    fontWeight: 'bold',
  },
  large: {
    fontSize: 20,
  },
});

Flexbox Basics

Flexbox is het belangrijkste layout systeem in React Native. Standaard heeft elke View al display: flex!

Simpel Voorbeeld

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

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.box1} />
      <View style={styles.box2} />
      <View style={styles.box3} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 20,
  },
  box1: {
    width: 50,
    height: 50,
    backgroundColor: 'red',
  },
  box2: {
    width: 50,
    height: 50,
    backgroundColor: 'green',
  },
  box3: {
    width: 50,
    height: 50,
    backgroundColor: 'blue',
  },
});

Flexbox Properties

flexDirection

Bepaalt de richting waarin children worden geplaatst.

justifyContent

Bepaalt hoe items worden verdeeld langs de hoofdas.

alignItems

Bepaalt hoe items worden uitgelijnd op de kruisas.

container: {
  flex: 1,
  justifyContent: 'center', // Centreer op hoofdas
  alignItems: 'center',     // Centreer op kruisas
}

flex Property

Bepaalt hoeveel ruimte een component inneemt ten opzichte van siblings.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
  },
  box1: {
    flex: 1,
    backgroundColor: 'red',
  },
  box2: {
    flex: 2, // 2x zo breed!
    backgroundColor: 'green',
  },
  box3: {
    flex: 1,
    backgroundColor: 'blue',
  },
});

Responsive Design

React Native apps draaien op verschillende schermgroottes. Gebruik deze technieken om je app responsive te maken.

Dimensions API

Krijg de schermgrootte van het apparaat:

import { Dimensions } from 'react-native';

const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;

console.log('Breedte:', windowWidth);
console.log('Hoogte:', windowHeight);

Percentages

Gebruik percentages in plaats van vaste waardes:

const styles = StyleSheet.create({
  container: {
    width: '100%', // Vult hele breedte
    height: '50%', // Vult halve hoogte
  },
  box: {
    width: '80%', // 80% van parent width
    padding: '5%', // 5% padding
  },
});

Flexbox voor Responsive

Gebruik flex om componenten mee te laten schalen:

const styles = StyleSheet.create({
  container: {
    flex: 1, // Vult beschikbare ruimte
  },
  content: {
    flex: 1, // Schaalt mee met schermgrootte
  },
});

Veelgebruikte Styles

Layout & Spacing

const styles = StyleSheet.create({
  // Padding (ruimte binnen)
  container: {
    padding: 20,
    paddingVertical: 10,
    paddingHorizontal: 20,
  },
  
  // Margin (ruimte buiten)
  box: {
    margin: 20,
    marginVertical: 10,
    marginHorizontal: 20,
  },
});

Borders & Radius

const styles = StyleSheet.create({
  card: {
    borderWidth: 1,
    borderColor: '#ddd',
    borderRadius: 10,
  },
});

Text Styling

const styles = StyleSheet.create({
  text: {
    fontSize: 16,
    fontWeight: 'bold',
    color: '#333',
    textAlign: 'center',
    lineHeight: 24,
  },
});

Background & Opacity

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#f0f0f0',
    opacity: 0.8,
  },
});

Samenvatting