Tekst weergeven en lettertypen opmaken

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

export default function Article() {
  return (
    <Text style={styles.paragraph}>
      React Native brings the best parts of mobile development
      together, combining a smooth native experience with the
      speed of JavaScript development.
    </Text>
  );
}

const styles = StyleSheet.create({
  paragraph: {
    fontSize: 16,
    color: '#444',
    lineHeight: 26,     // 26/16 = 1.625× line height
    letterSpacing: 0.2, // slight tracking for readability
  },
});

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

export default function TextStyling() {
  return (
    <View style={{ padding: 16 }}>
      <Text style={styles.centered}>Centered heading</Text>
      <Text style={styles.link}>Tap to visit website</Text>
      <Text style={styles.strikethrough}>Old price: $29.99</Text>
      <Text style={styles.uppercase}>sale ends tonight</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  centered: { textAlign: 'center', fontSize: 20, fontWeight: 'bold' },
  link: { color: '#0066cc', textDecorationLine: 'underline' },
  strikethrough: { textDecorationLine: 'line-through', color: '#999' },
  uppercase: { textTransform: 'uppercase', letterSpacing: 2, fontSize: 14 },
});

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

export default function MixedText() {
  return (
    <View style={{ padding: 16 }}>
      <Text style={{ fontSize: 16, color: '#333' }}>
        Welcome back,{' '}
        <Text style={{ fontWeight: 'bold', color: '#0066cc' }}>
          Alice
        </Text>
        ! You have{' '}
        <Text style={{ color: 'red', fontWeight: '600' }}>3</Text>
        {' '}unread messages.
      </Text>
    </View>
  );
}

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

const longTitle = 'The Complete Guide to Building Production-Ready React Native Applications in 2024';

export default function TruncatedText() {
  return (
    <View style={{ padding: 16 }}>
      <Text numberOfLines={1} ellipsizeMode='tail' style={styles.title}>
        {longTitle}
      </Text>
      <Text numberOfLines={2} ellipsizeMode='tail' style={styles.body}>
        {longTitle}
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  title: { fontSize: 18, fontWeight: 'bold', marginBottom: 8 },
  body: { fontSize: 14, color: '#666' },
});

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

export default function App() {
  const [fontsLoaded] = useFonts({
    'Poppins-Regular': require('./assets/fonts/Poppins-Regular.ttf'),
    'Poppins-Bold': require('./assets/fonts/Poppins-Bold.ttf'),
  });

  if (!fontsLoaded) return null; // Show splash or null while loading

  return (
    <View style={{ padding: 24 }}>
      <Text style={{ fontFamily: 'Poppins-Bold', fontSize: 24 }}>
        Custom Font Heading
      </Text>
      <Text style={{ fontFamily: 'Poppins-Regular', fontSize: 16 }}>
        Body text with Poppins Regular.
      </Text>
    </View>
  );
}

import { useFonts, Inter_400Regular, Inter_700Bold } from '@expo-google-fonts/inter';
import { Text, View } from 'react-native';

export default function App() {
  const [fontsLoaded] = useFonts({
    Inter_400Regular,
    Inter_700Bold,
  });

  if (!fontsLoaded) return null;

  return (
    <View style={{ padding: 24 }}>
      <Text style={{ fontFamily: 'Inter_700Bold', fontSize: 24 }}>
        Inter Bold
      </Text>
      <Text style={{ fontFamily: 'Inter_400Regular', fontSize: 16 }}>
        Inter Regular body text.
      </Text>
    </View>
  );
}

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

export default function InteractiveText() {
  return (
    <View style={{ padding: 16 }}>
      {/* Selectable text (user can copy) */}
      <Text selectable style={{ fontSize: 14, color: '#333', marginBottom: 16 }}>
        Long-press to select and copy this text.
      </Text>

      {/* Tappable text link */}
      <Text
        style={{ color: '#0066cc', fontSize: 16 }}
        onPress={() => Alert.alert('Link tapped!')}
        accessibilityRole='link'
      >
        Terms and Conditions
      </Text>
    </View>
  );
}

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

export default function Article() {
  return (
    <ScrollView contentContainerStyle={{ padding: 16 }}>
      <View style={styles.row}>
        <Text style={styles.label}>Title:</Text>
        {/* flexShrink prevents overflowing the row */}
        <Text style={styles.value} numberOfLines={1}>
          A Very Long Article Title That Would Otherwise Overflow
        </Text>
      </View>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  row: { flexDirection: 'row', alignItems: 'center', gap: 8 },
  label: { fontWeight: 'bold', color: '#333' },
  value: { flexShrink: 1, color: '#666' },
});

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

export default function AccessibleText() {
  return (
    <View>
      {/* Screen reader will say: 'Alice, 5 unread messages' */}
      <View accessible accessibilityLabel='Alice, 5 unread messages'>
        <Text style={{ fontWeight: 'bold' }}>Alice</Text>
        <Text style={{ color: 'red' }}>5</Text>
      </View>

      <TouchableOpacity
        accessibilityLabel='Delete account'
        accessibilityHint='Double tap to permanently delete your account'
      >
        <Text style={{ color: 'red' }}>Delete</Text>
      </TouchableOpacity>
    </View>
  );
}