React native Question posted in
The official React Native documentation can be found here.

error related to images in react native app

import React, { useState } from 'react';
import type { PropsWithChildren } from 'react';

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

import DiceOne from '../assets/one.png'
import DiceTwo from '../assets/two.png'
import DiceThree from '../assets/three.png'
import DiceFour from '../assets/four.png'
import DiceFive from '../assets/five.png'
import DiceSix from '../assets/six.png'



type DiceProps = PropsWithChildren<{
  imageUrl: ImageSourcePropType
}>

const Dice = ({ imageUrl }: DiceProps): JSX.Element => {
  return (
    <View>
      <Image style={styles.diceImage} source={imageUrl} />
    </View>
  )
}






function App(): React.JSX.Element {

  const [diceImage, setDiceImage] = useState<ImageSourcePropType>(DiceOne)

  const rollDiceontap = () => {
    let randomNumber = Math.floor(Math.random() * 6) + 1;

    switch (randomNumber) {
      case 1:
        setDiceImage(DiceOne)
        break;
      case 2:
        setDiceImage(DiceTwo)
        break;
      case 3:
        setDiceImage(DiceThree)
        break;
      case 4:
        setDiceImage(DiceFour)
        break;
      case 5:
        setDiceImage(DiceFive)
        break;
      case 6:
        setDiceImage(DiceSix)
        break;


      default:
        setDiceImage(DiceOne)
        break;

    }
  }

  return (
    <View style={styles.container}>
      <Dice imageUrl={diceImage} />
      <Pressable onPress={rollDiceontap}>
        <Text style={styles.rollDiceBtnText}>
        Roll the dice
        </Text>
        
      </Pressable>
    </View>

  );
}

i am creating simple dice roll app on react native, the codes seems to be perfect and i have also create the module file also index.d.ts but i am getting this error, mentioned below, so please help as i am new to reactnative

error: Error: Unable to resolve module ../assets/one.png from C:UsersAdityaDesktopNew folderrolldiceApp.tsx:

None of these files exist:

  • one.png
  • ..assetsone.pngindex(.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
  11 | import { ImageSourcePropType, StyleSheet, View, Image, Pressable, Text } from 'react-native';
  12 |
> 13 | import DiceOne from '../assets/one.png'
     |                      ^
  14 | import DiceTwo from '../assets/two.png'
  15 | import DiceThree from '../assets/three.png'
  16 | import DiceFour from '../assets/four.png'"
Tags:

2

Answers


  1. 0

    To import a png image take a look to the following example:

    <Image source={require('./img/check.png')} />
    Login or Signup to reply.
  2. 0

    To support import statements for image assets like – jpg and png in typescript,

    First create a file called type.d.ts in root folder of your project, after that paste below code in the file and save it.

    declare module '*.png' {
  import {ImageSourcePropType} from 'react-native';

  const value: ImageSourcePropType;
  export default value;
}

    Then re-run Your app.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search