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

React native – How can I insert an image in a js data file

I am creating a I’ve tried so many different ways with the image, but I just can’t seem to figure it out…
I hope someone Quiz App in React Native and have a problem when inserting images with each question on a js data file.

I am also a beginner with React Native, so 🙏 !!!!

This is my .js file:

export default data = [
     {
      question1: "How would you say 'Cherry' in Italian?,
      image: require('../../assets/images/cartoon cherry.png),
      options: ["Mela", "Fragola", "Ciliegia"],
      correct_option: "Ciliegia"
     },
]

I’ve tried so many different ways with the image, but I just can’t seem to figure it out…
I hope someone will give me a hand here… thanx..

Tags:

2

Answers


  1. 0

    There’s a minor syntax error in your JavaScript data file. The require statement for the image should be a valid JavaScript expression, and your question1 string is missing a closing quote (‘).

    Please refer corrected code:

    export default data = [
  {
    question1: "How would you say 'Cherry' in Italian?",
    image: require('../../assets/images/cartoon_cherry.png'),
    options: ["Mela", "Fragola", "Ciliegia"],
    correct_option: "Ciliegia"
  }
];

    Hope this helps you out 🙂

    If this not work for you, then check the path of your image.

    Login or Signup to reply.
  2. 0 
        You need to ensure that the image path is correctly specified and that it is properly imported. In React Native, images are typically imported using the require function
export default data = [
  {
    question1: "How would you say 'Cherry' in Italian?",
    image: require('../../assets/images/cartoon_cherry.png'),
    options: ["Mela", "Fragola", "Ciliegia"],
    correct_option: "Ciliegia"
  },
]

    use this data in a React Native component:
    import React from 'react';
    import { View, Text, Image } from 'react-native';
    import data from './path/to/your/datafile';
    
    const QuizQuestion = () => {
      const question = data[0]; // Accessing the first question in the array
    
      return (
        <View>
          <Text>{question.question1}</Text>
          <Image source={question.image} style={{ width: 100, height: 100 }} />
          {/* Render other parts of the question like options here */}
        </View>
      );
    };
    
    export default QuizQuestion;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search