10. Afbeeldingen gebruiken uit assets in React Native

Wil je afbeeldingen gebruiken in je ap die je zelf op voorhand in de assets zet? Dan kan je onderstaande handleiding daarvoor gebruiken.

Voorbereiding

Zorg dat je afbeeldingen niet groter zijn dan nodig. Hoe groot? Dat ligt eraan welke soort afbeelding (illustratie vs foto), waarvoor die gebruikt wordt (gewone afbeelding vs portfolio van een fotograaf), hoe groot die getoond wordt (volledig scherm vs een klein stukje van het scherm),... . Kies steeds voor het kleinste formaat dat bruikbaar is voor jouw situatie.

Zet je afbeeldingen in een logische mappenstructuur in de 'assets' folder van je project. Probeer na te denken over welke soorten je nodig hebt en zet ze in logische submappen.

Maak in die folder een file aan images.d.ts, en declareer per filetype een module (je mag er meerdere onder elkaar zetten zoals in het voorbeeld):

/assets/images.d.ts

declare module '*.jpg' {
  import type {ImageSourcePropType} from 'react-native'
  const value: ImageSourcePropType
  export default value
}

declare module '*.png' {
  import type {ImageSourcePropType} from 'react-native'
  const value: ImageSourcePropType
  export default value
}

Gebruik

Op de component waar je de afbeelding wil tonen importeer je de afbeelding en een Image component (bijvoorbeeld die van react native):

import MyImage1 from '@/assets/images/custom/1.jpg'
import {Image} from 'react-native'

Nu kan je de naam die je gekozen hebt in de import gebruiken als source voor je afbeelding:

<Image source={MyImage1} height={100} width={100} />