Trying to pass a variable inside of the useState method, but...

·

Trying to pass a variable inside of the useState method, but my app is crashing constantly at the first line. Where am I doing wrong ?

const App = () => {
  let path1 = getString();
  let path2 = getString();
  const [uri1, setUri1] = useState(require(path1));
  const [uri2, setUri2] = useState(require(path2));

const buttonPressed = () => {
    let path1 = getString();
    let path2 = getString();
    setUri1(require(path1));
    setUri2(require(path2));
  }

const getString = () => {
    const num = getRandomValue();
    const string = (
      './src/Images/dice' + num + '.png'
    );
    console.log(`Invoked the value of string is: ${string}`);
    return string;

  }

  const getRandomValue = () => {
    return (Math.floor((Math.random() * 6)) + 1);
  }


  return (
    <View style={styles.container}>
      <View style={{ flexDirection: "row" }}>
        <Image
          style={styles.stretch}
          source={uri1}
        />
        <Image
          style={styles.stretch}
          source={uri2}
        />
      </View>
      <TouchableOpacity
        onPress={buttonPressed}
      >
        <Text
          style={styles.gamebutton}>
          Play Game
        </Text>
      </TouchableOpacity>
    </View>
  );
};

Screenshot (182).png

#react-native #react #android

Comments (3)

Victoria Lo's photo

What I changed:

  1. const App = () => to export default function App()
  2. const string = (...) remove the brackets around it
  3. Arrange the functions under App(): getRandomValue() first then getString() then let path1 = ...
  4. Remove the require() inside both setUri1() and setUri2()

Code below:

import { StyleSheet, Text, View, Image, TouchableOpacity} from 'react-native';
import React, { useState, useEffect } from 'react';

export default function App() {
const getRandomValue = () => {
  return (Math.floor((Math.random() * 6)) + 1);
}

const getString = () => {
    const num = getRandomValue();
    const string = './src/Images/dice' + num + '.png';
    console.log(`Invoked the value of string is: ${string}`);
    return string;

}

let path1 = getString();
let path2 = getString();
const [uri1, setUri1] = useState(path1);
const [uri2, setUri2] = useState(path2);

const buttonPressed = () => {
    let path1 = getString();
    let path2 = getString();
    setUri1(path1);
    setUri2(path2);
  }

  return (
    <View style={styles.container}>
      <View style={{ flexDirection: "row" }}>
        <Image
          style={styles.stretch}
          source={uri1}
        />
        <Image
          style={styles.stretch}
          source={uri2}
        />
      </View>
      <TouchableOpacity
        onPress={buttonPressed}
      >
        <Text
          style={styles.gamebutton}>
          Play Game
        </Text>
      </TouchableOpacity>
    </View>
  );
};

Hope that helps!

Aniket Kumar Ghosh's photo

But in the react native docs, it's clearly mentioned that you have to use the require function while addressing the local file path. But considering your words, I have removed the require function, still not serving the purpose. Images are not being loaded while pressing the button though the all the required the functions are being invoked as it's console logging out accordingly.

Victoria Lo's photo

A nerd in books, tea, games and software.

Aniket Kumar Ghosh Hi, I have checked the docs. Apparently, require only accepts static resources and literal strings. You can't pass a variable. An approach to this problem I found is:

Hope that helps!