Een foutmelding lezen

Een foutmelding is geen straf, maar een hint. De computer vertelt je wat er mis is, en vaak ook waar.

Waar zie je de foutmelding?

  • Telefoon: een rood scherm in Expo Go
  • Terminal: waar npx expo start draait

Zo pak je het aan

  1. Lees de eerste rode regel. Die zegt wat er mis is
  2. Zoek de bestandsnaam en het regelnummer, bijv. App.jsx:12. Daar zit de fout (of net een regel erboven)
  3. Zoek je foutmelding hieronder op

Tip: plak je foutmelding in de zoekbalk

Kopieer de rode regel en plak hem in de zoekbalk op het overzicht of op de homepage. Dan kom je direct bij de juiste uitleg.

Text strings must be rendered within <Text>

Text strings must be rendered within a <Text> component.

Wat betekent het? In React Native moet alle tekst in een <Text> staan.

Fout:

<View>
  Hallo!
</View>

Goed:

<View>
  <Text>Hallo!</Text>
</View>

Stiekeme variant: && met een getal

Als items.length 0 is, probeert React Native de tekst 0 te tonen:

{items.length && <Text>Je hebt items</Text>}     // fout bij 0
{items.length > 0 && <Text>Je hebt items</Text>} // goed

HTML-tags gebruikt (div, p)

View config getter callback for component `div` must be a function (received `undefined`). Make sure to start component names with a capital letter.

Wat betekent het? React Native kent geen HTML. Er is geen <div>, <p>, <img> of <button>.

HTML (web)React Native
<div><View>
<p>, <h1>, <span><Text>
<img><Image>
<button><Pressable>
<input><TextInput>

Zie Basis Componenten.

Unable to resolve module

Unable to resolve module ./components/Card from /mijn-app/app/index.jsx

Wat betekent het? Metro (de bundler van Expo) kan het bestand niet vinden.

  • Pad fout? Vanuit app/index.jsx is het ../components/Card (een map omhoog!)
  • Hoofdletters? card.jsx en Card.jsx zijn verschillend
  • Een package? Installeer het met npx expo install naam-van-package

Network request failed

TypeError: Network request failed

Wat betekent het? Je app kan de server niet bereiken. Heel vaak: je gebruikt localhost. Maar op je telefoon betekent localhost de telefoon zelf, niet je laptop.

Fout:

fetch("http://localhost:4000/api/products")

Goed:

fetch("http://192.168.1.23:4000/api/products") // IP van je laptop

Je IP-adres vind je in de terminal waar Expo draait (staat bij exp://192.168...), of met ipconfig (Windows) / ipconfig getifaddr en0 (Mac). Laptop en telefoon moeten op hetzelfde wifi zitten.

Expo Go kan niet verbinden

Could not connect to development server.

Wat betekent het? Je telefoon kan de Expo-server op je laptop niet bereiken.

  1. Zitten je laptop en telefoon op hetzelfde wifi?
  2. Schoolnetwerk blokkeert het vaak. Start dan met een tunnel:
npx expo start --tunnel

VirtualizedLists in ScrollView

VirtualizedLists should never be nested inside plain ScrollViews with the same orientation because it can break windowing and other functionality - use another VirtualizedList-backed container instead.

Wat betekent het? Je hebt een <FlatList> in een <ScrollView> gezet. Een FlatList scrollt zelf al.

Fout:

<ScrollView>
  <Text style={styles.titel}>Producten</Text>
  <FlatList data={producten} renderItem={...} />
</ScrollView>

Goed:

<FlatList
  data={producten}
  renderItem={...}
  ListHeaderComponent={<Text style={styles.titel}>Producten</Text>}
/>

unique "key" prop

Each child in a list should have a unique "key" prop.

Wat betekent het? Elk item in je lijst heeft een unieke sleutel nodig.

<FlatList
  data={producten}
  keyExtractor={(item) => String(item.id)}
  renderItem={({ item }) => <Text>{item.naam}</Text>}
/>

keyExtractor moet een tekst teruggeven, daarom String(...).

Unmatched Route

Unmatched Route — Page could not be found.

Wat betekent het? Expo Router vindt geen scherm voor deze route.

  • De bestanden in app/ zijn je routes: app/profiel.jsx → /profiel
  • Klopt de spelling in router.push("/profiel") of <Link href="/profiel">?
  • Heeft het bestand een export default?

Mijn afbeelding is onzichtbaar

(geen foutmelding — je ziet gewoon niks)

Wat betekent het? Afbeeldingen van internet hebben in React Native altijd een breedte en hoogte nodig.

Fout:

<Image source={{ uri: "https://picsum.photos/200" }} />

Goed:

<Image
  source={{ uri: "https://picsum.photos/200" }}
  style={{ width: 200, height: 200 }}
/>

Een afbeelding uit je project laad je met require: source={require("../assets/logo.png")}

Rare fouten na installeren

(fouten die nergens op slaan, of oude code die blijft hangen)

Wat betekent het? Soms onthoudt Expo een oude versie van je code.

Stop de server (Ctrl + C) en start opnieuw met een lege cache:

npx expo start -c