Error using useState on Image Address with React Native

Question

I am having a problem when I try to concatenate the address of a local image with a value stored in useState.

import React, { useState } from 'react';
import { ImageBackground, ScrollView } from 'react-native';
import { Container, Button, Text } from 'native-base';
import styles from './DescobertaGravidezStyle';
import Header from '../../../components/principalComponents/header/Header';

export default () => {
  const [bg, setBg] = useState('Green');

  return (
    <Container>
      <Header />
      <ImageBackground
        source={require(`../../../img/bg/bg${bg}.png`)}
        style={{ width: '100%', height: '100%' }}
      ></ImageBackground>
    </Container>
  );
};

score 0 · Answer 1 · answered Dec 02 '19 at 13:48

You have to provide a physical address of the path not in the state or a variable.
Just because react native bundles it before running the code
Furthermore if you want to use it from a variable then make a component which returns the path when called.

More you can read here :- react native use variable for image file

Error using useState on Image Address with React Native

1 Answers1