React-Native using state in image require

Question

Why I can´t use states in my image

<Image source={require(this.state.image)} style={styles.img} />

I would like to change the image, getting it from an array when I click in the button a raffle function changes the image state, everything is working, but I can´t pass a state as a required parameter, how to solve it?

import React, {Component} from 'react';
import {
  Platform, 
  StyleSheet, 
  Text, 
  View,
  Image
} from 'react-native';
import Button from './src/components/Button.js';

export default class App extends Component{

  constructor(props){
    super(props);

    this.state = {
      image: './src/assets/interrogacao.png',
    }

    this.imagesArray = [
      './src/assets/1.jpg',
      './src/assets/2.jpg',
      './src/assets/3.jpg',
    ]

    this.rafflePosition = this.rafflePosition.bind(this);

  }

  rafflePosition(){
    let state = this.state;
    let numRandom = Math.floor(Math.random() * this.imagesArray.length)
    this.state.image = this.imagesArray[numRandom];
    var teste = this.state.image;
    this.setState(state);
    alert('teste' + teste)
  }

  render() {
    return (
      <View style={styles.container}> 
        <Image source={require(this.state.image)} style={styles.img} />
        <Button onPress={this.rafflePosition} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  img: {
    width: 220,
    height: 220,
    marginBottom: 90
  }

});

Does this answer your question? [React Native: require() with Dynamic String?](https://stackoverflow.com/questions/44991669/react-native-require-with-dynamic-string) — Crocsx, Dec 06 '19 at 01:39
There are many realted question already open in StackOverflow. But in general based on how the packager works, this isn't really possible with require. Packaging happens once before runtime so those variables don't have values yet. When you require from the state, the moment the require is executed your state isn't set yet. — Crocsx, Dec 06 '19 at 01:42

score 1 · Answer 1 · answered Jan 29 '21 at 15:13

require uses static urls only. Therefore, a variable used in place of the static url will not work. Because, require checks for the image file's existence before bundling the app, which happens even before rendering the variable itself.

So, you need to require the images beforehand in variables and then assign the variables, having the already required images in them, to the source like this:

const image = require('path_to_image.png')

<Image source={image} />

Ravi Sharma · Answer 2 · 2019-12-06T07:02:05.623

0

You can modify your code like this: Use require(imagesArray[numRandom]) to extract image path from array and then use it.

    this.state = {
      image: './src/assets/interrogacao.png',
      imagesArray = [
      './src/assets/1.jpg',
      './src/assets/2.jpg',
      './src/assets/3.jpg',
    ]}

    this.rafflePosition = this.rafflePosition.bind(this);

  }

  rafflePosition(){
    const { image, imagesArray } = this.state;
    let numRandom = Math.floor(Math.random() * imagesArray.length);
    let path = require(imagesArray[numRandom]);
    this.setState({image: path});
  }
render() {
    return (
      <View style={styles.container}> 
        <Image source={this.state.image} style={styles.img} />
        <Button onPress={this.rafflePosition} />
      </View>
    );
  }

edited Dec 06 '19 at 07:02

answered Dec 06 '19 at 05:47

Ravi Sharma

507
6
21

Thank you for try, but the problem is not on the function rafflePosition(), the problem is in the source{require('Here')} of my image, the state is being change, but i can´t put the state there, `` this´s not working – Vitor Augusto Batista Rocha Dec 06 '19 at 06:20
yes I checked, I solved my problem using ``, it´s working now, but there is another problem, i need to take images by internet i can´t save it on the assests. – Vitor Augusto Batista Rocha Dec 06 '19 at 08:55
If you want save images locally then you need to use require as `let path = require(imagesArray[numRandom]); this.setState({image: path});` and inside Image source you can give state value as `` – Ravi Sharma Dec 06 '19 at 08:56

React-Native using state in image require

2 Answers2