Is it possible to change the image without constructor? react-native

Question

i want my picture to change to another picture after clicking onpress without constructor in my function.

My image code:

 <Image source={require("./assets/images/imgas.png")} resizeMode="contain" style={styles.ss} ></Image>

How do I make another image turn on when I click on it? Because I am using a function, I cannot use constructor.

Have any ideas?

Answer 1

Try doing this, then call setUri to change the image

const image = require("./assets/images/imgas.png")

const [uri, setUri] = useState(image);

<Image source={{uri}} resizeMode="contain" style={styles.ss} />

Answer 2

export default class Image extends Component {
  constructor(props) {
    this.state = {
     uri: '',
     }
  }

  handleButtonPress = () => {
    this.setState({
      uri: './assets/images/imgas.png',
    });
  }

  render() {
    return (
      ...
      <Button
        onPress={this.handleButtonPress}
        ...
      />
      ...
    );
  }
}